Skip to content

P
pica.cloud.web-education-admin
提交 a22cb9e9 编写于 作者: zhentian.jia's avatar zhentian.jia
浏览文件
操作

数据总览api对接

上级 6c74e831
隐藏空白字符变更
内嵌 并排
正在显示 包含 144 行增加 和 106 行删除
src/utils/learning/chartData.js
浏览文件 @ a22cb9e9
......@@ -11,11 +11,11 @@ export function dustributeOption(legendData, seriesData) {
label: {
formatter: "{d}%"
},
color: ['#FF9A4B', '#39AF9A', '#FFB01B'],
color: ['#FF9A4B', '#FFBC3D', '#39AF9A', '#3BA0FF', '#5D7092'],
legend: {
orient: "horizontal",
top: "",
// left: "10%",
left: "0%",
data: legendData
},
series: [
......@@ -23,7 +23,7 @@ export function dustributeOption(legendData, seriesData) {
name: "",
type: "pie",
radius: "60%",
center: ["55%", "50%"],
center: ["50%", "50%"],
data: seriesData,
itemStyle: {
emphasis: {
......
src/utils/operation.js
浏览文件 @ a22cb9e9
......@@ -379,7 +379,7 @@ export function getPicOption(title, legendData, colorData, seriesData) {
},
legend: {
orient: "vertical",
top: "3%",
top: "center",
right: "right",
data: legendData
},
......@@ -396,7 +396,7 @@ export function getPicOption(title, legendData, colorData, seriesData) {
name: "",
type: "pie",
radius: "55%",
center: ["50%", "55%"],
center: ["40%", "55%"],
data: seriesData,
}
]
......@@ -406,12 +406,17 @@ export function getPicOption(title, legendData, colorData, seriesData) {
export function getBarOption(xAxisData, seriesData) {
let option = {
title: {
text: "用户年龄发布",
x: "center",
top: "3%",
text: "人员年龄分布",
x: "left",
left: '20px',
top: "20px",
},
color: ['#5B8FF9'],
backgroundColor: '#FFFFFF',
tooltip: {
trigger: 'item',
formatter: "{b} : {c} "
},
color: ['#3398DB'],
backgroundColor: '#F3F3F3',
grid: {
left: '3%',
right: '4%',
......@@ -424,22 +429,31 @@ export function getBarOption(xAxisData, seriesData) {
data: xAxisData,
axisLabel: {
interval: 0
}
// axisTick: {
// alignWithLabel: true
// }
},
axisTick: { // 隐藏刻度
show: false
},
axisLine: { //隐藏轴线
show: false
},
}
],
yAxis: [
{
type: 'value'
type: 'value',
axisLine: { //隐藏轴线
show: false
},
axisTick: { // 隐藏刻度
show: false
},
}
],
series: [
{
name: '',
type: 'bar',
barWidth: 30,
barWidth: 18,
data: seriesData,
}
]
......
src/views/learning/item-crowd-analysis.vue
浏览文件 @ a22cb9e9
......@@ -17,10 +17,10 @@
<div class="title">用户性别分布</div>
<div class="sex">
<div class="sex-item" v-for="(item , index) in sexData" :key="index">
<img class="sex-img" v-bind:src="item.src" />
<p class="sex-type">{{ item.type }}</p>
<p></p>
<!-- <img class="sex-img" v-bind:src="item.src" /> -->
<el-progress class="sex-img" :color="item.color" :stroke-width=12 type="circle" :percentage="item.rate"></el-progress>
<p class="sex-num">{{ item.num }}</p>
<p class="sex-type">{{ item.type }}</p>
</div>
</div>
</div>
......@@ -125,9 +125,9 @@ export default {
this.crowdData = res.data;
setTimeout(function() {
vm.educationDivision();
// vm.jobDivision();
// vm.getSexData();
// vm.ageDivision();
vm.jobDivision();
vm.getSexData();
vm.ageDivision();
},20);
} else {
vm.$message(res.message);
......@@ -150,36 +150,34 @@ export default {
//用户性别分布
getSexData() {
let sexList = this.crowdData.sexList;
// if(sexList.length <3) {
// this.sexData = [];
// return;
// }
this.sexData = [
let sexData = [
{
src: require("../../assets/image/man.png"),
color: '#1890FF',
type: "男性",
num: 0
num: 0,
rate: 0,
},
{
src: require("../../assets/image/weman.png"),
color: '#FB5B52',
type: "女性",
num: 0
num: 0,
rate: 0,
},
{
src: require("../../assets/image/question.png"),
color: '#5D7092',
type: "未完善信息",
num: 0
num: 0,
rate: 0,
}
];
for(let i=0;i<sexList.length;i++) {
if(sexList[i].name == "男") {
this.sexData[0].num = sexList[i].value;
} else if(sexList[i].name == "女") {
this.sexData[1].num = sexList[i].value;
} else {
this.sexData[2].num = sexList[i].value;
}
let sum = 0;
for(let i = 0 ; i<sexList.length; i++) {
sum += sexList[i].value;
sexData[i].num = sexList[i].value
}
sexData[0].rate = Math.floor(sexList[0].value / sum *10000) / 100;
sexData[1].rate = Math.floor(sexList[1].value / sum *10000) / 100;
vm.sexData = sexData;
},
educationDivision(data) {
let myChart = echarts.init(this.$refs.education);
......@@ -204,16 +202,16 @@ export default {
},
jobDivision(data) {
let myChart2 = echarts.init(this.$refs.job);
let jobTitle = operationData.removeZero(this.crowdData.jobTitle);
let titleList = this.crowdData.titleList;
let legendData = [];
let seriesData = [];
let colorData = ["#FF9F7F", "#008000", "#E062AE", "#37A2DA", "#0050DC", "#67E0E3", "#8A2BE2"];
for (let i = 0; i < jobTitle.length; i++) {
legendData[i] = jobTitle[i].name;
let colorData = ["#3BA0FF", "#366BCB", "#39AF9A", "#FFBC3D", "#FFBC3D", "#67E0E3", "#8A2BE2"];
for (let i = 0; i < titleList.length; i++) {
legendData[i] = titleList[i].name;
seriesData[i] = titleList[i];
}
seriesData = jobTitle;
let option = operationData.getPicOption(
"用户职务分布",
"人员职务分布",
legendData,
colorData,
seriesData
......@@ -281,23 +279,22 @@ export default {
position: relative;
margin: 20px auto 0 auto;
width: 1124px;
// background: #F0F2F5;
overflow-x: hidden;
.item {
position: relative;
float: left;
margin-top: 20px;
margin-right: 20px;
padding: 0;
// width: 48%;
width: 552px;
height: 360px;
border: 1px solid #dedede;
background: #ffffff;
// border: 1px solid #dedede;
.title {
position: relative;
margin: 15px auto 10px auto;
margin-top: 20px;
margin-left: 20px;
font-size: 18px;
text-align: center;
font-weight: bold;
}
.sex {
......@@ -306,23 +303,27 @@ export default {
left: 0;
.sex-item {
float: left;
height: 360px;
width: 33.3%;
width: 33.33%;
.sex-img {
margin: 0 auto;
position: relative;
left: 10%;
// width: 80%;
width: 60%;
margin-left: 10%;
left: 16%;
height: 125px;
width: 125px;
}
.sex-type {
.sex-num {
margin-top: 18px;
height:24px;
line-height:24px;
font-size:24px;
font-weight:600;
text-align: center;
}
.sex-num {
margin-top: 40px;
font-size: 30px;
font-weight: bold;
.sex-type {
margin-top: 8px;
height:14px;
font-size:14px;
color: #999999;
text-align: center;
}
}
......
src/views/learning/item-data-all.vue
浏览文件 @ a22cb9e9
......@@ -65,6 +65,7 @@
</div>
</div>
</div>
<div class="spacing"></div>
<div class="chart-title">证书级别按学历发布情况</div>
<div class="chart-recordChart">
<div class="recordChart" id="recordChart" ref="recordChart"></div>
......@@ -249,7 +250,7 @@ export default {
if (res.code == "000000") {
vm.initCard(res.data.percentData);
vm.setDistributeChart(res.data.certData);
vm.setRecordChart();
vm.setRecordChart(res.data.eduData);
vm.setDurationChart();
vm.setCertificateChart();
}
......@@ -341,8 +342,8 @@ export default {
setInitWidth() {
},
setDistributeChart(data) {
let keyName = ['未获证人数','获优秀人数','获良好人数','获及格人数','获不及格人数'];
let keyName2 = ['未获证人数占比','获优秀人数占比','获良好人数占比','获及格人数占比','获不及格人数占比'];
let keyName = ['未获证人数','优秀人数','良好人数','及格人数','不及格人数'];
let keyName2 = ['未获证人数占比','优秀人数占比','良好人数占比','及格人数占比','不及格人数占比'];
let distributeList = [];
let legendData = [];
let seriesData = [];
......@@ -367,33 +368,42 @@ export default {
vm.echartsData.chart0 = myChart;
vm.updateResize();
},
setRecordChart() {
vm.recordList = [
setRecordChart(data) {
let recordList = [
{
label: '博士',
value: 50,
value: 0,
},
{
label: '硕士',
value: 90,
value: 0,
},
{
label: '本科',
value: 700,
value: 0,
},
{
label: '大专',
value: 20428,
value: 0,
},
{
label: '中专及以下',
value: 34234,
value: 0,
},
{
label: '其他',
value: 2345,
value: 0,
},
]
let sum = [];
for(let i = 0; i<data.length; i++) {
console.log('data[i]',data[i].certList.length);
let certList = data[i].certList;
for(let j = 0; j < certList.length; i++) {
recordList[j].value += certList[j].value;
}
}
vm.recordList = recordList;
let myChart = echarts.init(this.$refs.recordChart);
let option = chartData.recordOption();
......@@ -463,14 +473,15 @@ export default {
// padding: 10px;
.box-list {
position: relative;
height: 110px;
padding: 30px 30px 0 30px;
height: 136px;
.box-card {
position: relative;
background-color: #e3efed;
color: #449284;
width: 32%;
margin-right: 2%;
height: 110px;
height: 106px;
float: left;
.notice {
position: absolute;
......@@ -490,7 +501,7 @@ export default {
position: relative;
float: left;
width: 33%;
height: 110px;
height: 106px;
text-align: left;
padding: 23px 0 0 20px;
.title {
......@@ -519,7 +530,7 @@ export default {
position: relative;
float: left;
width: 64%;
height: 110px;
height: 106px;
text-align: left;
font-size: 14px;
padding: 23px 0 0 29px;
......@@ -550,6 +561,7 @@ export default {
position: relative;
width: 100%;
margin-top: 20px;
padding: 0 30px 0 30px;
.change-date {
position: relative;
float: right;
......@@ -561,12 +573,12 @@ export default {
}
.chart-title {
position: relative;
margin-top: 17px;
width: 100%;
height: 60px;
margin-top: 30px;
margin-left: 30px;
height: 25px;
font-size:18px;
font-weight:600;
line-height: 60px;
line-height: 25px;
color: #000000;
}
.chart {
......@@ -578,24 +590,26 @@ export default {
.chart-distributeChart {
position: relative;
margin: 20px auto 0 auto;
height: 350px;
// height: 320px;
width: 100%;
overflow-x: hidden;
.distributeChart {
position: relative;
float: left;
// float: left;
margin: 0 auto;
// width: 70%;
width: 600px;
height: 350px;
width: 618px;
height: 320px;
}
.data-text {
position: relative;
float: left;
position: absolute;
top: 0;
right: 0;
width: 30%;
height: 350px;
height: 320px;
.content-text {
position: relative;
margin-top: 135px;
margin-top: 78px;
margin-left: 35%;
text-align: left;
p {
......@@ -612,25 +626,24 @@ export default {
.chart-recordChart {
position: relative;
margin: 20px auto 0 auto;
height: 350px;
width: 100%;
// height: 350px;
min-width: 1064px;
overflow-x: hidden;
.recordChart {
position: relative;
float: left;
// width: 83.5%;
width: 700px;
height: 350px;
width: 910px;
height: 416px;
}
.data-text {
position: relative;
float: left;
width: 16%;
height: 350px;
width: 120px;
height: 416px;
.content-text {
position: relative;
margin-top: 100px;
margin-left: 16%;
text-align: left;
p {
margin-top: 20px;
......
src/views/learning/item-list.vue
浏览文件 @ a22cb9e9
......@@ -79,18 +79,17 @@
<el-checkbox size="small" v-model="formInline.checked">查看原始数据</el-checkbox>
</el-form-item>
<div class="form-button">
<el-button @click="search()" type="primary">查询</el-button>
<el-button @click="resetForm()">重置</el-button>
<el-button size="small" @click="search()" type="primary">查询</el-button>
<el-button size="small" @click="resetForm()">重置</el-button>
</div>
</el-form>
<div class="tabs-button"></div>
<div class="button-group">
<el-button v-if="roleType == 'L1' || roleType == 'L2'" type="default" size="small" @click="changeDate">数据修改</el-button>
<!-- <el-button type="default" size="small" @click="update" v-else>修改范围</el-button> -->
<el-button type="default" size="small" :disabled="exportStatus" @click="exportPDF">导出PDF</el-button>
<el-button type="default" size="small" :disabled="exportStatus" @click="exportExcel">导出明细</el-button>
</div>
<!-- <div class="item-tab"></div> -->
<div class="item-tab"></div>
<el-tabs class="item-list-tabs" ref="tabs" id="item-list-tabs" v-model="activeName" @tab-click="handleClick" :before-leave="beforeLeave">
<el-tab-pane label="数据总览" name="zero" >
<data-all
......@@ -244,7 +243,7 @@ export default {
// organizationData: "",
},
tags: [],
activeName: "second",
activeName: "zero",
organizationNum: 0,
dialogVisible: false,
dialogUpdate: false,
......@@ -655,6 +654,7 @@ export default {
<style lang="scss">
.item-list-wrap {
.component-content {
// position: relative;
// background: #fff;
padding: 10px;
.header-title {
......@@ -664,12 +664,13 @@ export default {
border-bottom: 1px solid #efefef;
}
.item-form {
position: relative;
margin-bottom: 20px;
// margin-bottom: 20px;
padding: 10px;
background: #fff;
width:100%;
border-radius: 4px;
width: 98.3%;
border-radius: 4px 4px 0 0;
.form-button {
position: absolute;
width: 45%;
......@@ -685,6 +686,7 @@ export default {
// right: 100px;
float: right;
margin-right: 20px;
z-index: 999;
}
.choose {
font-size: 12px;
......@@ -700,7 +702,12 @@ export default {
color: #409eff;
}
.el-tabs__header {
width: 65%;
width: 100%;
background: #fff;
margin-bottom: 20px;
.el-tabs__nav-scroll {
margin-left: 30px;
}
}
.el-tabs__nav-wrap::after {
height: 0px;
......@@ -712,6 +719,9 @@ export default {
margin-right: 20px;
}
}
.el-tabs__active-bar {
background-color: #449284;
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或