Skip to content

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

对接其它三个tab的接口

上级 1aaf9201
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 2875 行增加 和 630 行删除
components/bussiness/charts/chart-column-horizontal-tc-long.vue
浏览文件 @ 695eee7d
...@@ -7,6 +7,16 @@ ...@@ -7,6 +7,16 @@
<script> <script>
import { format } from "path"; import { format } from "path";
let vm = null; let vm = null;
let paramData = [
"生活方\n式干预",
"生活方\n式",
"本科",
"大专",
"中专以下",
"大专",
"中专以下",
"中专以下"
];
export default { export default {
props: { props: {
id: { id: {
...@@ -31,7 +41,7 @@ export default { ...@@ -31,7 +41,7 @@ export default {
"生活方\n式", "生活方\n式",
"本科", "本科",
"大专", "大专",
"中专以下", "中专以下",
"大专", "大专",
"中专以下", "中专以下",
"中专以下" "中专以下"
...@@ -41,34 +51,10 @@ export default { ...@@ -41,34 +51,10 @@ export default {
data() { data() {
return { return {
chartWidth: "300px", chartWidth: "300px",
chartHeight: "350px" chartHeight: "350px",
}; options: {
}, // color: vm.colors,
created() { color: ["#FFB01B", "#39AF9A"],
if (process.client) {
let clientWidth =
window.outerWidth ||
document.body.clientWidth ||
document.documentElement.clientWidth;
// this.chartWidth = (clientWidth * ).toFixed(0) + "px";
this.chartWidth = clientWidth + "px";
console.log(clientWidth);
this.chartHeight = 54 * this.paramData.length + "px";
}
},
mounted() {
vm = this;
this.drawColumn();
},
methods: {
// 画
drawColumn() {
// 基于准备好的dom，初始化echarts实例
let chartColumn = this.$echarts.init(document.getElementById(this.id));
// 绘制图表
let options = {
color: vm.colors,
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
...@@ -120,7 +106,7 @@ export default { ...@@ -120,7 +106,7 @@ export default {
yAxis: { yAxis: {
axisTick: false, axisTick: false,
type: "category", type: "category",
data: vm.paramData, data: paramData,
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "#676869" color: "#676869"
...@@ -171,8 +157,135 @@ export default { ...@@ -171,8 +157,135 @@ export default {
} }
} }
] ]
}; }
chartColumn.setOption(options); };
},
created() {
if (process.client) {
let clientWidth =
window.outerWidth ||
document.body.clientWidth ||
document.documentElement.clientWidth;
this.chartWidth = clientWidth + "px";
this.chartHeight = 54 * this.paramData.length + "px";
}
},
mounted() {
vm = this;
this.drawColumn();
},
methods: {
// 画
drawColumn() {
// 基于准备好的dom，初始化echarts实例
let chartColumn = this.$echarts.init(document.getElementById(this.id));
// 绘制图表
// let options = {
// color: vm.colors,
// tooltip: {
// trigger: "axis",
// axisPointer: {
// // 坐标轴指示器，坐标轴触发有效
// type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
// }
// },
// legend: {
// show: false,
// top: 20,
// data: ["培训前正确率", "培训后正确率"],
// textStyle: {
// fontSize: 12,
// // fontWeight: "bolder",
// color: "#676869"
// }
// },
// grid: {
// top: "2%",
// left: "3%",
// right: "6%",
// bottom: "0%",
// containLabel: true,
// borderWidth: 0
// },
// lineStyle: {
// color: "#fff"
// },
// xAxis: {
// axisTick: false,
// type: "value",
// axisLabel: {
// show: false,
// formatter: "{value}",
// textStyle: {
// color: "#676869"
// }
// },
// axisLine: {
// lineStyle: {
// color: "#676869",
// width: 0
// }
// },
// splitLine: {
// show: false
// }
// },
// yAxis: {
// axisTick: false,
// type: "category",
// data: vm.paramData,
// textStyle: {
// fontSize: 12,
// color: "#676869"
// },
// splitLine: {
// show: false
// },
// axisLabel: {
// formatter: "{value}",
// textAlign: "left",
// textStyle: {
// textAlign: "left",
// color: "#676869"
// }
// },
// axisLine: {
// lineStyle: {
// color: "#676869",
// width: 0
// }
// }
// },
// series: [
// {
// name: "培训前正确率",
// data: [12, 200, 150, 80, 70, 110, 130, 130],
// type: "bar",
// barWidth: 15, //柱图宽度
// label: {
// normal: {
// formatter: "{c}%",
// show: true,
// position: "inside"
// }
// }
// },
// {
// name: "培训后正确率",
// data: [120, 20, 160, 80, 70, 110, 130, 130],
// type: "bar",
// barWidth: 15, //柱图宽度
// label: {
// normal: {
// formatter: "{c}%",
// show: true,
// position: "inside"
// }
// }
// }
// ]
// };
chartColumn.setOption(this.options);
} }
} }
}; };
......
components/bussiness/charts/chart-column-horizontal-tc.vue
浏览文件 @ 695eee7d
...@@ -6,9 +6,13 @@ ...@@ -6,9 +6,13 @@
</template> </template>
<script> <script>
import { format } from "path"; import { format } from "path";
let vm = null; let vm = null, chartColumn = null;
export default { export default {
props: { props: {
dataList: {
type: Array,
default: () => []
},
id: { id: {
type: String, type: String,
default: "chartColumnTCId" default: "chartColumnTCId"
...@@ -19,9 +23,7 @@ export default { ...@@ -19,9 +23,7 @@ export default {
"#FFB01B", "#FFB01B",
"#39AF9A", "#39AF9A",
"#5D7092", "#5D7092",
"#FF9A4B", "#FF9A4B"
"#abb7bb",
"#76d2d2"
] ]
} }
}, },
...@@ -38,18 +40,37 @@ export default { ...@@ -38,18 +40,37 @@ export default {
document.body.clientWidth || document.body.clientWidth ||
document.documentElement.clientWidth; document.documentElement.clientWidth;
this.chartWidth = (clientWidth * 0.9).toFixed(0) + 'px'; this.chartWidth = (clientWidth * 0.9).toFixed(0) + 'px';
console.log(clientWidth); }
},
watch: {
dataList: {
handler(newVal) {
let yAxisData = [], series0Data = [], series1Data = []
yAxisData = newVal.map( item => {
return item.classifyName
})
series0Data = this.dataList.map( item => {
return item.beforeRate
})
series1Data = this.dataList.map( item => {
return item.afterRate
})
this.drawColumn(yAxisData.splice(0, 5), series0Data.splice(0, 5), series1Data.splice(0, 5));
},
deep: false
} }
}, },
mounted() { mounted() {
vm = this; vm = this;
this.drawColumn(); this.drawColumn([], [], []);
}, },
methods: { methods: {
// 画 // 画
drawColumn() { drawColumn(yAxisData, series0Data, series1Data) {
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
let chartColumn = this.$echarts.init(document.getElementById(this.id)); chartColumn = this.$echarts.init(document.getElementById(this.id));
// 绘制图表 // 绘制图表
let options = { let options = {
color: vm.colors, color: vm.colors,
...@@ -97,7 +118,8 @@ export default { ...@@ -97,7 +118,8 @@ export default {
yAxis: { yAxis: {
axisTick: false, axisTick: false,
type: "category", type: "category",
data: ["生活方\n式干预", "生活方\n式", "本科", "大专", "中专以下"], data: yAxisData,
// data: ["生活方\n式干预", "生活方\n式", "本科", "大专", "中专以下"],
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "#676869" color: "#676869"
...@@ -120,13 +142,15 @@ export default { ...@@ -120,13 +142,15 @@ export default {
series: [ series: [
{ {
name: "培训前正确率", name: "培训前正确率",
data: [12, 200, 150, 80, 70, 110, 130], data: series0Data,
// data: [12, 200, 150, 80, 70, 110, 130],
type: "bar", type: "bar",
barWidth: 15 //柱图宽度 barWidth: 15 //柱图宽度
}, },
{ {
name: "培训后正确率", name: "培训后正确率",
data: [120, 20, 160, 80, 70, 110, 130], data: series1Data,
// data: [120, 20, 160, 80, 70, 110, 130],
type: "bar", type: "bar",
barWidth: 15 //柱图宽度 barWidth: 15 //柱图宽度
} }
......
components/bussiness/charts/chart-column-vertical copy.vue 0 → 100644
浏览文件 @ 695eee7d
<!-- 柱状图-竖向 -->
<template>
<section class="chart-pie">
<div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
</section>
</template>
<script>
import { format } from "path";
let vm = null;
export default {
props: {
id: {
type: String,
default: "chartColumnId"
},
colors: {
type: Array,
default: () => [
"#FFB01B",
"#39AF9A",
"#5D7092",
"#FF9A4B",
"#abb7bb",
"#76d2d2"
]
}
},
data() {
return {
chartWidth: "300px",
chartHeight: "235px"
};
},
created() {
if (process.client) {
let clientWidth =
window.outerWidth ||
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() {
vm = this;
this.drawColumn();
},
methods: {
// 画
drawColumn() {
// 基于准备好的dom，初始化echarts实例
let chartColumn = this.$echarts.init(document.getElementById(this.id));
// 绘制图表
let options = {
color: vm.colors,
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
// legend: {
// 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: ["其他", "中专以下", "大专", "本科", "硕士"],
textStyle: {
fontSize: 12,
color: "#676869"
},
axisLabel: {
formatter: "{value}",
textStyle: {
color: "#676869"
}
},
axisLine: {
lineStyle: {
color: "#efefef",
width: 1
}
}
},
series: [
{
name: "获优秀人数",
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
barWidth: 20 //柱图宽度
}
]
};
chartColumn.setOption(options);
}
}
};
</script>
<style lang="scss" scoped>
.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);
border-radius: 6px;
border: 1px solid rgba(231, 232, 233, 1);
}
</style>
components/bussiness/charts/chart-column-vertical-score.vue 0 → 100644
浏览文件 @ 695eee7d
<!-- 柱状图-竖向 -->
<template>
<section class="chart-pie">
<div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
</section>
</template>
<script>
import { format } from "path";
let vm = null, chartColumn = null;
export default {
props: {
id: {
type: String,
default: "chartColumnId"
},
colors: {
type: Array,
default: () => [
"#FFB01B",
"#39AF9A",
"#5D7092",
"#FF9A4B",
]
},
dataList: {
tpye: Array,
default: () => []
}
},
data() {
return {
chartWidth: "300px",
chartHeight: "235px",
xAxisData: [],
seriesData: [],
options: {
color: ['#FFB01B'],
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 //柱图宽度
}
]
}
};
},
watch: {
dataList: {
handler(newVal) {
// debugger
this.xAxisData = newVal.map( item => {
return item.timesStr
})
this.seriesData = newVal.map( item => {
return item.count
})
this.options.xAxis.data = this.xAxisData;
this.options.series[0].data = this.seriesData;
chartColumn.setOption(this.options, true);
},
deep: true
}
},
created() {
if (process.client) {
let clientWidth =
window.outerWidth ||
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() {
vm = this;
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);
}
}
};
</script>
<style lang="scss" scoped>
.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);
border-radius: 6px;
border: 1px solid rgba(231, 232, 233, 1);
}
</style>
components/bussiness/charts/chart-column-vertical-tc.vue
浏览文件 @ 695eee7d
...@@ -6,9 +6,13 @@ ...@@ -6,9 +6,13 @@
</template> </template>
<script> <script>
import { format } from "path"; import { format } from "path";
let vm = null; let vm = null, chartColumn = null;
export default { export default {
props: { props: {
dataList: {
type: Array,
default: () => []
},
id: { id: {
type: String, type: String,
default: "chartColumnTCId" default: "chartColumnTCId"
...@@ -20,8 +24,6 @@ export default { ...@@ -20,8 +24,6 @@ export default {
"#39AF9A", "#39AF9A",
"#5D7092", "#5D7092",
"#FF9A4B", "#FF9A4B",
"#abb7bb",
"#76d2d2"
] ]
} }
}, },
...@@ -41,15 +43,34 @@ export default { ...@@ -41,15 +43,34 @@ export default {
console.log(clientWidth); console.log(clientWidth);
} }
}, },
watch: {
dataList: {
handler(newVal) {
let yAxisData = [], series0Data = [], series1Data = []
yAxisData = newVal.map( item => {
return item.classifyName
})
series0Data = this.dataList.map( item => {
return item.beforeRate
})
series1Data = this.dataList.map( item => {
return item.afterRate
})
this.drawColumn(yAxisData.splice(0, 5), series0Data.splice(0, 5), series1Data.splice(0, 5));
},
deep: false
}
},
mounted() { mounted() {
vm = this; vm = this;
this.drawColumn(); this.drawColumn([], [], []);
}, },
methods: { methods: {
// 画 // 画
drawColumn() { drawColumn(yAxisData, series0Data, series1Data) {
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
let chartColumn = this.$echarts.init(document.getElementById(this.id)); chartColumn = this.$echarts.init(document.getElementById(this.id));
// 绘制图表 // 绘制图表
let options = { let options = {
color: vm.colors, color: vm.colors,
...@@ -97,7 +118,8 @@ export default { ...@@ -97,7 +118,8 @@ export default {
xAxis: { xAxis: {
axisTick: false, axisTick: false,
type: "category", type: "category",
data: ["博士", "硕士", "本科", "大专", "中专以下", "其他"], // data: ["博士", "硕士", "本科", "大专", "中专以下", "其他"],
data: yAxisData,
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "#676869" color: "#676869"
...@@ -118,58 +140,19 @@ export default { ...@@ -118,58 +140,19 @@ export default {
series: [ series: [
{ {
name: "培训前正确率", name: "培训前正确率",
data: [120, 200, 150, 80, 70, 110, 130], data: series0Data,
// data: [120, 200, 150, 80, 70, 110, 130],
type: "bar", type: "bar",
barWidth: 15 //柱图宽度 barWidth: 15 //柱图宽度
}, },
{ {
name: "培训后正确率", name: "培训后正确率",
data: [120, 20, 160, 80, 70, 110, 130], data: series1Data,
// data: [120, 20, 160, 80, 70, 110, 130],
type: "bar", type: "bar",
barWidth: 15 //柱图宽度 barWidth: 15 //柱图宽度
} }
] ]
// 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); chartColumn.setOption(options);
} }
......
components/bussiness/charts/chart-column-vertical-times.vue 0 → 100644
浏览文件 @ 695eee7d
<!-- 柱状图-竖向 -->
<template>
<section class="chart-pie">
<div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
</section>
</template>
<script>
import { format } from "path";
let vm = null, chartColumn = null;
export default {
props: {
id: {
type: String,
default: "chartColumnId"
},
colors: {
type: Array,
default: () => [
"#FFB01B",
"#39AF9A",
"#5D7092",
"#FF9A4B",
"#abb7bb",
"#76d2d2"
]
},
dataList: {
tpye: Array,
default: () => []
}
},
data() {
return {
chartWidth: "300px",
chartHeight: "235px",
xAxisData: [],
seriesData: [],
options: {
color: ['#39AF9A'],
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 //柱图宽度
}
]
}
};
},
watch: {
dataList: {
handler(newVal) {
let cList = newVal.slice(0, 5);
this.xAxisData = cList.map( item => {
return item.timesStr
})
this.seriesData = cList.map( item => {
return item.count
})
this.options.xAxis.data = this.xAxisData;
this.options.series[0].data = this.seriesData;
chartColumn.setOption(this.options, true);
},
deep: true
}
},
created() {
if (process.client) {
let clientWidth =
window.outerWidth ||
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() {
vm = this;
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);
}
}
};
</script>
<style lang="scss" scoped>
.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);
border-radius: 6px;
border: 1px solid rgba(231, 232, 233, 1);
}
</style>
components/bussiness/charts/chart-column-vertical.vue
浏览文件 @ 695eee7d
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
</template> </template>
<script> <script>
import { format } from "path"; import { format } from "path";
let vm = null; let vm = null, chartColumn = null;
export default { export default {
props: { props: {
id: { id: {
...@@ -23,47 +23,20 @@ export default { ...@@ -23,47 +23,20 @@ export default {
"#abb7bb", "#abb7bb",
"#76d2d2" "#76d2d2"
] ]
},
dataList: {
tpye: Array,
default: () => []
} }
}, },
data() { data() {
return { return {
chartWidth: "300px", chartWidth: "300px",
chartHeight: "235px" chartHeight: "235px",
}; xAxisData: [],
}, seriesData: [],
created() { options: {
if (process.client) { // color: this.colors,
let clientWidth =
window.outerWidth ||
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() {
vm = this;
this.drawColumn();
},
methods: {
// 画
drawColumn() {
// 基于准备好的dom，初始化echarts实例
let chartColumn = this.$echarts.init(document.getElementById(this.id));
// 绘制图表
let options = {
color: vm.colors,
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
...@@ -109,7 +82,8 @@ export default { ...@@ -109,7 +82,8 @@ export default {
xAxis: { xAxis: {
axisTick: false, axisTick: false,
type: "category", type: "category",
data: ["其他", "中专以下", "大专", "本科", "硕士"], data: [],
// data: ["其他", "中专以下", "大专", "本科", "硕士"],
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "#676869" color: "#676869"
...@@ -130,13 +104,140 @@ export default { ...@@ -130,13 +104,140 @@ export default {
series: [ series: [
{ {
name: "获优秀人数", name: "获优秀人数",
data: [120, 200, 150, 80, 70, 110, 130], data: [],
// data: [120, 200, 150, 80, 70, 110, 130],
type: "bar", type: "bar",
barWidth: 20 //柱图宽度 barWidth: 20 //柱图宽度
} }
] ]
}; }
chartColumn.setOption(options); };
},
watch: {
dataList: {
handler(newVal) {
// debugger
this.xAxisData = newVal.map( item => {
return item.timesStr
})
this.seriesData = newVal.map( item => {
return item.count
})
this.options.xAxis.data = this.xAxisData;
this.options.series[0].data = this.seriesData;
chartColumn.setOption(this.options, true);
},
deep: true
}
},
created() {
if (process.client) {
let clientWidth =
window.outerWidth ||
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() {
vm = this;
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/course-times-list.vue
浏览文件 @ 695eee7d
...@@ -7,50 +7,21 @@ ...@@ -7,50 +7,21 @@
<li>人均学习时长</li> <li>人均学习时长</li>
</ul> </ul>
<ul class="list"> <ul class="list">
<li v-for="(item, index) in rankList" :key="index"> <li v-for="(item, index) in dataList" :key="index">
<span>高血压降压药物药…</span> <span>{{item.courseName}}</span>
<span>60分钟</span> <span>{{item.courseTime}}分钟</span>
<span>23分钟</span> <span>{{item.averageTime}}分钟</span>
</li> </li>
</ul> </ul>
</div> </div>
</template> </template>
<script> <script>
// {
// "subId":10000,
// "subName":null,
// "certCount":0,
// "joinCount":0,
// "certRate":0,
// "costTime":2000
// }
export default { export default {
props: { props: {
rankList: { dataList: {
type: Array, type: Array,
default: () => [ default: () => []
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
}
]
}
},
methods: {
getRankImgUrl(index) {
return require(`../../assets/images/rank-${index + 1}.png`);
} }
} }
}; };
......
components/bussiness/exam-list.vue
浏览文件 @ 695eee7d
...@@ -6,9 +6,9 @@ ...@@ -6,9 +6,9 @@
<li>参与通过率</li> <li>参与通过率</li>
</ul> </ul>
<ul class="list"> <ul class="list">
<li v-for="(item, index) in rankList" :key="index"> <li v-for="(item, index) in dataList" :key="index">
<span>高血压降压药物药物物理学…</span> <span>{{item.examName}}</span>
<span>83%</span> <span>{{(item.joinRate * 100).toFixed(0)}}%</span>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -16,32 +16,13 @@ ...@@ -16,32 +16,13 @@
<script> <script>
export default { export default {
props: { props: {
rankList: { dataList: {
type: Array, type: Array,
default: () => [ default: () => []
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
}
]
} }
}, },
methods: { methods: {
getRankImgUrl(index) {
return require(`../../assets/images/rank-${index + 1}.png`);
}
} }
}; };
</script> </script>
......
components/bussiness/exam-score-list.vue
浏览文件 @ 695eee7d
...@@ -6,9 +6,9 @@ ...@@ -6,9 +6,9 @@
<li>考试人数(个)</li> <li>考试人数(个)</li>
</ul> </ul>
<ul class="list"> <ul class="list">
<li v-for="(item, index) in rankList" :key="index"> <li v-for="(item, index) in dataList" :key="index">
<span>{{index + 1}}</span> <span>{{item.times}}</span>
<span>88</span> <span>{{item.count}}</span>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -16,33 +16,12 @@ ...@@ -16,33 +16,12 @@
<script> <script>
export default { export default {
props: { props: {
rankList: { dataList: {
type: Array, type: Array,
default: () => [ default: () => []
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
}
]
} }
}, },
methods: {
getRankImgUrl(index) {
return require(`../../assets/images/rank-${index + 1}.png`);
}
}
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
......
components/bussiness/exam-times-list copy.vue 0 → 100644
浏览文件 @ 695eee7d
<!-- 完成项目考试次数情况 -->
<template>
<div class="exam-times-wrapper">
<ul class="title">
<li>考试次数(次)</li>
<li>考试人数(个)</li>
</ul>
<ul class="list">
<li v-for="(item, index) in rankList" :key="index">
<span>{{index + 1}}</span>
<span>88</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
rankList: {
type: Array,
default: () => [
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
}
]
}
},
methods: {
getRankImgUrl(index) {
return require(`../../assets/images/rank-${index + 1}.png`);
}
}
};
</script>
<style scoped lang="scss">
.exam-times-wrapper {
font-size: 14px;
.title {
display: flex;
flex-direction: row;
margin: 0 15px;
justify-content: center;
height: 60px;
line-height: 60px;
border-bottom: 1px solid #f0f1f2;
// background: #e3efed;
// border-radius: 6px 6px 0px 0px;
li {
font-size: 14px;
font-weight: 400;
color: #449284;
}
li:nth-child(1) {
text-align: center;
flex: 1;
}
li:nth-child(2) {
flex: 1;
text-align: center;
}
}
.list {
font-size: 16px;
margin: 0 15px 20px;
li {
display: flex;
flex-direction: row;
height: 60px;
line-height: 60px;
// justify-content: space-between;
border-bottom: 1px solid #f0f1f2;
span {
font-weight: 400;
color: #373839;
}
span:nth-child(1) {
flex: 1;
text-align: center;
}
span:nth-child(2) {
flex: 1;
text-align: center;
}
}
}
}
</style>
\ No newline at end of file
components/bussiness/exam-times-list.vue
浏览文件 @ 695eee7d
<!-- 完成项目考试次数情况 --> <!-- 完成项目考试分数情况 -->
<template> <template>
<div class="exam-times-wrapper"> <div class="exam-times-wrapper">
<ul class="title"> <ul class="title">
...@@ -6,9 +6,9 @@ ...@@ -6,9 +6,9 @@
<li>考试人数(个)</li> <li>考试人数(个)</li>
</ul> </ul>
<ul class="list"> <ul class="list">
<li v-for="(item, index) in rankList" :key="index"> <li v-for="(item, index) in dataList" :key="index">
<span>{{index + 1}}</span> <span>{{item.times}}</span>
<span>88</span> <span>{{item.count}}</span>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -16,33 +16,12 @@ ...@@ -16,33 +16,12 @@
<script> <script>
export default { export default {
props: { props: {
rankList: { dataList: {
type: Array, type: Array,
default: () => [ default: () => []
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
}
]
} }
}, },
methods: {
getRankImgUrl(index) {
return require(`../../assets/images/rank-${index + 1}.png`);
}
}
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
......
components/bussiness/org-doctor-list.vue
浏览文件 @ 695eee7d
...@@ -2,55 +2,72 @@ ...@@ -2,55 +2,72 @@
<template> <template>
<div class="corse-times-list"> <div class="corse-times-list">
<ul class="title"> <ul class="title">
<li>已获证</li> <li :class="{'active': cIndex === 0}" @click="tabClick(0)">已获证</li>
<li>未获证</li> <li :class="{'active': cIndex === 1}" @click="tabClick(1)">未获证</li>
<li>未参与</li> <li :class="{'active': cIndex === 2}" @click="tabClick(2)">未参与</li>
</ul> </ul>
<ul class="list"> <ul v-show="cIndex === 0" class="list">
<li v-for="(item, index) in rankList" :key="index"> <li v-for="(item, index) in certUserList" :key="index">
<span>武强</span> <span>{{item.doctorName}}</span>
<span>内科</span> <span>{{item.departmentName}}</span>
<span>成绩 98分</span> <span>成绩 {{item.score}}分</span>
</li>
</ul>
<ul v-show="cIndex === 1" class="list">
<li v-for="(item, index) in noCertUserList" :key="index">
<span>{{item.doctorName}}</span>
<span>{{item.departmentName}}</span>
<!-- <span>成绩 {{item.score}}分</span> -->
</li>
</ul>
<ul v-show="cIndex === 2" class="list">
<li v-for="(item, index) in noJoinList" :key="index">
<span>{{item.doctorName}}</span>
<span>{{item.departmentName}}</span>
<!-- <span>成绩 {{item.score}}分</span> -->
</li> </li>
</ul> </ul>
</div> </div>
</template> </template>
<script> <script>
// {
// "subId":10000,
// "subName":null,
// "certCount":0,
// "joinCount":0,
// "certRate":0,
// "costTime":2000
// }
export default { export default {
data() {
return {
cIndex: 0,
hasClicked: [true, false, false]
}
},
props: { props: {
rankList: { certUserList: {
type: Array,
default: () => []
},
noCertUserList: {
type: Array, type: Array,
default: () => [ default: () => []
{ },
province: "福建省", noJoinList: {
order: 1 type: Array,
}, default: () => []
{ },
province: "福建省", tabIndex: {
order: 1 type: String | Number,
}, default: 0
{ }
province: "福建省", },
order: 1 watch: {
}, tabIndex(newVal) {
{ this.cIndex = newVal;
province: "福建省",
order: 1
}
]
} }
}, },
methods: { methods: {
getRankImgUrl(index) { tabClick(index) {
return require(`../../assets/images/rank-${index + 1}.png`); this.cIndex = index;
if(!this.hasClicked[index]) {
this.hasClicked[index] = true;
this.$emit('orgDoctorTabChange', index);
}
} }
} }
}; };
...@@ -72,6 +89,16 @@ export default { ...@@ -72,6 +89,16 @@ export default {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #979899; color: #979899;
&.active {
color: #373839;
}
&::after {
display: inline-block;
content: '';
width: 6px;
height: 3px;;
border-radius: 3px;
}
} }
} }
......
components/common/common-card.vue
浏览文件 @ 695eee7d
...@@ -12,23 +12,7 @@ export default { ...@@ -12,23 +12,7 @@ export default {
props: { props: {
cardList: { cardList: {
type: Array, type: Array,
default: () => [ default: () => []
{
count: 5,
unitName: "门",
description: "正式考试数"
},
{
count: 5,
unitName: "门",
description: "模拟考试数"
},
{
count: 60,
unitName: "道",
description: "所有考题数"
}
]
}, },
needBG: { needBG: {
type: Boolean, type: Boolean,
......
components/common/common-header.vue
浏览文件 @ 695eee7d
...@@ -46,7 +46,7 @@ export default { ...@@ -46,7 +46,7 @@ export default {
align-items: center; align-items: center;
text-align: center; text-align: center;
justify-content: center; /* 水平居中 */ justify-content: center; /* 水平居中 */
font-size: 26px; font-size: 17px;
span { span {
display: block; display: block;
} }
......
components/common/common-swiper-item.vue
浏览文件 @ 695eee7d
...@@ -3,20 +3,20 @@ ...@@ -3,20 +3,20 @@
<section class="common-swiper-item"> <section class="common-swiper-item">
<article class="middle"> <article class="middle">
<div class="title"> <div class="title">
<span>获证率</span> <span>{{certFlag ? '获证率' : '完成率'}}</span>
<span> <span>
<img src="../../assets/images/tips-1.png" /> <img src="../../assets/images/tips-1.png" />
</span> </span>
</div> </div>
<div class="ratio"> <div class="ratio">
<span>{{(percentData.certificateRate * 100).toFixed(0)}}%</span> <span>{{(percentData.certificateRate * 100).toFixed(1)}}%</span>
</div> </div>
<div class="statics"> <div class="statics">
<span>已获证人数 {{percentData.finishCount}}</span> <span>已获证人数 {{percentData.finishCount}}</span>
<span>应参与人数 {{percentData.doctorCount}}</span> <span>应参与人数 {{percentData.doctorCount}}</span>
</div> </div>
</article> </article>
<article class="middle-org"> <article v-show="isSingleOrg" class="middle-org">
<div class="title"> <div class="title">
<span>人员参与率</span> <span>人员参与率</span>
<span> <span>
...@@ -24,19 +24,19 @@ ...@@ -24,19 +24,19 @@
</span> </span>
</div> </div>
<div class="ratio"> <div class="ratio">
<span>{{(percentData.certificateRate * 100).toFixed(0)}}%</span> <span>{{(percentData.doctorRate * 100).toFixed(1)}}%</span>
</div> </div>
<div class="statics"> <div class="statics">
<span class="grey">已参与人数 {{percentData.finishCount}}</span> <span class="grey">已参与人数 {{percentData.joinCount}}</span>
<span class="grey">应参与人数 {{percentData.doctorCount}}</span> <span class="grey">应参与人数 {{percentData.doctorCount}}</span>
</div> </div>
</article> </article>
<article class="mini"> <article v-show="!isSingleOrg" class="mini">
<div class="item"> <div class="item">
<div class="wrapper"> <div class="wrapper">
<span> <span>
<div class="desc">人员参与率</div> <div class="desc">人员参与率</div>
<div class="ratio">{{(percentData.doctorRate * 100).toFixed(0)}}%</div> <div class="ratio">{{(percentData.doctorRate * 100).toFixed(1)}}%</div>
</span> </span>
<img src="../../assets/images/tips-2.png" /> <img src="../../assets/images/tips-2.png" />
</div> </div>
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
<div class="wrapper"> <div class="wrapper">
<span> <span>
<div class="desc">机构参与率</div> <div class="desc">机构参与率</div>
<div class="ratio">{{(percentData.hospitalRate * 100).toFixed(0)}}%</div> <div class="ratio">{{(percentData.hospitalRate * 100).toFixed(1)}}%</div>
</span> </span>
<img src="../../assets/images/tips-3.png" /> <img src="../../assets/images/tips-3.png" />
</div> </div>
...@@ -74,6 +74,14 @@ export default { ...@@ -74,6 +74,14 @@ export default {
hospitalRate: 0 hospitalRate: 0
}; };
} }
},
isSingleOrg: {
type: Boolean,
default: false
},
certFlag: {
type: Number | String,
default: 0
} }
}, },
watch: { watch: {
......
components/common/common-tabs.vue
浏览文件 @ 695eee7d
...@@ -3,6 +3,11 @@ ...@@ -3,6 +3,11 @@
<div class="common-tabs-wrapper"> <div class="common-tabs-wrapper">
<ul class="common-tabs"> <ul class="common-tabs">
<li <li
v-show="(item === '课程分析' && projectInfo.existCourse === 1)
|| (item === '考试分析' && projectInfo.existExam === 1)
|| (item === '学习效果分析' && projectInfo.existEffect === 1)
|| item === '总体概况'
|| item === '人群分析'"
v-for="(item, index) in tapList" v-for="(item, index) in tapList"
:class="{'active': index === cIndex}" :class="{'active': index === cIndex}"
:key="index" :key="index"
...@@ -22,25 +27,32 @@ export default { ...@@ -22,25 +27,32 @@ export default {
"总体概况", "总体概况",
"人群分析", "人群分析",
"课程分析", "课程分析",
"考试分析",
"学习效果分析"
] ]
}; };
}, },
props: {
projectInfo: {
type: Object
}
},
mounted() { mounted() {
this.handleTabs(true, true); // this.handleTabs(true, true);
}, },
methods: { methods: {
clickTab(index) { clickTab(index) {
this.cIndex = index; this.cIndex = index;
this.$emit("tabClicked", index); this.$emit("tabClicked", index);
}, },
handleTabs(needOne, needTwo) { // handleTabs(needOne, needTwo) {
if(needOne) { // if(needOne) {
this.tapList.push('考试分析'); // this.tapList.push('考试分析');
} // }
if(needTwo) { // if(needTwo) {
this.tapList.push('学习效果分析'); // this.tapList.push('学习效果分析');
} // }
} // }
} }
}; };
</script> </script>
......
components/common/pica-org copy 2.vue 0 → 100644
浏览文件 @ 695eee7d
<!-- 选择地区组件 -->
<template>
<div class="select-wrapper">
<div class="mask" @click="cancel" @touchmove.prevent>
<div class="address-wrap" @click.stop>
<div class="tip-header">
<span class="cancel-btn" @click="cancel">取消</span>
<h3>选择机构</h3>
<span class="submit-btn" @click="confirm">确定</span>
<!-- <button :disabled="isDisabled" class="submit-btn" @click="confirm">确定</button> -->
</div>
<div class="address-select">
<ul class="show-address-header">
<!-- <li :class="{ active: isShowProvince }" class="item" @click="tabAddressClick(1)"> -->
<li :class="{ active: isShowProvince }" class="item">
{{
value.provinceName
? value.provinceName
: '请选择'
}}
</li>
</ul>
<div class="address-content" @touchmove.stop>
<ul v-show="isShowProvince" id="province">
<li
v-for="(provinceItem, index) in orgList"
:key="index"
:class="{ active: provinceItem.selected }"
@click="orgSelect(provinceItem, index)"
>
<span>{{ provinceItem.hospitalName }}</span>
<span v-show="provinceItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { getProvinceList } from "../../service";
export default {
name: "PicaOrg",
data() {
return {
areaList: {
provinceList: []
},
value: {
provinceId: "",
provinceName: ""
},
isDisabled: true,
isShowProvince: true
};
},
props: {
baseUrl: {
type: String,
default: ""
},
rank: {
type: Number | String,
default: 4
}
},
computed: {
...mapGetters({
orgList: "orgList"
})
},
watch: {
orgList: {
handler(newList) {
// console.log('$$$$$$$$$4', newList)
// this.areaList.provinceList = newList;
// this.areaList.provinceList.map(a => {
// a.selected = false;
// // if (a.provinceId == this.value.provinceId) {
// // a.selected = true;
// // }
// });
newList.map( a => {
a.selected = false
})
return newList
},
deep: true
}
},
created() {
// localStorage.setItem('baseUrl',this.baseUrl);
// this.getProvinceData();
},
methods: {
// async getProvinceData() {
// await getProvinceList().then(res => {
// if (res.code === "000000") {
// this.areaList.provinceList = res.data.provinceList;
// this.areaList.provinceList.map(a => {
// if (a.provinceId == this.value.provinceId) {
// a.selected = true;
// }
// });
// }
// });
// },
orgSelect(item, idx) {
// debugger
this.value.provinceId = item.hospitalId;
// this.value.provinceName = item.hospitalName;
// this.areaList.provinceList.map(a => (a.selected = false));
// this.areaList.provinceList[idx].selected = true;
// this.areaList.provinceList[idx].selected = !this.areaList.provinceList[
// idx
// ].selected;
this.orgList[idx].selected = true;
},
confirm() {
this.$emit("confirm", this.value);
},
cancel() {
this.$emit("cancel", false);
}
}
};
</script>
<style lang="less" scoped>
.select-wrapper {
font-family: PingFangSC-Regular;
.mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(55, 56, 57, 0.6);
}
.address-wrap {
position: absolute;
width: 100%;
height: 293px;
background-color: #ffffff;
box-sizing: border-box;
bottom: 0;
left: 0;
right: 0;
.tip-header {
position: relative;
height: 58px;
line-height: 58px;
width: 100%;
font-size: 17px;
display: flex;
justify-content: space-between;
padding: 0 15px;
box-sizing: border-box;
.cancel-btn {
color: #999;
}
h3 {
font-size: 18px;
color: #373839;
font-weight: 400;
}
.submit-btn {
font-size: 17px;
outline: none;
border: 1px solid transparent;
background-color: transparent;
color: #449284 !important;
&:disabled {
color: #c7c8c9;
}
}
}
.address-select {
width: 100%;
height: auto;
/*height: 196px;*/
box-sizing: border-box;
.show-address-header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: relative;
padding-bottom: 4px;
&:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #f0f1f2;
color: #f0f1f2;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.item {
display: inline-block;
font-size: 15px;
line-height: 35px;
height: 35px;
padding: 0 15px;
box-sizing: border-box;
max-width: 25%;
text-align: left;
color: #676869;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
&:last-of-type {
padding-right: 15px;
}
&.active {
color: #373839;
font-family: PingFangSC-Medium;
/*font-weight:500;*/
}
&.active:after {
content: " ";
position: absolute;
left: 50%;
bottom: 0;
right: 0;
width: 10px;
height: 3px;
/*border-radius: 2px;*/
border-radius: 30%;
text-align: center;
background-color: #449284;
transform: translateX(-50%);
}
}
}
.address-content {
position: relative;
width: 100%;
height: 100%;
/*height: 196px;*/
overflow: hidden;
box-sizing: border-box;
ul {
width: 100%;
height: 196px;
overflow-y: auto;
box-sizing: border-box;
padding: 10px 13px;
-webkit-overflow-scrolling: touch;
position: static;
-webkit-transform: translateZ(0px);
li {
height: 35px;
line-height: 35px;
font-size: 15px;
width: 100%;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #676869;
cursor: pointer;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
&.active {
color: #449284;
}
img {
width: 10px;
height: 10px;
}
}
}
}
}
}
}
</style>
\ No newline at end of file
components/common/pica-org copy 3.vue 0 → 100644
浏览文件 @ 695eee7d
<!-- 选择地区组件 -->
<template>
<div class="select-wrapper">
<div class="mask" @click="cancel" @touchmove.prevent>
<div class="address-wrap" @click.stop>
<div class="tip-header">
<span class="cancel-btn" @click="cancel">取消</span>
<h3>选择机构</h3>
<span class="submit-btn" @click="confirm">确定</span>
<!-- <button :disabled="isDisabled" class="submit-btn" @click="confirm">确定</button> -->
</div>
<div class="address-select">
<ul class="show-address-header">
<!-- <li :class="{ active: isShowProvince }" class="item" @click="tabAddressClick(1)"> -->
<li :class="{ active: isShowProvince }" class="item">
{{
value.provinceName
? value.provinceName
: '请选择'
}}
</li>
</ul>
<div class="address-content" @touchmove.stop>
<ul v-show="isShowProvince" id="province">
<li
v-for="(provinceItem, index) in orgList"
:key="index"
:class="{ active: provinceItem.selected }"
@click="orgSelect(provinceItem, index)"
>
<span>{{ provinceItem.hospitalName }}</span>
<span v-show="provinceItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { getProvinceList } from "../../service";
export default {
name: "PicaOrg",
data() {
return {
areaList: {
provinceList: []
},
value: {
provinceId: "",
provinceName: ""
},
isDisabled: true,
isShowProvince: true
};
},
props: {
baseUrl: {
type: String,
default: ""
},
rank: {
type: Number | String,
default: 4
}
},
computed: {
...mapGetters({
orgList: "orgList"
})
},
watch: {
orgList: {
handler(newList) {
// console.log('$$$$$$$$$4', newList)
// this.areaList.provinceList = newList;
// this.areaList.provinceList.map(a => {
// a.selected = false;
// // if (a.provinceId == this.value.provinceId) {
// // a.selected = true;
// // }
// });
newList.map( a => {
a.selected = false
})
return newList
},
deep: true
}
},
created() {
// localStorage.setItem('baseUrl',this.baseUrl);
// this.getProvinceData();
},
methods: {
// async getProvinceData() {
// await getProvinceList().then(res => {
// if (res.code === "000000") {
// this.areaList.provinceList = res.data.provinceList;
// this.areaList.provinceList.map(a => {
// if (a.provinceId == this.value.provinceId) {
// a.selected = true;
// }
// });
// }
// });
// },
orgSelect(item, idx) {
// debugger
this.value.provinceId = item.hospitalId;
// this.value.provinceName = item.hospitalName;
// this.areaList.provinceList.map(a => (a.selected = false));
// this.areaList.provinceList[idx].selected = true;
// this.areaList.provinceList[idx].selected = !this.areaList.provinceList[
// idx
// ].selected;
this.orgList[idx].selected = true;
},
confirm() {
this.$emit("confirm", this.value);
},
cancel() {
this.$emit("cancel", false);
}
}
};
</script>
<style lang="less" scoped>
.select-wrapper {
font-family: PingFangSC-Regular;
.mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(55, 56, 57, 0.6);
}
.address-wrap {
position: absolute;
width: 100%;
height: 293px;
background-color: #ffffff;
box-sizing: border-box;
bottom: 0;
left: 0;
right: 0;
.tip-header {
position: relative;
height: 58px;
line-height: 58px;
width: 100%;
font-size: 17px;
display: flex;
justify-content: space-between;
padding: 0 15px;
box-sizing: border-box;
.cancel-btn {
color: #999;
}
h3 {
font-size: 18px;
color: #373839;
font-weight: 400;
}
.submit-btn {
font-size: 17px;
outline: none;
border: 1px solid transparent;
background-color: transparent;
color: #449284 !important;
&:disabled {
color: #c7c8c9;
}
}
}
.address-select {
width: 100%;
height: auto;
/*height: 196px;*/
box-sizing: border-box;
.show-address-header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: relative;
padding-bottom: 4px;
&:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #f0f1f2;
color: #f0f1f2;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.item {
display: inline-block;
font-size: 15px;
line-height: 35px;
height: 35px;
padding: 0 15px;
box-sizing: border-box;
max-width: 25%;
text-align: left;
color: #676869;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
&:last-of-type {
padding-right: 15px;
}
&.active {
color: #373839;
font-family: PingFangSC-Medium;
/*font-weight:500;*/
}
&.active:after {
content: " ";
position: absolute;
left: 50%;
bottom: 0;
right: 0;
width: 10px;
height: 3px;
/*border-radius: 2px;*/
border-radius: 30%;
text-align: center;
background-color: #449284;
transform: translateX(-50%);
}
}
}
.address-content {
position: relative;
width: 100%;
height: 100%;
/*height: 196px;*/
overflow: hidden;
box-sizing: border-box;
ul {
width: 100%;
height: 196px;
overflow-y: auto;
box-sizing: border-box;
padding: 10px 13px;
-webkit-overflow-scrolling: touch;
position: static;
-webkit-transform: translateZ(0px);
li {
height: 35px;
line-height: 35px;
font-size: 15px;
width: 100%;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #676869;
cursor: pointer;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
&.active {
color: #449284;
}
img {
width: 10px;
height: 10px;
}
}
}
}
}
}
}
</style>
\ No newline at end of file
components/common/pica-org copy 4.vue 0 → 100644
浏览文件 @ 695eee7d
<!-- 选择地区组件 -->
<template>
<div class="select-wrapper">
<div class="mask" @click="cancel" @touchmove.prevent>
<div class="address-wrap" @click.stop>
<div class="tip-header">
<span class="cancel-btn" @click="cancel">取消</span>
<h3>选择机构</h3>
<span class="submit-btn" @click="confirm">确定</span>
<!-- <button :disabled="isDisabled" class="submit-btn" @click="confirm">确定</button> -->
</div>
<div class="address-select">
<ul class="show-address-header">
<!-- <li :class="{ active: isShowProvince }" class="item" @click="tabAddressClick(1)"> -->
<li :class="{ active: isShowProvince }" class="item">
{{
value.provinceName
? value.provinceName
: '请选择'
}}
</li>
</ul>
<div class="address-content" @touchmove.stop>
<ul v-show="isShowProvince" id="province">
<li
v-for="(orgItem, index) in areaList.provinceList"
:key="index"
:class="{ active: orgItem.selected }"
@click="orgSelect(orgItem, index)"
>
<span>{{ orgItem.hospitalName }}</span>
<span v-show="orgItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { getProvinceList } from "../../service";
export default {
name: "PicaOrg",
data() {
return {
areaList: {
provinceList: []
},
value: {
provinceId: "",
provinceName: ""
},
isDisabled: true,
isShowProvince: true
};
},
props: {
baseUrl: {
type: String,
default: ""
},
rank: {
type: Number | String,
default: 4
}
},
computed: {
...mapGetters({
orgList: "orgList"
})
},
watch: {
orgList: {
handler(newList) {
console.log('$$$$$$$$$4', newList)
this.areaList.provinceList = newList;
this.areaList.provinceList.map(a => {
a.selected = false;
});
},
deep: true
}
},
created() {
},
methods: {
orgSelect(item, idx) {
this.value.provinceId = item.hospitalId;
this.value.provinceName = item.hospitalName;
this.areaList.provinceList[idx].selected = !this.areaList.provinceList[
idx
].selected;
this.$forceUpdate()
},
confirm() {
this.$emit("confirm", this.value);
},
cancel() {
this.$emit("cancel", false);
}
}
};
</script>
<style lang="less" scoped>
.select-wrapper {
font-family: PingFangSC-Regular;
.mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(55, 56, 57, 0.6);
}
.address-wrap {
position: absolute;
width: 100%;
height: 293px;
background-color: #ffffff;
box-sizing: border-box;
bottom: 0;
left: 0;
right: 0;
.tip-header {
position: relative;
height: 58px;
line-height: 58px;
width: 100%;
font-size: 17px;
display: flex;
justify-content: space-between;
padding: 0 15px;
box-sizing: border-box;
.cancel-btn {
color: #999;
}
h3 {
font-size: 18px;
color: #373839;
font-weight: 400;
}
.submit-btn {
font-size: 17px;
outline: none;
border: 1px solid transparent;
background-color: transparent;
color: #449284 !important;
&:disabled {
color: #c7c8c9;
}
}
}
.address-select {
width: 100%;
height: auto;
/*height: 196px;*/
box-sizing: border-box;
.show-address-header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: relative;
padding-bottom: 4px;
&:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #f0f1f2;
color: #f0f1f2;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.item {
display: inline-block;
font-size: 15px;
line-height: 35px;
height: 35px;
padding: 0 15px;
box-sizing: border-box;
max-width: 25%;
text-align: left;
color: #676869;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
&:last-of-type {
padding-right: 15px;
}
&.active {
color: #373839;
font-family: PingFangSC-Medium;
/*font-weight:500;*/
}
&.active:after {
content: " ";
position: absolute;
left: 50%;
bottom: 0;
right: 0;
width: 10px;
height: 3px;
/*border-radius: 2px;*/
border-radius: 30%;
text-align: center;
background-color: #449284;
transform: translateX(-50%);
}
}
}
.address-content {
position: relative;
width: 100%;
height: 100%;
/*height: 196px;*/
overflow: hidden;
box-sizing: border-box;
ul {
width: 100%;
height: 196px;
overflow-y: auto;
box-sizing: border-box;
padding: 10px 13px;
-webkit-overflow-scrolling: touch;
position: static;
-webkit-transform: translateZ(0px);
li {
height: 35px;
line-height: 35px;
font-size: 15px;
width: 100%;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #676869;
cursor: pointer;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
&.active {
color: #449284;
}
img {
width: 10px;
height: 10px;
}
}
}
}
}
}
}
</style>
\ No newline at end of file
components/common/pica-org.vue
浏览文件 @ 695eee7d
...@@ -7,23 +7,17 @@ ...@@ -7,23 +7,17 @@
<span class="cancel-btn" @click="cancel">取消</span> <span class="cancel-btn" @click="cancel">取消</span>
<h3>选择机构</h3> <h3>选择机构</h3>
<span class="submit-btn" @click="confirm">确定</span> <span class="submit-btn" @click="confirm">确定</span>
<!-- <button :disabled="isDisabled" class="submit-btn" @click="confirm">确定</button> -->
</div> </div>
<div class="address-select"> <div class="address-select">
<ul class="show-address-header"> <ul class="show-address-header">
<!-- <li :class="{ active: isShowProvince }" class="item" @click="tabAddressClick(1)"> --> <li class="item active">
<li :class="{ active: isShowProvince }" class="item"> 请选择
{{
value.provinceName
? value.provinceName
: '请选择'
}}
</li> </li>
</ul> </ul>
<div class="address-content" @touchmove.stop> <div class="address-content" @touchmove.stop>
<ul v-show="isShowProvince" id="province"> <ul id="province">
<li <li
v-for="(orgItem, index) in areaList.provinceList" v-for="(orgItem, index) in dataList"
:key="index" :key="index"
:class="{ active: orgItem.selected }" :class="{ active: orgItem.selected }"
@click="orgSelect(orgItem, index)" @click="orgSelect(orgItem, index)"
...@@ -42,21 +36,12 @@ ...@@ -42,21 +36,12 @@
</template> </template>
<script> <script>
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import { getProvinceList } from "../../service";
export default { export default {
name: "PicaOrg", name: "PicaOrg",
data() { data() {
return { return {
areaList: { dataList: [],
provinceList: []
},
value: {
provinceId: "",
provinceName: ""
},
isDisabled: true,
isShowProvince: true
}; };
}, },
props: { props: {
...@@ -78,48 +63,26 @@ export default { ...@@ -78,48 +63,26 @@ export default {
orgList: { orgList: {
handler(newList) { handler(newList) {
console.log('$$$$$$$$$4', newList) console.log('$$$$$$$$$4', newList)
this.areaList.provinceList = newList; this.dataList = newList;
this.areaList.provinceList.map(a => { this.dataList.map(a => {
a.selected = false; a.selected = false;
// if (a.provinceId == this.value.provinceId) {
// a.selected = true;
// }
}); });
}, },
deep: true deep: true
} }
}, },
created() { created() {
// localStorage.setItem('baseUrl',this.baseUrl);
// this.getProvinceData();
}, },
methods: { methods: {
// async getProvinceData() {
// await getProvinceList().then(res => {
// if (res.code === "000000") {
// this.areaList.provinceList = res.data.provinceList;
// this.areaList.provinceList.map(a => {
// if (a.provinceId == this.value.provinceId) {
// a.selected = true;
// }
// });
// }
// });
// },
orgSelect(item, idx) { orgSelect(item, idx) {
// debugger this.dataList[idx].selected = !this.dataList[idx].selected;
this.value.provinceId = item.hospitalId; this.$forceUpdate()
// this.value.provinceName = item.hospitalName;
// this.areaList.provinceList.map(a => (a.selected = false));
// this.areaList.provinceList[idx].selected = true;
this.areaList.provinceList[idx].selected = !this.areaList.provinceList[
idx
].selected;
}, },
confirm() { confirm() {
this.$emit("confirm", this.value); this.$emit("confirm", this.dataList);
}, },
cancel() { cancel() {
this.$emit("cancel", false); this.$emit("cancel", false);
......
package.json
浏览文件 @ 695eee7d
...@@ -18,7 +18,8 @@ ...@@ -18,7 +18,8 @@
"koa": "^2.6.2", "koa": "^2.6.2",
"nuxt": "^2.0.0", "nuxt": "^2.0.0",
"v-charts": "^1.19.0", "v-charts": "^1.19.0",
"vant": "^2.2.13" "vant": "^2.2.13",
"vconsole": "^3.3.4"
}, },
"devDependencies": { "devDependencies": {
"@nuxtjs/axios": "^5.5.4", "@nuxtjs/axios": "^5.5.4",
......
pages/exam-score.vue
浏览文件 @ 695eee7d
<template> <template>
<section> <section>
<CommonHeader title="完成项目考试分数情况"></CommonHeader> <CommonHeader title="完成项目考试分数情况"></CommonHeader>
<CommonTitleMini :title="listTitle" :needRightBtn="needRightBtn"></CommonTitleMini> <CommonTitleMini :title="title" :needRightBtn="needRightBtn"></CommonTitleMini>
<ExamScoreList></ExamScoreList> <ExamScoreList :dataList="dataList"></ExamScoreList>
<CommonNoMore class="mt-10"></CommonNoMore> <CommonNoMore class="mt-10"></CommonNoMore>
</section> </section>
</template> </template>
<script> <script>
import { mapGetters } from "vuex"; const cookies = require("cookie-universal")();
import { getGeneralExam } from "@/service";
import CommonHeader from "@/components/common/common-header"; import CommonHeader from "@/components/common/common-header";
import CommonTitleMini from "@/components/common/common-title-mini"; import CommonTitleMini from "@/components/common/common-title-mini";
...@@ -15,59 +16,27 @@ import CommonNoMore from "@/components/common/common-no-more"; ...@@ -15,59 +16,27 @@ import CommonNoMore from "@/components/common/common-no-more";
import ExamScoreList from "@/components/bussiness/exam-score-list"; import ExamScoreList from "@/components/bussiness/exam-score-list";
export default { export default {
props: {
rankList: {
type: Array,
default: () => [
{
subId: 10000,
subName: '福建省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '上海市',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '浙江省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '江苏省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '安徽省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
}
]
}
},
data() { data() {
return { return {
listTitle: '共120条数据', title: "共0条数据",
needRightBtn: false, needRightBtn: false,
// projectId: '', token: "",
// token: '' // 查询概况数据
queryGDParams: {
beginDate: "",
endDate: "",
hospitalIdList: [],
originalFlag: 1, // 默认值0：0不查看原始数据
projectId: 256,
regionId: "",
timeFlag: 0,
pageCfg: {
type: 1,
pageNo: 0,
pageSize: 0
}
},
dataList: []
}; };
}, },
components: { components: {
...@@ -76,24 +45,47 @@ export default { ...@@ -76,24 +45,47 @@ export default {
CommonNoMore, CommonNoMore,
ExamScoreList ExamScoreList
}, },
computed: {
...mapGetters({
userToken: 'userToken',
projectId: 'projectId'
}),
},
created() { created() {
if(process.client) { if (process.client) {
// let projectId = this.$route.query.projectId; if(this.$route && this.$route.query) {
// this.projectId = (this.$route && this.$route.query && this.$route.query.projectId) || ""; let cQuery = this.$route.query
// this.token = (this.$router && this.$route.query && this.$route.query.token) || ""; // this.token = cQuery.token || '';
console.log('rank-edu', this.projectId, this.userToken) this.queryGDParams.projectId = cQuery.projectId || '';
this.queryGDParams.regionId = cQuery.regionId || '';
this.queryGDParams.hospitalIdList = (cQuery.hospitalIdList || '').split(',') || [];
cookies.set("token", cQuery.token || '');
this.getGeneralExam(this.queryGDParams);
}
// this.token = (this.$route && this.$route.query && this.$route.query.token) || '';
// this.projectId = (this.$route && this.$route.query && this.$route.query.projectId) || 256;
// this.regionId = (this.$route && this.$route.query && this.$route.query.regionId) || '000';
// this.hospitalIdList = (this.$route && this.$route.query && this.$route.query.hospitalIdList) || '';
// this.queryGDParams.projectId = this.projectId;
// this.queryGDParams.regionId = this.regionId;
// this.queryGDParams.hospitalIdList = (this.hospitalIdList && this.hospitalIdList.split(',')) || [];
// cookies.set("token", this.token);
// this.getGeneralExam(this.queryGDParams);
} }
}, },
mounted() {
},
methods: {
// 考试分析
async getGeneralExam(queryData) {
await getGeneralExam(queryData).then(res => {
if (res.code === "000000") {
this.dataList = res.data.examScoreList;
this.title = `共${this.dataList.length}条数据`
}
});
},
}
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.mt-10 { .mt-10 {
margin-top: 10px !important; margin-top: 10px !important;
} }
</style> </style>
\ No newline at end of file
pages/exam-times copy.vue 0 → 100644
浏览文件 @ 695eee7d
<template>
<section>
<CommonHeader title="完成项目考试次数情况"></CommonHeader>
<CommonTitleMini :title="title" :needRightBtn="needRightBtn"></CommonTitleMini>
<ExamTimesList></ExamTimesList>
<CommonNoMore class="mt-10"></CommonNoMore>
</section>
</template>
<script>
import { mapGetters } from "vuex";
import CommonHeader from "@/components/common/common-header";
import CommonTitleMini from "@/components/common/common-title-mini";
import CommonNoMore from "@/components/common/common-no-more";
import ExamTimesList from "@/components/bussiness/exam-times-list";
export default {
props: {
dataList: {
type: Array,
default: () => []
}
},
data() {
return {
title: '共120条数据',
needRightBtn: false,
};
},
components: {
CommonHeader,
CommonTitleMini,
CommonNoMore,
ExamTimesList
},
computed: {
...mapGetters({
examTimesList: 'examTimesList',
}),
},
mounted() {
this.title = `共${this.examTimesList.length}条数据`
},
};
</script>
<style lang="less" scoped>
.mt-10 {
margin-top: 10px !important;
}
</style>
\ No newline at end of file
pages/exam-times.vue
浏览文件 @ 695eee7d
<template> <template>
<section> <section>
<CommonHeader title="完成项目考试次数情况"></CommonHeader> <CommonHeader title="完成项目考试次数情况"></CommonHeader>
<CommonTitleMini :title="listTitle" :needRightBtn="needRightBtn"></CommonTitleMini> <CommonTitleMini :title="title" :needRightBtn="needRightBtn"></CommonTitleMini>
<ExamTimesList></ExamTimesList> <ExamScoreList :dataList="dataList"></ExamScoreList>
<CommonNoMore class="mt-10"></CommonNoMore> <CommonNoMore class="mt-10"></CommonNoMore>
</section> </section>
</template> </template>
<script> <script>
import { mapGetters } from "vuex"; const cookies = require("cookie-universal")();
import { getGeneralExam } from "@/service";
import CommonHeader from "@/components/common/common-header"; import CommonHeader from "@/components/common/common-header";
import CommonTitleMini from "@/components/common/common-title-mini"; import CommonTitleMini from "@/components/common/common-title-mini";
import CommonNoMore from "@/components/common/common-no-more"; import CommonNoMore from "@/components/common/common-no-more";
import ExamTimesList from "@/components/bussiness/exam-times-list"; import ExamScoreList from "@/components/bussiness/exam-score-list";
export default { export default {
props: {
rankList: {
type: Array,
default: () => [
{
subId: 10000,
subName: '福建省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '上海市',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '浙江省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '江苏省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '安徽省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
}
]
}
},
data() { data() {
return { return {
listTitle: '共120条数据', title: "共0条数据",
needRightBtn: false, needRightBtn: false,
// projectId: '', token: "",
// token: '' // 查询概况数据
queryGDParams: {
beginDate: "",
endDate: "",
hospitalIdList: [],
originalFlag: 1, // 默认值0：0不查看原始数据
projectId: 256,
regionId: "",
timeFlag: 0,
pageCfg: {
type: 1,
pageNo: 0,
pageSize: 0
}
},
dataList: []
}; };
}, },
components: { components: {
CommonHeader, CommonHeader,
CommonTitleMini, CommonTitleMini,
CommonNoMore, CommonNoMore,
ExamTimesList ExamScoreList
},
computed: {
...mapGetters({
userToken: 'userToken',
projectId: 'projectId'
}),
}, },
created() { created() {
if(process.client) { if (process.client) {
// let projectId = this.$route.query.projectId; if(this.$route && this.$route.query) {
// this.projectId = (this.$route && this.$route.query && this.$route.query.projectId) || ""; let cQuery = this.$route.query
// this.token = (this.$router && this.$route.query && this.$route.query.token) || ""; // this.token = cQuery.token || '';
console.log('rank-edu', this.projectId, this.userToken) this.queryGDParams.projectId = cQuery.projectId || '';
this.queryGDParams.regionId = cQuery.regionId || '';
this.queryGDParams.hospitalIdList = (cQuery.hospitalIdList || '').split(',') || [];
cookies.set("token", cQuery.token || '');
this.getGeneralExam(this.queryGDParams);
}
// this.token = (this.$router && this.$route.query && this.$route.query.token) || '';
// this.projectId = (this.$router && this.$route.query && this.$route.query.projectId) || 256;
// this.regionId = (this.$router && this.$route.query && this.$route.query.regionId) || '000';
// this.hospitalIdList = (this.$router && this.$route.query && this.$route.query.hospitalIdList) || '';
// this.queryGDParams.projectId = this.projectId;
// this.queryGDParams.regionId = this.regionId;
// this.queryGDParams.hospitalIdList = (this.hospitalIdList && this.hospitalIdList.split(',')) || [];
// cookies.set("token", this.token);
// this.getGeneralExam(this.queryGDParams);
} }
}, },
mounted() {
},
methods: {
// 考试分析
async getGeneralExam(queryData) {
await getGeneralExam(queryData).then(res => {
if (res.code === "000000") {
this.dataList = res.data.examScoreList;
this.title = `共${this.dataList.length}条数据`
}
});
},
}
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.mt-10 { .mt-10 {
margin-top: 10px !important; margin-top: 10px !important;
} }
</style> </style>
\ No newline at end of file
pages/index.vue
浏览文件 @ 695eee7d
此差异已折叠。
pages/klg-point.vue
浏览文件 @ 695eee7d
<template> <template>
<section> <section>
<CommonHeader title="培训前后知识点掌握情况"></CommonHeader> <CommonHeader title="培训前后知识点掌握情况"></CommonHeader>
<!-- <CommonTitleMini :title="listTitle" :needRightBtn="needRightBtn"></CommonTitleMini> -->
<TitleKLGPoint :title="listTitle"></TitleKLGPoint> <TitleKLGPoint :title="listTitle"></TitleKLGPoint>
<ChartColumnHorizontalTCLong class="mt-10"></ChartColumnHorizontalTCLong> <ChartColumnHorizontalTCLong :dataList="queryGDParams" class="mt-10"></ChartColumnHorizontalTCLong>
<CommonNoMore></CommonNoMore> <CommonNoMore></CommonNoMore>
</section> </section>
</template> </template>
<script> <script>
import { mapGetters } from "vuex"; const cookies = require("cookie-universal")();
import { getStudyEffect } from "@/service";
import CommonHeader from "@/components/common/common-header"; import CommonHeader from "@/components/common/common-header";
import CommonTitleMini from "@/components/common/common-title-mini";
import TitleKLGPoint from "@/components/bussiness/title-klg-point"; import TitleKLGPoint from "@/components/bussiness/title-klg-point";
import CommonNoMore from "@/components/common/common-no-more"; import CommonNoMore from "@/components/common/common-no-more";
import ChartColumnHorizontalTCLong from "@/components/bussiness/charts/chart-column-horizontal-tc-long"; import ChartColumnHorizontalTCLong from "@/components/bussiness/charts/chart-column-horizontal-tc-long";
...@@ -19,37 +18,92 @@ import ChartColumnHorizontalTCLong from "@/components/bussiness/charts/chart-col ...@@ -19,37 +18,92 @@ import ChartColumnHorizontalTCLong from "@/components/bussiness/charts/chart-col
export default { export default {
data() { data() {
return { return {
listTitle: '共10知识点', listTitle: "共10知识点",
needRightBtn: false, needRightBtn: false,
// projectId: '', // projectId: '',
// token: '' token: '',
// // 查询概况数据
// queryGDParams: {
// beginDate: "",
// endDate: "",
// hospitalIdList: [],
// originalFlag: 1, // 默认值0：0不查看原始数据
// projectId: 256,
// regionId: "",
// timeFlag: 0,
// pageCfg: {
// type: 1,
// pageNo: 0,
// pageSize: 0
// }
// },
// 查询概况数据
queryGDParams: {
beginDate: "",
endDate: "",
hospitalIdList: [],
originalFlag: 1, // 默认值0：0不查看原始数据
projectId: 256,
regionId: "",
timeFlag: 0,
pageNo: 0,
pageSize: 0,
pageCfg: {
type: 1,
pageNo: 0,
pageSize: 0
}
},
knowledgeEffectList: []
}; };
}, },
components: { components: {
CommonHeader, CommonHeader,
CommonTitleMini,
TitleKLGPoint, TitleKLGPoint,
CommonNoMore, CommonNoMore,
ChartColumnHorizontalTCLong ChartColumnHorizontalTCLong
}, },
computed: {
...mapGetters({
userToken: 'userToken',
projectId: 'projectId'
}),
},
created() { created() {
if(process.client) { if (process.client) {
// let projectId = this.$route.query.projectId; if (this.$route && this.$route.query) {
// this.projectId = (this.$route && this.$route.query && this.$route.query.projectId) || ""; let cQuery = this.$route.query;
// this.token = (this.$router && this.$route.query && this.$route.query.token) || ""; let hospitalIdList = cQuery.hospitalIdList || ''
console.log('rank-edu', this.projectId, this.userToken) // this.token = cQuery.token || '';
this.queryGDParams.projectId = cQuery.projectId || "";
this.queryGDParams.regionId = cQuery.regionId || "";
this.queryGDParams.hospitalIdList = hospitalIdList && hospitalIdList.split(',') || [];
cookies.set("token", cQuery.token || "");
this.getStudyEffect(this.queryGDParams);
}
// this.token = (this.$route && this.$route.query && this.$route.query.token) || '';
// this.projectId = (this.$route && this.$route.query && this.$route.query.projectId) || 256;
// this.regionId = (this.$route && this.$route.query && this.$route.query.regionId) || '000';
// this.hospitalIdList = (this.$route && this.$route.query && this.$route.query.hospitalIdList) || '';
// this.queryGDParams.projectId = this.projectId;
// this.queryGDParams.regionId = this.regionId;
// this.queryGDParams.hospitalIdList = (this.hospitalIdList && this.hospitalIdList.split(',')) || [];
// cookies.set("token", this.token);
// this.getGeneralExam(this.queryGDParams);
} }
}, },
methods: {
// 学习效果分析
async getStudyEffect(params) {
await getStudyEffect(params).then(res => {
if (res.code === "000000") {
this.knowledgeEffectList = res.data.knowledgeEffectList;
console.log('^^^^^^^^^', this.knowledgeEffectList);
// this.effectCardList[0].count = (res.data.beforeRate * 100).toFixed(0);
// this.effectCardList[1].count = (res.data.afterRate * 100).toFixed(0);
}
});
}
}
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.mt-10 { .mt-10 {
margin-top: 2px !important; margin-top: 2px !important;
} }
</style> </style>
\ No newline at end of file
plugins/vue-inject.js
浏览文件 @ 695eee7d
...@@ -2,9 +2,13 @@ import Vue from 'vue' ...@@ -2,9 +2,13 @@ import Vue from 'vue'
import rocNative from '@/utils/jsbridge' import rocNative from '@/utils/jsbridge'
import echarts from 'echarts' import echarts from 'echarts'
import { DropdownMenu, DropdownItem } from 'vant'; import { DropdownMenu, DropdownItem } from 'vant';
Vue.use(DropdownMenu).use(DropdownItem);
// import picaArea from 'pica-area' // import picaArea from 'pica-area'
// Vue.use(picaArea) // Vue.use(picaArea)
import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
let vConsole = new VConsole() // 初始化
Vue.use(DropdownMenu).use(DropdownItem);
Vue.prototype.$echarts = echarts Vue.prototype.$echarts = echarts
Vue.prototype.$rocNative = new rocNative(); Vue.prototype.$rocNative = new rocNative();
\ No newline at end of file
service/api.js
浏览文件 @ 695eee7d
...@@ -19,7 +19,6 @@ Axios.interceptors.request.use( ...@@ -19,7 +19,6 @@ Axios.interceptors.request.use(
const method = config.method.toLocaleLowerCase(); const method = config.method.toLocaleLowerCase();
if (method === 'post' || method === 'put' || method === 'delete') {} if (method === 'post' || method === 'put' || method === 'delete') {}
if (config.withCredentials) { if (config.withCredentials) {
// config.headers.token = 'C284B868425D494386EAEF6C9AE99937';
// config.headers.token = '3EB9111164E84A45B5B00428D52BC966'; // config.headers.token = '3EB9111164E84A45B5B00428D52BC966';
config.headers.token = cookies.get('token') || 'C284B868425D494386EAEF6C9AE99937'; config.headers.token = cookies.get('token') || 'C284B868425D494386EAEF6C9AE99937';
} }
......
service/index.js
浏览文件 @ 695eee7d
...@@ -82,7 +82,7 @@ export const getGeneralData = async data => { ...@@ -82,7 +82,7 @@ export const getGeneralData = async data => {
}; };
/** /**
* 根据地区获取机构列表 * 根据地区查询机构
*/ */
export const getHospitalsByRegionId = async params => { export const getHospitalsByRegionId = async params => {
return request({ return request({
...@@ -105,3 +105,102 @@ export const getUserAnalysis = async data => { ...@@ -105,3 +105,102 @@ export const getUserAnalysis = async data => {
url: `stats/report/userAnalysis` url: `stats/report/userAnalysis`
}); });
}; };
/**
* 根据地区查询地区下是否有机构
*/
export const getHospitalsCNT = async params => {
return request({
method: 'get',
params: params,
withCredentials: true,
url: `stats/region/hospitals/cnt`
});
};
/**
* 总体情况-选择机构下人员情况
*/
export const getGeneralPersonal = async data => {
return request({
method: 'post',
data: data,
withCredentials: true,
url: `stats/report/generalPersonal/${data.pageCfg.type}/${data.pageCfg.pageNo}/${data.pageCfg.pageSize}`
});
};
/**
* 总体情况-课程分析接口
*/
export const getGeneralCourse = async data => {
return request({
method: 'post',
data: data,
withCredentials: true,
url: `stats/report/course`
// url: `stats/report/course/0/0`
});
};
/**
* 总体情况-考试分析接口
*/
export const getGeneralExam = async data => {
return request({
method: 'post',
data: data,
withCredentials: true,
url: `stats/report/exam`
});
};
/**
* 总体情况-考试分析考试列表
*/
export const getGeneralExamList = async data => {
return request({
method: 'post',
data: data,
withCredentials: true,
url: `stats/report/exam/list`
});
};
/**
* 总体情况-考试分析接口（单个机构）
*/
export const getGeneralExamSingle = async params => {
return request({
method: 'get',
params: params,
withCredentials: true,
url: `stats/report/exam/${params.projectId}/${params.hospitalId}`
});
};
/**
* 查询用户信息和权限
*/
export const getProjectInfo = async params => {
return request({
method: 'get',
params: params,
withCredentials: true,
url: `stats/region/info`
});
};
/**
* 学习效果分析
*/
export const getStudyEffect = async data => {
return request({
method: 'post',
data: data,
withCredentials: true,
url: `stats/report/studyEffect`
});
};
\ No newline at end of file
store/index.js
浏览文件 @ 695eee7d
...@@ -5,52 +5,66 @@ export const state = () => ({ ...@@ -5,52 +5,66 @@ export const state = () => ({
userToken: '', userToken: '',
userMobile: '', userMobile: '',
provinceList: [], provinceList: [],
orgList: [] orgList: [],
examTimesList: [],
examScoreList: [],
}) })
export const getters = { export const getters = {
projectId(state) { projectId(state) {
return state.projectId return state.projectId;
}, },
regionId(state) { regionId(state) {
return state.regionId return state.regionId;
}, },
regionDegree(state) { regionDegree(state) {
return state.regionDegree return state.regionDegree;
}, },
userToken(state) { userToken(state) {
return state.userToken return state.userToken;
}, },
userMobile(state) { userMobile(state) {
return state.userMobile return state.userMobile;
}, },
provinceList(state) { provinceList(state) {
return state.provinceList return state.provinceList;
}, },
orgList(state) { orgList(state) {
return state.orgList return state.orgList;
}, },
examTimesList(state) {
return state.examTimesList;
},
examScoreList(state) {
return state.examScoreList;
},
} }
export const mutations = { export const mutations = {
SET_PROJECT_ID(state, projectId) { SET_PROJECT_ID(state, projectId) {
state.projectId = projectId state.projectId = projectId;
}, },
SET_REGION_ID(state, regionId) { SET_REGION_ID(state, regionId) {
state.regionId = regionId state.regionId = regionId;
}, },
SET_REGION_DEGREE(state, regionDegree) { SET_REGION_DEGREE(state, regionDegree) {
state.regionDegree = regionDegree state.regionDegree = regionDegree;
}, },
SET_USER_TOKEN(state, userToken) { SET_USER_TOKEN(state, userToken) {
state.userToken = userToken state.userToken = userToken;
}, },
SET_USER_MOBILE(state, userMobile) { SET_USER_MOBILE(state, userMobile) {
state.userMobile = userMobile state.userMobile = userMobile;
}, },
SET_PROVINCE_LIST(state, provinceList) { SET_PROVINCE_LIST(state, provinceList) {
state.provinceList = provinceList state.provinceList = provinceList;
}, },
SET_ORG_LIST(state, orgList) { SET_ORG_LIST(state, orgList) {
state.orgList = orgList state.orgList = orgList;
},
SET_EXAM_TIMES_LIST(state, examTimesList) {
state.examTimesList = examTimesList;
},
SET_EXAM_SCORCE_LIST(state, examScoreList) {
state.examScoreList = examScoreList;
}, },
} }
...@@ -76,4 +90,10 @@ export const actions = { ...@@ -76,4 +90,10 @@ export const actions = {
setOrgList({ commit }, orgList) { setOrgList({ commit }, orgList) {
commit('SET_ORG_LIST', orgList); commit('SET_ORG_LIST', orgList);
}, },
setExamTimesList({ commit }, examTimesList) {
commit('SET_EXAM_TIMES_LIST', examTimesList);
},
setExamScoreList({ commit }, examScoreList) {
commit('SET_EXAM_SCORCE_LIST', examScoreList);
},
} }
\ No newline at end of file
utils/enumerate.js
浏览文件 @ 695eee7d
...@@ -8,7 +8,8 @@ export const BASE_URL = { ...@@ -8,7 +8,8 @@ export const BASE_URL = {
}; };
export const SHARE_URL = { export const SHARE_URL = {
dev: 'https://dev-phome.yunqueyi.com', // dev: 'https://dev-phome.yunqueyi.com',
dev: 'http://10.177.11.247:4001',
test: 'https://test1-phome.yunqueyi.com', test: 'https://test1-phome.yunqueyi.com',
uat: 'https://uat-phome.yunqueyi.com', uat: 'https://uat-phome.yunqueyi.com',
prod: 'https://phome.yunqueyi.com', prod: 'https://phome.yunqueyi.com',
......
utils/jsbridge copy.js
浏览文件 @ 695eee7d
...@@ -17,7 +17,7 @@ export const JsBridgeOptions = { ...@@ -17,7 +17,7 @@ export const JsBridgeOptions = {
NATIVE_IOS_NAME: 'rociOS', NATIVE_IOS_NAME: 'rociOS',
NATIVE_ANDROID_NAME: '__rocAndroid', NATIVE_ANDROID_NAME: '__rocAndroid',
initMethodsWithCallBack: ['getToken', 'getUserInfo'], // value is string initMethodsWithCallBack: ['getToken', 'getUserInfo'], // value is string
initMethodsWithoutCallBack: ['getUserInfo','gotoLogin', 'appInit', 'goBack', 'shareWechat', 'showNativeToast', 'dispatchEventByModuleCode', 'appBuryingPointEntrust', 'webLoadSuccess'] // value is string initMethodsWithoutCallBack: ['gotoLogin', 'appInit', 'goBack', 'shareWechat', 'showNativeToast', 'dispatchEventByModuleCode', 'appBuryingPointEntrust', 'webLoadSuccess'] // value is string
} }
/** /**
......
utils/jsbridge.js
浏览文件 @ 695eee7d
...@@ -17,7 +17,7 @@ export const JsBridgeOptions = { ...@@ -17,7 +17,7 @@ export const JsBridgeOptions = {
NATIVE_IOS_NAME: 'rociOS', NATIVE_IOS_NAME: 'rociOS',
NATIVE_ANDROID_NAME: '__rocAndroid', NATIVE_ANDROID_NAME: '__rocAndroid',
initMethodsWithCallBack: ['getToken', 'getUserInfo'], // value is string initMethodsWithCallBack: ['getToken', 'getUserInfo'], // value is string
initMethodsWithoutCallBack: ['getUserInfo','gotoLogin', 'appInit', 'goBack', 'shareWechat', 'showNativeToast', 'dispatchEventByModuleCode', 'appBuryingPointEntrust', 'webLoadSuccess'] // value is string initMethodsWithoutCallBack: ['gotoLogin', 'appInit', 'goBack', 'shareWechat', 'showNativeToast', 'dispatchEventByModuleCode', 'appBuryingPointEntrust', 'webLoadSuccess'] // value is string
} }
/** /**
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或