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