From ee17debc7eff4af0bbfc1f28a256f2a05993b0c5 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期二, 16 四月 2024 17:19:36 +0800
Subject: [PATCH] feat:添加圆环
---
src/views/system/result/index.vue | 180 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 168 insertions(+), 12 deletions(-)
diff --git a/src/views/system/result/index.vue b/src/views/system/result/index.vue
index 0d78705..2ef8485 100644
--- a/src/views/system/result/index.vue
+++ b/src/views/system/result/index.vue
@@ -1,6 +1,23 @@
<template>
<div id="warp">
- <el-row>
+ <div class="data-chart-container">
+ <el-card class="data-card" :body-style="{ height: '100%' }">
+ <div class="card-content">
+ <div class="title-container">
+ <h1>鑰冩牳鎴愮哗</h1>
+ <div class="select-container">
+ <el-date-picker v-model="date" type="date" placeholder="閫夋嫨鏃ユ湡">
+ </el-date-picker>
+ </div>
+ </div>
+
+ <div class="echart-container">
+ <div id="barChart" ref="barChart"></div>
+ </div>
+ </div>
+ </el-card>
+ </div>
+ <el-row :gutter="100">
<el-col :span="6">
<div class="city-warp">
<div class="city">
@@ -8,6 +25,9 @@
鑷祦浜�
</div>
<div class="score-warp">
+ <div class="score-item">
+ <div style="font-size: 15px;margin-bottom: 15px">2024骞�4鏈�12鏃�</div>
+ </div>
<div class="score-item">
<div>瑙嗛锛�</div>
<div class="score">99.5</div>
@@ -17,7 +37,7 @@
<div class="score">87</div>
</div>
<div class="score-item">
- <div>鐩戞帶锛�</div>
+ <div>杞﹁締锛�</div>
<div class="score">94</div>
</div>
</div>
@@ -36,6 +56,9 @@
</div>
<div class="score-warp">
<div class="score-item">
+ <div style="font-size: 15px;margin-bottom: 15px">2024骞�4鏈�12鏃�</div>
+ </div>
+ <div class="score-item">
<div>瑙嗛锛�</div>
<div class="score">99.5</div>
</div>
@@ -44,9 +67,10 @@
<div class="score">87</div>
</div>
<div class="score-item">
- <div>鐩戞帶锛�</div>
+ <div>杞﹁締锛�</div>
<div class="score">94</div>
</div>
+
</div>
<div class="bottom-publish">
<el-button size="medium" type="success">鍙戝竷</el-button>
@@ -63,6 +87,9 @@
</div>
<div class="score-warp">
<div class="score-item">
+ <div style="font-size: 15px;margin-bottom: 15px">2024骞�4鏈�12鏃�</div>
+ </div>
+ <div class="score-item">
<div>瑙嗛锛�</div>
<div class="score">99.5</div>
</div>
@@ -71,9 +98,10 @@
<div class="score">87</div>
</div>
<div class="score-item">
- <div>鐩戞帶锛�</div>
+ <div>杞﹁締锛�</div>
<div class="score">94</div>
</div>
+
</div>
<div class="bottom-publish">
<el-button size="medium" type="success">鍙戝竷</el-button>
@@ -90,6 +118,9 @@
</div>
<div class="score-warp">
<div class="score-item">
+ <div style="font-size: 15px;margin-bottom: 15px">2024骞�4鏈�12鏃�</div>
+ </div>
+ <div class="score-item">
<div>瑙嗛锛�</div>
<div class="score">99.5</div>
</div>
@@ -98,9 +129,10 @@
<div class="score">87</div>
</div>
<div class="score-item">
- <div>鐩戞帶锛�</div>
+ <div>杞﹁締锛�</div>
<div class="score">94</div>
</div>
+
</div>
<div class="bottom-publish">
<el-button size="medium" type="success">鍙戝竷</el-button>
@@ -113,7 +145,7 @@
</el-row>
- <el-row style="margin-top: 30px">
+ <el-row style="margin-top: 30px" :gutter="100">
<el-col :span="6">
<div class="city-warp">
<div class="city">
@@ -121,6 +153,9 @@
楂樻柊鍖�
</div>
<div class="score-warp">
+ <div class="score-item">
+ <div style="font-size: 15px;margin-bottom: 15px">2024骞�4鏈�12鏃�</div>
+ </div>
<div class="score-item">
<div>瑙嗛锛�</div>
<div class="score">99.5</div>
@@ -130,7 +165,7 @@
<div class="score">87</div>
</div>
<div class="score-item">
- <div>鐩戞帶锛�</div>
+ <div>杞﹁締锛�</div>
<div class="score">94</div>
</div>
</div>
@@ -149,6 +184,9 @@
</div>
<div class="score-warp">
<div class="score-item">
+ <div style="font-size: 15px;margin-bottom: 15px">2024骞�4鏈�12鏃�</div>
+ </div>
+ <div class="score-item">
<div>瑙嗛锛�</div>
<div class="score">99.5</div>
</div>
@@ -157,7 +195,7 @@
<div class="score">87</div>
</div>
<div class="score-item">
- <div>鐩戞帶锛�</div>
+ <div>杞﹁締锛�</div>
<div class="score">94</div>
</div>
</div>
@@ -176,6 +214,9 @@
</div>
<div class="score-warp">
<div class="score-item">
+ <div style="font-size: 15px;margin-bottom: 15px">2024骞�4鏈�12鏃�</div>
+ </div>
+ <div class="score-item">
<div>瑙嗛锛�</div>
<div class="score">99.5</div>
</div>
@@ -184,9 +225,10 @@
<div class="score">87</div>
</div>
<div class="score-item">
- <div>鐩戞帶锛�</div>
+ <div>杞﹁締锛�</div>
<div class="score">94</div>
</div>
+
</div>
<div class="bottom-publish">
<el-button size="medium" type="success">鍙戝竷</el-button>
@@ -201,22 +243,93 @@
</template>
<script>
+import * as echarts from 'echarts';
+let observer = null;
+let chart = null;
export default {
name: 'index',
data() {
return {
-
+ activeIndex: '1',
+ activeIndex2: '1',
+ date: '',
+ company: '',
+ dataList: {
+ name: ['瀵岄『鍘�', '鑽ｅ幙', '楂樻柊鍖�', '鑷祦浜曞尯', '璐′簳鍖�', '澶у畨鍖�', '娌挎哗鍖�'],
+ data1: [95, 96, 97, 95, 94.5, 93.6, 94.5],
+ data2: [93.7, 93.5, 94.3, 96.5, 95.3, 94.2, 93.3],
+ data3: [98.3, 94.3, 93.3, 95.5, 96.8, 96.1, 95.8],
+ },
}
},
methods: {
jumpDetail() {
this.$router.push("/examine/detail")
+ },
+ initEchart() {
+ const option = {
+ grid: {
+ left: 0,
+ right: 0,
+ bottom: 0,
+ top: '20%',
+ containLabel: true
+ },
+ legend: {
+ right: 'right',
+ top: 'top',
+ icon: 'rect',
+ orient: "vertical",
+ },
+ tooltip: {},
+ xAxis: {
+ type: 'category',
+ axisLabel: {
+ },
+ data: this.dataList.name
+ },
+ yAxis: {
+ min: 90,
+ },
+ series: [
+ {
+ type: 'bar',
+ name: '瑙嗛鑰冩牳',
+ data: this.dataList.data1,
+ itemStyle: {
+ color: 'rgba(255, 165, 0, 1)'
+ }
+ },
+ {
+ type: 'bar',
+ name: '浜鸿劯鑰冩牳',
+ data: this.dataList.data2,
+ itemStyle: {
+ color: 'rgba(85, 192, 191, 1)'
+ }
+ },
+ {
+ type: 'bar',
+ name: '杞﹁締鑰冩牳',
+ data: this.dataList.data3,
+ itemStyle: {
+ color: 'rgba(62, 144, 247, 1)'
+ }
+ },
+ ]
+ }
+ chart.setOption(option, true);
+
}
+ },
+ mounted() {
+ chart = echarts.init(this.$refs.barChart);
+ this.initEchart();
}
}
</script>
-<style scoped>
+<style lang = "scss" scoped>
.score-warp {
display: flex;
flex-direction: column;
@@ -227,6 +340,7 @@
.score-item {
display: flex;
flex-direction: row;
+
}
.score {
width: 60px;
@@ -258,6 +372,48 @@
}
.title {
font-size: larger;
- margin-bottom: 25px;
+ margin-bottom: 5px;
+}
+.data-chart-container {
+ height: 400px;
+ margin-bottom: 20px;
+
+ .data-card {
+ height: 100%;
+
+ .card-content {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ }
+ }
+}
+.title-container {
+ position: absolute;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ z-index: 2;
+
+
+ .more-button {
+ cursor: pointer;
+ font-size: 16px;
+ padding: 0 10px;
+ }
+}
+
+.echart-container {
+ width: 100%;
+ height: 100%;
+
+ #barChart {
+ width: 100%;
+ height: 100%;
+ }
+}
+.select-container {
+ margin: 0 20px;
+ width: 180px;
}
</style>
--
Gitblit v1.8.0