From 6ae0fcef149ddbe614746023a58a3885b3ac4bde Mon Sep 17 00:00:00 2001 From: zxl <763096477@qq.com> Date: 星期二, 25 三月 2025 11:31:04 +0800 Subject: [PATCH] Merge branch 'dev' --- src/views/index.vue | 216 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 214 insertions(+), 2 deletions(-) diff --git a/src/views/index.vue b/src/views/index.vue index d015b96..00052f0 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -65,12 +65,113 @@ </el-form> </div> </div> + <!-- 缁熻鎯呭喌 --> <ProjectOverview :calculation="calculation" :countExceptionProjectData="countExceptionProjectData" /> </div> +<!-- <el-card>--> +<!-- <div style="display: flex;min-height: 300px">--> +<!-- <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="projectProcessData1"--> +<!-- :header-cell-style="{--> +<!-- background: '#F5F7FC',--> +<!-- color: '#454B5E',--> +<!-- fontSize: '12px'--> +<!-- }"--> +<!-- min-height="280"--> +<!-- max-height="280"--> +<!-- >--> +<!-- <el-table-column--> +<!-- label="鍙戝竷鍗曚綅"--> +<!-- width="150"--> +<!-- prop="name"--> +<!-- >--> +<!-- </el-table-column>--> +<!-- <el-table-column--> +<!-- label="鍐呭"--> +<!-- prop="content"--> +<!-- width="250"--> +<!-- :show-overflow-tooltip="true"--> +<!-- >--> +<!-- </el-table-column>--> +<!-- <el-table-column--> +<!-- label="鏃堕棿"--> +<!-- prop="time"--> +<!-- >--> +<!-- </el-table-column>--> +<!-- <el-table-column--> +<!-- fixed="right"--> +<!-- align="center"--> +<!-- label="鎿嶄綔"--> +<!-- >--> +<!-- <template slot-scope="scope">--> +<!-- <el-button type="text" size="small">鏌ョ湅</el-button>--> +<!-- </template>--> +<!-- </el-table-column>--> +<!-- </el-table>--> +<!-- </div>--> +<!-- </div>--> +<!-- </el-card>--> + <!-- 寰呭姙浜嬮」 --> <div class="flex"> <div class="flex_card"> @@ -140,10 +241,58 @@ 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' + // }, + ], + projectProcessData1: [ + // { + // name: '灏勬椽甯備汉姘戞斂搴�', + // content: '灏勬椽缁忓紑鍖虹豢鐒跺垢绂忓皬鍖烘梺宸ュ湴闀挎湡澶滈棿', + // time: '2025-01-06' + // }, + // { + // name: '灏勬椽甯備汉姘戞斂搴�', + // content: '鍏充簬鍝ㄦゼ鏉戞媶杩� 鏂规鍜� 鎷嗚縼鍗忚鐨勭枒闂�', + // time: '2025-01-02' + // }, + // { + // name: '灏勬椽甯備汉姘戞斂搴�', + // content: '灏勬椽鏁存不涓�涓嬪煄鍖烘苯杞﹂殢鎰忎贡楦g瑳琛屼负', + // time: '2025-01-02' + // }, + // { + // name: '灏勬椽甯備汉姘戞斂搴�', + // content: '缁村崱鍥介檯鍏寮�鍙戝晢鏈寜鏃跺姙鐞嗘埧浜ц瘉', + // time: '2025-01-01' + // } + ], queryParams: {}, timeMerge: [], sys_administrative_divisions: [], @@ -169,11 +318,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: ['瓒呮椂', '鍑嗘椂', '寤舵椂', '鐫e姙'] + }, + 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: '鐫e姙'}, + ] + } + ] + } + }, dataPickerChange(val) { if (!val) { this.queryParams.startTime = ""; @@ -229,7 +428,7 @@ _this.$refs["mapRef"].makeAllMask(res.data); }, 2000); } else { - _this.$message.error("鏈煡璇㈠埌瀵瑰簲椤圭洰"); + // _this.$message.error("鏈煡璇㈠埌瀵瑰簲椤圭洰"); } } else { _this.$message.error(res.msg); @@ -369,5 +568,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