From c702199e8b384ea25d4f1778a297d309d392b9f3 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期一, 20 一月 2025 23:41:48 +0800
Subject: [PATCH] 首页新增静态内容
---
src/views/index.vue | 177 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 176 insertions(+), 1 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index d015b96..59dbd57 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -65,12 +65,98 @@
</el-form>
</div>
</div>
+
<!-- 缁熻鎯呭喌 -->
<ProjectOverview
:calculation="calculation"
:countExceptionProjectData="countExceptionProjectData"
/>
</div>
+ <el-card>
+ <div style="display: flex;">
+ <div style="flex: 2;display: flex;flex-direction: column; justify-content: center;align-items: flex-start">
+ <div class="flex justify-between mb-[15px]" style="align-items: center;margin-bottom: 5px">
+ <div class="block mb-3 font-semibold fonts">娴佺▼鎺ㄨ繘鎯呭喌鎬昏</div>
+ </div>
+ <el-table
+ :data="projectProcessData"
+ :header-cell-style="{
+ background: '#F5F7FC',
+ color: '#454B5E',
+ fontSize: '12px'
+ }"
+ min-height="280"
+ max-height="280"
+ >
+ <el-table-column
+ label="椤圭洰鍚嶇О"
+ prop="name"
+ :show-overflow-tooltip="true"
+ >
+ </el-table-column>
+ <el-table-column
+ label="褰撳墠/鎬昏"
+ width="100px"
+ prop="num"
+ >
+ </el-table-column>
+ </el-table>
+ </div>
+ <div style="flex: 1.5;display: flex;justify-content: center;align-items: center">
+ <div ref="pie" style="width: 85%; height: 100%;"></div>
+ </div>
+ <div style="flex: 2;display: flex;flex-direction: column; justify-content: center;align-items: flex-start">
+ <div style="display: flex;align-items: center;margin-bottom: 5px;width: 100%">
+ <div class="block font-semibold fonts" style="width: 100%">
+ <div style="display: flex; font-size: 12px; justify-content: flex-end;width: 100%">
+ <div
+ :class="{ active: true }"
+ class="tab"
+ >
+ 鍑嗘椂鐜�
+ </div>
+ <div
+ :class="{ active: false }"
+ class="tab"
+ >
+ 寮傚父鐜�
+ </div>
+ <div
+ :class="{ active: false }"
+ class="tab"
+ >
+ 鍔炵粨鐜�
+ </div>
+ </div>
+ </div>
+ </div>
+ <el-table
+ :data="projectProcessData"
+ :header-cell-style="{
+ background: '#F5F7FC',
+ color: '#454B5E',
+ fontSize: '12px'
+ }"
+ min-height="280"
+ max-height="280"
+ >
+ <el-table-column
+ label="椤圭洰鍚嶇О"
+ prop="name"
+ :show-overflow-tooltip="true"
+ >
+ </el-table-column>
+ <el-table-column
+ label="褰撳墠/鎬昏"
+ width="100px"
+ prop="num"
+ >
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
+ </el-card>
+
<!-- 寰呭姙浜嬮」 -->
<div class="flex">
<div class="flex_card">
@@ -140,10 +226,36 @@
import Map from "./components/Map/index.vue";
import { getCalculatioln, getAbnormalData } from "@/api/login";
import { searchByKey } from "@/api/projectEngineering/projectInfo";
+import * as echarts from 'echarts';
+
export default {
name: "Index",
data() {
return {
+ pie: null,
+ pieData: {},
+ projectProcessData: [
+ {
+ name: '浜ら�氱被椤圭洰瀹℃壒娴佺▼(绠�鏄撶▼搴�)',
+ num: '11/45'
+ },
+ {
+ name: '浜ら�氱被椤圭洰瀹℃壒娴佺▼(涓�鑸啘鏉戝叕璺�)',
+ num: '12/15'
+ },
+ {
+ name: '浜ら�氱被椤圭洰瀹℃壒娴佺▼(閲嶈鍐滄潙鍏矾)',
+ num: '16/30'
+ },
+ {
+ name: '浜ら�氱被椤圭洰瀹℃壒娴佺▼(鍥界渷閬�)',
+ num: '2/18'
+ },
+ {
+ name: '绀句細鎶曡祫椤圭洰瀹℃壒娴佺▼',
+ num: '9/16'
+ },
+ ],
queryParams: {},
timeMerge: [],
sys_administrative_divisions: [],
@@ -169,11 +281,61 @@
TidingsTable,
Map,
},
- created() {
+ mounted() {
+ this.$nextTick(() => {
+ this.pie = echarts.init(this.$refs.pie)
+ this.pie.setOption(this.getPieOption())
+ })
+
this.handleQuery();
this.searchList();
},
methods: {
+ getPieOption() {
+ return {
+ title: {
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b}: {c} ({d}%)'
+ },
+ legend: {
+ orient: 'horizontal',
+ left: 'center',
+ bottom: 1,
+ data: ['瓒呮椂', '鍑嗘椂', '寤舵椂', '鐫ｅ姙']
+ },
+ series: [
+ {
+ name: '楗煎浘鍚嶇О',
+ type: 'pie',
+ radius: ['50%', '70%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: '30',
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ {value: 335, name: '瓒呮椂'},
+ {value: 310, name: '鍑嗘椂'},
+ {value: 234, name: '寤舵椂'},
+ {value: 135, name: '鐫ｅ姙'},
+ ]
+ }
+ ]
+ }
+ },
dataPickerChange(val) {
if (!val) {
this.queryParams.startTime = "";
@@ -369,5 +531,18 @@
height: 500px;
border: #dbdeea;
}
+.tab {
+ padding: 6px;
+ border: 1px solid #dbdeea;
+ cursor: pointer;
+ width: 72px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.active {
+ border: 1px solid #3369ff;
+ color: #3369ff;
+}
</style>
--
Gitblit v1.8.0