提交 ed9820d2 authored 作者: Yroc's avatar Yroc

后端优化

上级 7421b204
<!-- --> <script>
/**
* @Author: AnthonyD
* @Date: 2023-03-28 10:34:24
* @Last Modified by: AnthonyD
* @Last Modified time: 2023-04-15 18:02:16
*/
</script><!-- -->
<template> <template>
<div class="chart_container" :id="chart_id"></div> <div class="chart_container" :id="chart_id"></div>
</template> </template>
<script> <script>
export default { export default {
props: ['chart_data', 'chart_id'], props: ['chart_data', 'chart_id'],
data() { data() {
return { return {};
};
}, },
components: {}, components: {},
computed: {}, computed: {},
created() { created() {},
},
mounted() { mounted() {
this.initChart(); this.initChart();
// console.log('@@@@@@@@@@@');
// console.log(this.chart_data);
}, },
methods: { methods: {
initChart() { initChart() {
let colors = ['#bcdfdc', '#47afa0', '#cd9f50'];
let series = this.changData(this.chart_data); let series = this.changData(this.chart_data);
let legend_data = this.chart_data.labers.map(item => { // console.log(series);
return item.key let legend_data = this.chart_data.labers.map((item) => {
}) return item.key;
});
let _that = this;
let dom = document.getElementById(`${this.chart_id}`); let dom = document.getElementById(`${this.chart_id}`);
let myChart = this.$echarts.init(dom, null, { let myChart = this.$echarts.init(dom, null, {
renderer: 'canvas', renderer: 'canvas',
useDirtyRect: false useDirtyRect: false,
});
let labers = this.chart_data.labers.map((item) => {
return item.label;
}); });
let option; let option;
option = { option = {
color: ['#cd9f50', '#47afa0', '#bcdfdc'], color: colors,
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow',
} },
}, },
legend: { legend: {
// data: ['Forest', 'Steppe', 'Desert', 'Wetland'] /* formatter: (name) => {
// data: legend_data, let objs = this.chart_data.labers.filter((itme) => {
formatter: (name) => {
let objs = this.chart_data.labers.filter(itme => {
return itme.key == name; return itme.key == name;
}) });
return objs[0].label return objs[0].label;
} }, */
data: labers,
}, },
toolbox: { toolbox: {
show: false, show: false,
...@@ -62,64 +73,30 @@ export default { ...@@ -62,64 +73,30 @@ export default {
dataView: { show: true, readOnly: false }, dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack'] }, magicType: { show: true, type: ['line', 'bar', 'stack'] },
restore: { show: true }, restore: { show: true },
saveAsImage: { show: true } saveAsImage: { show: true },
} },
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
axisTick: { show: false }, axisTick: { show: false },
// data: ['2012', '2013', '2014', '2015', '2016'] // data: ['2012', '2013', '2014', '2015', '2016']
data: this.chart_data.keys data: this.chart_data.keys,
} interval: 0,
axisLabel: {
show: true,
rotate: -90,
},
},
], ],
yAxis: [ yAxis: [
{ {
type: 'value' type: 'value',
} },
], ],
// series: [
// {
// name: 'Forest',
// type: 'bar',
// barGap: 0,
// // label: labelOption,
// emphasis: {
// focus: 'series'
// },
// data: [320, 332, 301, 334, 390]
// },
// {
// name: 'Steppe',
// type: 'bar',
// // label: labelOption,
// emphasis: {
// focus: 'series'
// },
// data: [220, 182, 191, 234, 290]
// },
// {
// name: 'Desert',
// type: 'bar',
// // label: labelOption,
// emphasis: {
// focus: 'series'
// },
// data: [150, 232, 201, 154, 190]
// },
// {
// name: 'Wetland',
// type: 'bar',
// // label: labelOption,
// emphasis: {
// focus: 'series'
// },
// data: [98, 77, 101, 99, 40]
// }
// ]
series: series
};
series: series,
};
if (option && typeof option === 'object') { if (option && typeof option === 'object') {
myChart.setOption(option); myChart.setOption(option);
...@@ -132,24 +109,26 @@ export default { ...@@ -132,24 +109,26 @@ export default {
let list = []; let list = [];
data.labers.forEach((item, index) => { data.labers.forEach((item, index) => {
let obj = { let obj = {
name: item.key, itemStyle: {
normal: { label: { show: true, position: 'top' } },
},
name: item.label,
type: 'bar', type: 'bar',
barGap: 0, barGap: 0,
emphasis: { emphasis: {
focus: 'series' focus: 'series',
}, },
data: [] data: [],
} };
data.keys.forEach(element => { data.keys.forEach((element) => {
obj.data.push(data.raw_data[element][item.key]); obj.data.push(data.raw_data[element][item.key]);
}); });
list.push(obj) list.push(obj);
}); });
return list return list;
}, },
} },
} };
</script> </script>
<style scoped> <style scoped>
.chart_container { .chart_container {
......
...@@ -9,38 +9,132 @@ ...@@ -9,38 +9,132 @@
<div class="container_box"> <div class="container_box">
<table class="table_box"> <table class="table_box">
<tr> <tr>
<th v-for="(e, i) in labers" :key="i">{{ e.label }}</th> <th v-for="(e, i) in labers" :key="i" style="padding: 15px 10px">
{{ e.label
}}<i
class="el-icon-caret-bottom"
:style="
'color: ' +
(e.key == sort_field && sort_type == 'desc' ? '#038d6e' : '')
"
@click="sort(e.key, 'desc')"
></i
><i
class="el-icon-caret-top"
:style="
'color: ' +
(e.key == sort_field && sort_type == 'asc' ? '#038d6e' : '')
"
@click="sort(e.key, 'asc')"
></i>
</th>
</tr> </tr>
<tr v-for="(item, index) in table_data" :key="index"> <tr v-for="(item, index) in table_data" :key="index">
<td v-for="(e, i) in labers" :key="i"> <td v-for="(e, i) in labers" :key="i">
<div v-if="typeof item[e.key] === 'object'"> <div v-if="typeof item[e.key] === 'object'">
<el-popover placement="top-start" width="200" trigger="hover"> <!-- <el-popover placement="top-start" width="200" trigger="hover">
<div> <div>
<el-form label-width="80px"> <el-form label-width="80px">
<!-- <el-form-item label="正确数据: ">
<span v-for="(o, b) in item[e.key].exactness.value">{{ o
}},</span>
</el-form-item> -->
<el-form-item label="错误数据: "> <el-form-item label="错误数据: ">
<span v-for="(o, b) in item[e.key].wrong.value">{{ o }},</span> <span v-for="(o, b) in item[e.key].wrong.value" :key="b"
>{{ o }},</span
>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<el-button slot="reference" type="text" size="mini">{{ item[e.key].accuracy.value }}</el-button> <el-button slot="reference" type="text" size="mini">{{
</el-popover> item[e.key].accuracy.value
}}</el-button>
</el-popover> -->
<span slot="reference" type="text" size="mini">
{{ item[e.key] }}
</span>
</div> </div>
<el-popover
v-else-if="e.key === 'stability'"
placement="top-start"
width="100%"
trigger="hover"
>
<div
v-if="
Object.prototype.toString.call(item.conclusion_data) ===
'[object Array]'
"
>
学员答案:{{ item.conclusion_data.join(',') }}
</div>
<div v-else>
<el-table
:data="table_data[index].conclusion_table"
height="250"
border
style="width: 100%"
>
<el-table-column
prop="student_id"
sortable
label="学员信息"
width="180"
>
<template slot-scope="scope">
{{ scope.row.name }}({{ scope.row.student_id }})
</template>
</el-table-column>
<el-table-column
prop="conclusion"
sortable
label="稳定性"
width="180"
>
</el-table-column>
<el-table-column
label="学员答案"
sortable
prop="conclusion_data"
width="180"
>
<template slot-scope="scope">
{{ scope.row.conclusion_data.join(',') }}
</template>
</el-table-column>
</el-table>
</div>
<span slot="reference">{{ item[e.key] }}</span>
</el-popover>
<div v-else>{{ item[e.key] }}</div> <div v-else>{{ item[e.key] }}</div>
</td> </td>
</tr> </tr>
</table> </table>
<!-- <el-table :data="table_data" border style="width: 100%">
<el-table-column
v-for="(item, index) in labers"
:key="index"
:label="item.label"
:width="item.width"
>
<template slot="header">
<div>{{ item.label }}</div>
</template>
<template slot-scope="scope">
<div>{{ scope.row[item.key] }}</div>
</template>
</el-table-column>
</el-table> -->
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: ['table_data', 'labers'], props: ['table_data', 'labers', 'is_pover'],
data() { data() {
return { return {
sort_field: null,
sort_type: null,
}; };
}, },
...@@ -48,25 +142,66 @@ export default { ...@@ -48,25 +142,66 @@ export default {
computed: {}, computed: {},
created() { created() {
// console.log(this.table_data);
// console.log(this.labers);
}, },
mounted() { }, mounted() {},
methods: { methods: {
sort(col, type = 'desc') {
test(item) { this.sort_field = col;
console.log('判断对象'); this.sort_type = type;
console.log(item); if (type == 'asc') {
console.log(typeof item == 'object'); this.table_data.sort((a, b) => {
let a_n =
parseFloat(a[col]) != a[col] ? a[col].split('~')[0] : a[col];
let b_n =
parseFloat(b[col]) != b[col] ? b[col].split('~')[0] : b[col];
if (parseFloat(a_n) == a_n && parseFloat(b_n) == b_n) {
return a_n - b_n;
} else if (a_n < b_n) {
return -1;
} else if (a_n > b_n) {
return 1;
} else {
return 0;
}
}); //升序
} else {
this.table_data.sort((a, b) => {
let a_n =
parseFloat(a[col]) != a[col] ? a[col].split('~')[0] : a[col];
let b_n =
parseFloat(b[col]) != b[col] ? b[col].split('~')[0] : b[col];
if (parseFloat(a_n) == a_n && parseFloat(b_n) == b_n) {
return b_n - a_n;
} else if (b_n < a_n) {
return -1;
} else if (b_n > a_n) {
return 1;
} else {
return 0;
}
}); //降序
}
}, },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container_box { .container_box {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative;
}
.el-icon-caret-bottom {
position: absolute;
top: 20px;
}
.el-icon-caret-top {
position: absolute;
top: 13px;
} }
.table_box { .table_box {
...@@ -74,8 +209,8 @@ export default { ...@@ -74,8 +209,8 @@ export default {
// min-height: 100%; // min-height: 100%;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
border-top: 1px solid #E4E7ED; border-top: 1px solid #e4e7ed;
border-left: 1px solid #E4E7ED; border-left: 1px solid #e4e7ed;
border-collapse: collapse; border-collapse: collapse;
th, th,
...@@ -83,8 +218,8 @@ export default { ...@@ -83,8 +218,8 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 14px; font-size: 14px;
border-bottom: 1px solid #E4E7ED; border-bottom: 1px solid #e4e7ed;
border-right: 1px solid #E4E7ED; border-right: 1px solid #e4e7ed;
} }
th { th {
......
<!--
* @Author: czj
* @Date: 2023-03-21 10:14:46
* @Description:
* @FilePath: \AdministrationHome\src\components\AnalyseModule\components\table.vue
-->
<!-- -->
<template>
<div class="container_box">
<div>
<el-select
v-model="select_value"
style="width: 100%"
@change="selectChange"
>
<el-option v-for="(e, i) in select_list" :label="e" :value="e" :key="i">
</el-option>
</el-select>
</div>
<table class="table_box">
<tr>
<!-- #038d6e -->
<th v-for="(e, i) in labers" :key="i" style="padding: 15px 10px">
{{ e.label
}}<span
><i
class="el-icon-caret-bottom"
:style="
'color: ' +
(e.key == sort_field && sort_type == 'desc' ? '#038d6e' : '')
"
@click="sort(e.key, 'desc')"
></i
><i
class="el-icon-caret-top"
:style="
'color: ' +
(e.key == sort_field && sort_type == 'asc' ? '#038d6e' : '')
"
@click="sort(e.key, 'asc')"
></i
></span>
</th>
</tr>
<tr v-for="(item, index) in table_list" :key="index">
<td v-for="(e, i) in labers" :key="i">
<div>{{ item[e.key] }}</div>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
props: ['table_data', 'labers'],
data() {
return {
sort_field: null,
sort_type: null,
table_list: null,
select_list: [],
select_value: '',
};
},
components: {},
computed: {},
created() {
// console.log('是否加载');
// console.log(this.table_data);
// console.log(this.labers);
this.select_value = this.table_data.select_value;
this.select_list = [...this.table_data.topic];
this.table_list = this.table_data.list[this.table_data.topic[0]];
},
mounted() {},
methods: {
sort(col, type = 'desc') {
this.sort_field = col;
this.sort_type = type;
if (type == 'asc') {
this.table_list.sort((a, b) => {
let a_n =
parseFloat(a[col]) != a[col] ? a[col].split('~')[0] : a[col];
let b_n =
parseFloat(b[col]) != b[col] ? b[col].split('~')[0] : b[col];
if (parseFloat(a_n) == a_n && parseFloat(b_n) == b_n) {
return a_n - b_n;
} else if (a_n < b_n) {
return -1;
} else if (a_n > b_n) {
return 1;
} else {
return 0;
}
}); //升序
} else {
this.table_list.sort((a, b) => {
let a_n =
parseFloat(a[col]) != a[col] ? a[col].split('~')[0] : a[col];
let b_n =
parseFloat(b[col]) != b[col] ? b[col].split('~')[0] : b[col];
if (parseFloat(a_n) == a_n && parseFloat(b_n) == b_n) {
return b_n - a_n;
} else if (b_n < a_n) {
return -1;
} else if (b_n > a_n) {
return 1;
} else {
return 0;
}
}); //降序
}
},
//选择监听
selectChange(val) {
console.log('val');
console.log(val);
this.table_list = [...this.table_data.list[val]];
},
},
};
</script>
<style lang="scss" scoped>
.container_box {
width: 100%;
height: 100%;
position: relative;
}
.el-icon-caret-bottom {
position: absolute;
top: 56px;
}
.el-icon-caret-top {
position: absolute;
top: 49px;
}
.table_box {
width: 100%;
// min-height: 100%;
text-align: center;
font-size: 14px;
border-top: 1px solid #e4e7ed;
border-left: 1px solid #e4e7ed;
border-collapse: collapse;
th,
td {
margin: 0;
padding: 0;
font-size: 14px;
border-bottom: 1px solid #e4e7ed;
border-right: 1px solid #e4e7ed;
}
th {
padding: 15px 0;
color: #909399;
}
td {
padding: 5px 0;
color: #303133;
}
}
</style>
...@@ -7,6 +7,9 @@ ...@@ -7,6 +7,9 @@
<!-- --> <!-- -->
<template> <template>
<div class="container_box"> <div class="container_box">
<!-- <el-select v-model="">
<el-option></el-option>
</el-select> -->
<table class="table_box"> <table class="table_box">
<!-- <tr> <!-- <tr>
<th v-for="(e, i) in labers" :key="i">{{ e.label }}</th> <th v-for="(e, i) in labers" :key="i">{{ e.label }}</th>
...@@ -22,32 +25,38 @@ ...@@ -22,32 +25,38 @@
<script> <script>
export default { export default {
props: ['table_data',], props: ['table_data'],
data() { data() {
return { return {
sel: '',
}; };
}, },
components: {}, components: {},
computed: {}, computed: {},
created() { created() {},
mounted() {
// console.log(this.table_data);
}, },
mounted() { },
methods: { methods: {
//保留两位,四舍五入 //保留两位,四舍五入
keepTwoDecimal(num) { keepTwoDecimal(num) {
var result = parseFloat(num); if (num.includes(',')) {
if (isNaN(result)) { return num;
return false;
} else { } else {
result = Math.round(num * 100) / 100; var result = parseFloat(num);
return result; if (isNaN(result)) {
return false;
} else {
result = Math.round(num * 100) / 100;
return result;
}
} }
} },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container_box { .container_box {
...@@ -60,8 +69,8 @@ export default { ...@@ -60,8 +69,8 @@ export default {
min-height: 100%; min-height: 100%;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
border-top: 1px solid #E4E7ED; border-top: 1px solid #e4e7ed;
border-left: 1px solid #E4E7ED; border-left: 1px solid #e4e7ed;
border-collapse: collapse; border-collapse: collapse;
th, th,
...@@ -69,8 +78,8 @@ export default { ...@@ -69,8 +78,8 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 14px; font-size: 14px;
border-bottom: 1px solid #E4E7ED; border-bottom: 1px solid #e4e7ed;
border-right: 1px solid #E4E7ED; border-right: 1px solid #e4e7ed;
} }
th { th {
......
...@@ -9,31 +9,75 @@ ...@@ -9,31 +9,75 @@
<div class="container_box"> <div class="container_box">
<table class="table_box"> <table class="table_box">
<tr> <tr>
<th v-for="(e, i) in labers" :key="i">{{ e.label }}</th> <th v-for="(e, i) in labers" :key="i" style="padding: 15px 10px">
{{ e.label
}}<span
><i
class="el-icon-caret-bottom"
:style="
'color: ' +
(e.key == sort_field && sort_type == 'desc' ? '#038d6e' : '')
"
@click="sort(e.key, 'desc')"
></i
><i
class="el-icon-caret-top"
:style="
'color: ' +
(e.key == sort_field && sort_type == 'asc' ? '#038d6e' : '')
"
@click="sort(e.key, 'asc')"
></i
></span>
</th>
</tr> </tr>
<tr v-for="(item, index) in table_data" :key="index"> <tr v-for="(item, index) in table_data" :key="index">
<td v-for="(e, i) in labers" :key="i"> <td v-for="(e, i) in labers" :key="i">
<div v-if="e.key == 'distribute'"> <div v-if="e.key == 'distribute'">
<div v-if="item['distribute'].length > 3"> <div
<el-popover placement="right" title="标题" width="200" trigger="click"> v-if="
typeof item['distribute'] == 'object' &&
item['distribute'].length > 3
"
>
<el-popover
placement="right"
title="标题"
width="200"
trigger="click"
>
<div v-for="(h, key, j) in item['distribute']" :key="j"> <div v-for="(h, key, j) in item['distribute']" :key="j">
{{ key }}({{ item['distribute'][key] }}题) {{ key }}({{ item['distribute'][key] }}题)
</div> </div>
<el-button slot="reference" type="text" size="mini">...</el-button> <el-button slot="reference" type="text" size="mini"
>...</el-button
>
</el-popover> </el-popover>
</div> </div>
<div v-else> <div v-else-if="typeof item['distribute'] == 'object'">
<div v-for="(h, key, j) in item['distribute']" :key="j"> <div v-for="(h, key, j) in item['distribute']" :key="j">
{{ key }}({{ item['distribute'][key] }}题), {{ key }}({{ item['distribute'][key] }}题)
</div>
</div>
<div v-else>
<div>
{{ item['distribute'] }}
</div> </div>
</div> </div>
</div> </div>
<div v-else-if="Array.isArray(item[e.key])"> <div v-else-if="Array.isArray(item[e.key])">
<el-popover placement="right" width="200" trigger="click" v-if="item[e.key].length > 0"> <el-popover
placement="right"
width="200"
trigger="click"
v-if="item[e.key].length > 0"
>
<div v-for="(h, j) in item[e.key]" :key="j"> <div v-for="(h, j) in item[e.key]" :key="j">
{{ h }} {{ h }}
</div> </div>
<el-button slot="reference" type="text" size="mini">...</el-button> <el-button slot="reference" type="text" size="mini"
>...</el-button
>
</el-popover> </el-popover>
</div> </div>
<div v-else>{{ item[e.key] }}</div> <div v-else>{{ item[e.key] }}</div>
...@@ -48,23 +92,72 @@ export default { ...@@ -48,23 +92,72 @@ export default {
props: ['table_data', 'labers'], props: ['table_data', 'labers'],
data() { data() {
return { return {
sort_field: null,
sort_type: null,
}; };
}, },
components: {}, components: {},
computed: {}, computed: {},
created() {},
mounted() {},
mounted() { }, methods: {
sort(col, type = 'desc') {
methods: {} this.sort_field = col;
} this.sort_type = type;
if (type == 'asc') {
this.table_data.sort((a, b) => {
let a_n =
parseFloat(a[col]) != a[col] ? a[col].split('~')[0] : a[col];
let b_n =
parseFloat(b[col]) != b[col] ? b[col].split('~')[0] : b[col];
if (parseFloat(a_n) == a_n && parseFloat(b_n) == b_n) {
return a_n - b_n;
} else if (a_n < b_n) {
return -1;
} else if (a_n > b_n) {
return 1;
} else {
return 0;
}
}); //升序
} else {
this.table_data.sort((a, b) => {
let a_n =
parseFloat(a[col]) != a[col] ? a[col].split('~')[0] : a[col];
let b_n =
parseFloat(b[col]) != b[col] ? b[col].split('~')[0] : b[col];
if (parseFloat(a_n) == a_n && parseFloat(b_n) == b_n) {
return b_n - a_n;
} else if (b_n < a_n) {
return -1;
} else if (b_n > a_n) {
return 1;
} else {
return 0;
}
}); //降序
}
},
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container_box { .container_box {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative;
}
.el-icon-caret-bottom {
position: absolute;
top: 20px;
}
.el-icon-caret-top {
position: absolute;
top: 13px;
} }
.table_box { .table_box {
...@@ -72,8 +165,8 @@ export default { ...@@ -72,8 +165,8 @@ export default {
// min-height: 100%; // min-height: 100%;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
border-top: 1px solid #E4E7ED; border-top: 1px solid #e4e7ed;
border-left: 1px solid #E4E7ED; border-left: 1px solid #e4e7ed;
border-collapse: collapse; border-collapse: collapse;
th, th,
...@@ -81,8 +174,8 @@ export default { ...@@ -81,8 +174,8 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 14px; font-size: 14px;
border-bottom: 1px solid #E4E7ED; border-bottom: 1px solid #e4e7ed;
border-right: 1px solid #E4E7ED; border-right: 1px solid #e4e7ed;
} }
th { th {
......
...@@ -16,33 +16,64 @@ ...@@ -16,33 +16,64 @@
<div class="header_box"> <div class="header_box">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<div class="title_box" :title="original_data.title"> {{ original_data.title }}</div> <div class="title_box" :title="original_data.title">
{{ original_data.title }}
</div>
</el-col> </el-col>
<el-col :span="12" style="text-align: right;"> <el-col :span="12" style="text-align: right">
<el-checkbox v-if="original_data.is_show" v-model="original_data.is_show.value" @change="changeSelect">{{ <el-checkbox
original_data.is_show.value ? '显示' : '隐藏' v-if="original_data.is_show"
}}</el-checkbox> v-model="original_data.is_show.value"
@change="changeSelect"
>{{ original_data.is_show.value ? '显示' : '隐藏' }}</el-checkbox
>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="content_container" v-if="original_data.type == 'table'"> <div class="content_container" v-if="original_data.type == 'table'">
<Table :table_data="original_data.list" :labers="original_data.labers"></Table> <Table
v-if="original_data"
:table_data="original_data.list"
:labers="original_data.labers"
></Table>
</div>
<div class="content_container" v-if="original_data.type == 'select_table'">
<SelectTabe
v-if="original_data"
:table_data="original_data"
:labers="original_data.labers"
>
</SelectTabe>
</div> </div>
<div class="content_container" v-if="false"> <div class="content_container" v-if="false">
<line-chart :chart_data="original_data.data" :chart_id="original_data.chart_id"></line-chart> <line-chart
:chart_data="original_data.data"
:chart_id="original_data.chart_id"
></line-chart>
</div> </div>
<div class="content_container" v-if="original_data.type == 'bar'"> <div class="content_container" v-if="original_data.type == 'bar'">
<bar-chart <bar-chart
:chart_data="{ raw_data: original_data.raw_data, keys: original_data.keys, labers: original_data.labers }" :chart_data="{
:chart_id="original_data.chart_id"></bar-chart> raw_data: original_data.raw_data,
keys: original_data.keys,
labers: original_data.labers,
}"
:chart_id="original_data.chart_id"
></bar-chart>
</div> </div>
<div class="content_container" v-if="original_data.type == 'simple_table'"> <div class="content_container" v-if="original_data.type == 'simple_table'">
<simple-table :table_data="original_data"></simple-table> <simple-table :table_data="original_data"></simple-table>
</div> </div>
<!-- 眼光稳定性 --> <!-- 眼光稳定性 -->
<div class="content_container" v-if="original_data.type == 'eye_stability_table'"> <div
<eye-stability-table :table_data="original_data.list" :labers="original_data.labers"></eye-stability-table> class="content_container"
v-if="original_data.type == 'eye_stability_table'"
>
<eye-stability-table
:table_data="original_data.list"
:labers="original_data.labers"
></eye-stability-table>
</div> </div>
</div> </div>
</template> </template>
...@@ -53,31 +84,38 @@ import LineChart from './components/LineChart.vue'; ...@@ -53,31 +84,38 @@ import LineChart from './components/LineChart.vue';
import BarChart from './components/BarChart.vue'; import BarChart from './components/BarChart.vue';
import SimpleTable from './components/SimpleTable.vue'; import SimpleTable from './components/SimpleTable.vue';
import EyeStabilityTable from './components/EyeStabilityTable.vue'; import EyeStabilityTable from './components/EyeStabilityTable.vue';
import SelectTabe from './components/SelectTabe.vue';
export default { export default {
props: ['module_data'], props: ['module_data'],
data() { data() {
return { return {
original_data: {}, original_data: null,
}; };
}, },
components: { Table, LineChart, BarChart, SimpleTable, EyeStabilityTable }, components: {
Table,
LineChart,
BarChart,
SimpleTable,
EyeStabilityTable,
SelectTabe,
},
computed: {}, computed: {},
created() { created() {
this.original_data = { ...this.module_data }; this.original_data = { ...this.module_data };
console.log(this.original_data);
}, },
mounted() { mounted() {},
},
methods: { methods: {
//选择框监听 //选择框监听
changeSelect() { changeSelect() {
this.$emit('changeSelect', this.original_data.is_show); this.$emit('changeSelect', this.original_data.is_show);
}, },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.analyse_container { .analyse_container {
......
...@@ -10,16 +10,33 @@ ...@@ -10,16 +10,33 @@
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<div> <div>
<el-button type="text" icon="el-icon-arrow-left" size="mini" class="back_btn" @click="back">返回</el-button> <el-button
type="text"
icon="el-icon-arrow-left"
size="mini"
class="back_btn"
@click="back"
>返回</el-button
>
<h2 class="title_box"> <h2 class="title_box">
<div v-if="Array.isArray(info_data.title)"> <div v-if="Array.isArray(info_data.title)">
<span>{{ info_data.title[0] }}</span> <!-- <span>{{ info_data.title[0] }}</span> -->
<el-popover placement="bottom" title="多个标题" width="200" trigger="hover"> <el-popover placement="bottom" width="480" trigger="hover">
<div> <div>
<el-tag type="info" v-for="(item, index) in info_data.title" :key="index" <el-tag
style="margin-bottom: 10px;">{{ item }}</el-tag> type="info"
v-for="(item, index) in info_data.title"
:key="index"
style="margin-bottom: 10px"
>{{ item }}</el-tag
>
</div> </div>
<el-button slot="reference" type="text">...</el-button> <el-button
style="color: #000; font-size: 20px"
slot="reference"
type="text"
>{{ info_data.title[0] }}</el-button
>
</el-popover> </el-popover>
</div> </div>
<div v-else> <div v-else>
...@@ -28,15 +45,18 @@ ...@@ -28,15 +45,18 @@
</h2> </h2>
</div> </div>
</el-col> </el-col>
<el-col :span="12" style="text-align: right;"> <el-col :span="12" style="text-align: right">
<el-button type="primary" v-for="(item, index) in info_data.right_buttons" :key="index" :icon="item.icon" <el-button
@click="btnClick(item.event)"> type="primary"
v-for="(item, index) in info_data.right_buttons"
:key="index"
:icon="item.icon"
@click="btnClick(item.event)"
>
{{ item.text }} {{ item.text }}
</el-button> </el-button>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
...@@ -56,10 +76,10 @@ export default { ...@@ -56,10 +76,10 @@ export default {
computed: {}, computed: {},
created() { created() {
this.info_data = { ...this.examination_questions }; this.info_data = { ...this.examination_questions };
console.log('头部接受到的数据'); // console.log('头部接受到的数据');
console.log(this.examination_questions); // console.log(this.examination_questions);
}, },
mounted() { }, mounted() {},
methods: { methods: {
back() { back() {
...@@ -67,24 +87,23 @@ export default { ...@@ -67,24 +87,23 @@ export default {
}, },
seconds_to_minutes(str) { seconds_to_minutes(str) {
if (str) { if (str) {
return secondsToMinutes(str) return secondsToMinutes(str);
} else { } else {
return '暂无' return '暂无';
} }
}, },
btnClick(val) { btnClick(val) {
this.$emit('btnClick', val); this.$emit('btnClick', val);
}, },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.back_btn { .back_btn {
/* font-size: 16px; */ /* font-size: 16px; */
color: #303133; color: #303133;
border-right: 1px solid #DCDFE6; border-right: 1px solid #dcdfe6;
padding: 3px 10px 3px 0; padding: 3px 10px 3px 0;
border-radius: none; border-radius: none;
} }
......
<!--
* @Author: czj
* @Date: 2023-03-03 10:41:57
* @Description:
* @FilePath: \AdministrationHome\src\components\TableHead\index.vue
-->
<!-- -->
<template>
<div>
<el-row :gutter="20">
<el-col :span="9">
<div v-if="head_data.is_search_show">
<span>搜索:</span>
<el-input
placeholder="输入名称"
class="search_box"
v-model="search_val"
:placeholder="
!head_data.search_placeholder
? '搜索'
: head_data.search_placeholder
"
@change="searchChange"
></el-input>
<el-button type="warning" size="small" @click="search"
>搜索</el-button
>
<el-button size="small" @click="resetting">重置</el-button>
</div>
<div v-else style="opacity: 0; pointer-events: none">暂无</div>
</el-col>
<el-col :span="13" style="text-align: right; padding-right: 0">
<span
v-for="(item, index) in head_data.right_buttons"
:key="index"
style="margin: 0 8px"
>
<el-button
v-if="upload_btns.indexOf(item.event) == -1"
type="primary"
:icon="item.icon"
@click="btnClick(item.event)"
>{{ item.text }}</el-button
>
<el-upload
v-else
id="upload_moudel"
class="avatar-uploader"
action="#"
:show-file-list="false"
accept=""
:http-request="sliderRequest"
>
<el-button
type="primary"
:icon="item.icon"
@click="uploadCode(item.event)"
>{{ item.text }}</el-button
>
</el-upload>
</span>
</el-col>
<el-col :span="2"
><span v-if="head_data.ensembel_btn"
><el-badge :value="head_data.number_value">
<el-popover
placement="bottom"
width="400"
style="overflow-y: hidden"
trigger="hover"
v-model="visible"
>
<el-table
:data="head_data.select_data"
height="600"
style="width: 100%"
>
<el-table-column prop="id" label="编号"> </el-table-column>
<el-table-column prop="title" label="考试标题" width="180">
</el-table-column>
<el-table-column prop="address" label="操作">
<template slot-scope="scope">
<el-button
type="danger"
icon="el-icon-delete"
@click="deleteSelectData(scope)"
circle
></el-button>
</template>
</el-table-column>
</el-table>
<el-button
style="float: right; margin-top: 10px"
@click="
btnClick(head_data.ensembel_btn.event), (visible = !visible)
"
type="primary"
>{{ head_data.ensembel_btn.text }}</el-button
>
<el-button
slot="reference"
:icon="head_data.ensembel_btn.icon"
type="primary"
>{{ head_data.ensembel_btn.text }}</el-button
>
</el-popover>
</el-badge></span
></el-col
>
</el-row>
</div>
</template>
<script>
export default {
props: ['head_data'],
data() {
return {
search_val: '',
select_ids: [],
upload_btns: [
'upload',
'examination_questions_upload',
'batch_reservation',
],
btn_code: '',
visible: false,
};
},
components: {},
watch: {
head_data: {
handler(newValue, oldVlue) {
this.head_data = newValue;
},
deep: true,
},
},
computed: {},
mounted() {
// console.log(this.head_data);
},
methods: {
search() {
this.$emit('search', this.search_val);
},
searchChange() {
this.$emit('change', this.search_val);
},
resetting() {
this.search_val = null;
this.$emit('resetting', null);
},
addEvent() {
this.$emit('add');
},
//右侧按钮事件
btnClick(val) {
this.$emit('btnClick', val);
},
uploadCode(val) {
this.btn_code = val;
},
// 上传代理
sliderRequest(upload) {
let uploads = { ...upload };
uploads['btn_code'] = this.btn_code;
this.$emit('upload', uploads);
},
//删除购物车内容
deleteSelectData(scope) {
this.$emit('deleteSelectData', scope.$index, scope.row.id);
// this.head_data.select_data.splice(scope.$index, 1);
},
},
};
</script>
<style scoped>
.search_box {
width: 200px;
margin-right: 15px;
}
.avatar-uploader {
display: inline-block;
}
</style>
...@@ -11,25 +11,67 @@ ...@@ -11,25 +11,67 @@
<el-col :span="9"> <el-col :span="9">
<div v-if="head_data.is_search_show"> <div v-if="head_data.is_search_show">
<span>搜索:</span> <span>搜索:</span>
<el-input placeholder="输入名称" class="search_box" v-model="search_val" <el-input
:placeholder="!head_data.search_placeholder ? '搜索' : head_data.search_placeholder" placeholder="输入名称"
@change="searchChange"></el-input> class="search_box"
<el-button type="warning" size="small" @click="search">搜索</el-button> v-model="search_val"
:placeholder="
!head_data.search_placeholder
? '搜索'
: head_data.search_placeholder
"
@change="searchChange"
></el-input>
<el-button type="warning" size="small" @click="search"
>搜索</el-button
>
<el-button size="small" @click="resetting">重置</el-button> <el-button size="small" @click="resetting">重置</el-button>
</div> </div>
<div v-else style="opacity: 0;pointer-events: none;">暂无</div> <div v-else style="opacity: 0; pointer-events: none">暂无</div>
</el-col> </el-col>
<el-col :span="15" style="text-align: right;"> <el-col :span="15" style="text-align: right; padding-right: 0">
<span v-for="(item, index) in head_data.right_buttons" :key="index" style="margin: 0 8px;"> <span
<el-button v-if="upload_btns.indexOf(item.event) == -1" type="primary" :icon="item.icon" v-for="(item, index) in head_data.right_buttons"
@click="btnClick(item.event)">{{ :key="index"
item.text }}</el-button> style="margin: 0 8px"
<el-upload v-else id="upload_moudel" class="avatar-uploader" action="#" :show-file-list="false" accept="" >
:http-request="sliderRequest"> <el-button
<el-button type="primary" :icon="item.icon" @click="uploadCode(item.event)">{{ item.text }}</el-button> v-if="upload_btns.indexOf(item.event) == -1"
type="primary"
:icon="item.icon"
@click="btnClick(item.event)"
>{{ item.text }}</el-button
>
<el-upload
v-else
id="upload_moudel"
class="avatar-uploader"
action="#"
:show-file-list="false"
accept=""
:http-request="sliderRequest"
>
<el-button
type="primary"
:icon="item.icon"
@click="uploadCode(item.event)"
>{{ item.text }}</el-button
>
</el-upload> </el-upload>
</span> </span>
</el-col> </el-col>
<!-- <el-col :span="2"
><span v-if="head_data.ensembel_btn"
><el-badge :value="head_data.number_value">
<el-button
:icon="head_data.ensembel_btn.icon"
@click="btnClick(head_data.ensembel_btn.event)"
type="primary"
>{{ head_data.ensembel_btn.text }}</el-button
>
</el-badge></span
></el-col
> -->
</el-row> </el-row>
</div> </div>
</template> </template>
...@@ -40,16 +82,29 @@ export default { ...@@ -40,16 +82,29 @@ export default {
data() { data() {
return { return {
search_val: '', search_val: '',
upload_btns: ['upload', 'examination_questions_upload', 'batch_reservation'], upload_btns: [
'upload',
'examination_questions_upload',
'batch_reservation',
],
btn_code: '', btn_code: '',
}; };
}, },
components: {}, components: {},
watch: {
head_data: {
handler(newValue, oldVlue) {
this.head_data = newValue;
},
deep: true,
},
},
computed: {}, computed: {},
mounted() { }, mounted() {
console.log(this.head_data);
},
methods: { methods: {
search() { search() {
...@@ -59,7 +114,7 @@ export default { ...@@ -59,7 +114,7 @@ export default {
this.$emit('change', this.search_val); this.$emit('change', this.search_val);
}, },
resetting() { resetting() {
this.search_val = null this.search_val = null;
this.$emit('resetting', null); this.$emit('resetting', null);
}, },
addEvent() { addEvent() {
...@@ -75,13 +130,12 @@ export default { ...@@ -75,13 +130,12 @@ export default {
}, },
// 上传代理 // 上传代理
sliderRequest(upload) { sliderRequest(upload) {
let uploads = { ...upload } let uploads = { ...upload };
uploads['btn_code'] = this.btn_code uploads['btn_code'] = this.btn_code;
this.$emit('upload', uploads) this.$emit('upload', uploads);
}, },
} },
} };
</script> </script>
<style scoped> <style scoped>
.search_box { .search_box {
......
/**
* @Author: AnthonyD
* @Date: 2023-03-23 15:22:21
* @Last Modified by: AnthonyD
* @Last Modified time: 2023-03-30 15:05:46
*/
import Cookies from 'js-cookie' import Cookies from 'js-cookie'
const TokenKey = 'Admin-Token' const TokenKey = 'Admin-Token_min'
export function getToken() { export function getToken() {
return Cookies.get(TokenKey) return Cookies.get(TokenKey)
......
...@@ -55,10 +55,24 @@ export function secondsToMinutes(s) { ...@@ -55,10 +55,24 @@ export function secondsToMinutes(s) {
//两个数,求百分比 //两个数,求百分比
export function toPercent(num, total) { export function toPercent(num, total) {
return (Math.round(num / total * 10000) / 100.00 + "%");// 小数点后两位百分比 if (num == 0) {
} return '0%'
} else {
return (Math.round(num / total * 10000) / 100.00 + "%");// 小数点后两位百分比
}
}
//取至小数点后两位,四舍五入
export function keepTwoDecimal(num) {
var result = parseFloat(num);
if (isNaN(result)) {
return false;
} else {
result = Math.round(num * 100) / 100;
return result;
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑!
请 注册 或者 后发表评论