From 99d0cefca0ba2b3d5a5b07080e21a311348a3d13 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期一, 18 三月 2024 15:02:12 +0800
Subject: [PATCH] feat:考核成绩柱形图
---
src/views/screen/components/screen-examine/components/examine-chart.vue | 61 ++++++++++++++++++++++++++++++
src/views/screen/components/screen-wrapper/index.vue | 6 ++-
src/views/screen/components/screen-detection/index.vue | 2
src/views/screen/components/screen-examine/index.vue | 47 +++++++++++++++++++++++
4 files changed, 113 insertions(+), 3 deletions(-)
diff --git a/src/views/screen/components/screen-detection/index.vue b/src/views/screen/components/screen-detection/index.vue
index 5c8d21f..714f076 100644
--- a/src/views/screen/components/screen-detection/index.vue
+++ b/src/views/screen/components/screen-detection/index.vue
@@ -28,7 +28,7 @@
</template>
<script>
-import WrapperTitle from '../wrapper-title/index'
+import WrapperTitle from '../wrapper-title/index';
export default {
components: {
WrapperTitle
diff --git a/src/views/screen/components/screen-examine/components/examine-chart.vue b/src/views/screen/components/screen-examine/components/examine-chart.vue
new file mode 100644
index 0000000..0a6b467
--- /dev/null
+++ b/src/views/screen/components/screen-examine/components/examine-chart.vue
@@ -0,0 +1,61 @@
+<template>
+ <div class="chart-container">
+ <div class="rank-chart" ref="rankChart"></div>
+ </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+let barChart = null;
+export default {
+ name: 'ExamineChart',
+ data() {
+ return {
+
+ }
+ },
+
+ methods: {
+ initChart() {
+ const options = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: [120, 200, 150, 80, 70, 110, 130],
+ type: 'bar'
+ }
+ ]
+ }
+ barChart.setOption(options,true);
+ }
+ },
+ mounted() {
+ barChart = echarts.init(this.$refs.rankChart);
+
+ this.initChart();
+ },
+ beforeDestroy() {
+ if (lineChart) {
+ barChart.dispose();
+ }
+ },
+
+}
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+ width: 100%;
+ height: 400px;
+ .rank-chart {
+ width: 100%;
+ height: 100%;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/screen/components/screen-examine/index.vue b/src/views/screen/components/screen-examine/index.vue
new file mode 100644
index 0000000..eccbc90
--- /dev/null
+++ b/src/views/screen/components/screen-examine/index.vue
@@ -0,0 +1,47 @@
+<template>
+ <div class="examine-container">
+ <wrapper-title :title="'鑰冩牳鎴愮哗鏁版嵁'"></wrapper-title>
+ <div class="examine-content">
+ <div class="examine-wrapper">
+ <examine-chart></examine-chart>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import WrapperTitle from '../wrapper-title/index';
+import ExamineChart from './components/examine-chart';
+export default {
+ name: 'ScreenExamine',
+ components: {
+ WrapperTitle,
+ ExamineChart
+ }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.examine-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+.examine-content {
+ width: 100%;
+ flex: 1;
+ background: rgba(67, 102, 155, 0.3);
+ border: 1px solid rgba(47, 91, 157, 0.8);
+ padding: 20px 20px;
+ position: relative;
+ .examine-wrapper {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/screen/components/screen-wrapper/index.vue b/src/views/screen/components/screen-wrapper/index.vue
index 6c44f8e..0dbff49 100644
--- a/src/views/screen/components/screen-wrapper/index.vue
+++ b/src/views/screen/components/screen-wrapper/index.vue
@@ -8,7 +8,7 @@
<screen-detection></screen-detection>
</div>
<div class="right-container wrapper">
-
+ <screen-examine></screen-examine>
</div>
</div>
</div>
@@ -17,11 +17,13 @@
<script>
import ScreenFace from '../screen-face/index';
import ScreenDetection from '../screen-detection/index';
+import ScreenExamine from '../screen-examine/index';
export default {
name: 'ScreenWrapper',
components: {
ScreenFace,
- ScreenDetection
+ ScreenDetection,
+ ScreenExamine,
},
}
</script>
--
Gitblit v1.8.0