From e7c988c6eeb5fe597c5e43e9a21c0feff9b31d2a Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期五, 24 一月 2025 14:03:25 +0800
Subject: [PATCH] 文件上传表单增加允许的文件类型
---
src/views/index.vue | 325 ++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 281 insertions(+), 44 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index 614cabe..e52db1b 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -65,54 +65,160 @@
</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">
<el-card>
- <NoticeTable style="height: 360px" />
+ <NoticeTable style="height: 340px" />
</el-card>
</div>
<!-- 娑堟伅閫氱煡 -->
<div class="flex_card">
<el-card>
- <TidingsTable style="height: 360px" />
+ <TidingsTable style="height: 340px" />
</el-card>
</div>
<!-- 鍦板浘 -->
</div>
- <div class="mt-[10px] min-w-[1600px]">
+ <div style="margin-top: 10px">
<el-card>
<div>
<div class="search-form">
- <el-form :model="searchForm" inline>
- <el-form-item label=" ">
+ <el-form :model="searchForm" inline size="small">
+ <el-form-item label="">
<el-input
v-model="searchForm.name"
clearable
placeholder="璇疯緭鍏ラ」鐩悕绉版垨椤圭洰浠ｇ爜"
- style="width: 180px"
+ style="width: 240px"
/>
</el-form-item>
<el-form-item style="margin-right: 0px">
- <el-button icon="Search" type="primary" @click="searchList"
+ <el-button
+ clearable
+ @clear="searchList"
+ icon="Search"
+ type="primary"
+ @click="searchList"
>鎼滅储</el-button
>
<el-button icon="Refresh" @click="mapQuery">閲嶇疆</el-button>
</el-form-item>
</el-form>
</div>
- <div class="flex w-full h-[500px] border border-[#DBDEEA]">
+ <div class="map_div">
<Map
id="DangerSourceId"
ref="mapRef"
:is-show-control="true"
- :list-type="true"
+ :list-type="false"
:map-list="tableDatas"
:map-type="true"
class="w-full h-full border-r border-[#DBDEEA]"
@@ -133,31 +239,75 @@
import NoticeTable from "./components/noticeTable.vue";
import TidingsTable from "./components/tidingsTable.vue";
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: '灏勬椽鏁存不涓�涓嬪煄鍖烘苯杞﹂殢鎰忎贡楦ｇ瑳琛屼负',
+ // time: '2025-01-02'
+ // },
+ // {
+ // name: '灏勬椽甯備汉姘戞斂搴�',
+ // content: '缁村崱鍥介檯鍏寮�鍙戝晢鏈寜鏃跺姙鐞嗘埧浜ц瘉',
+ // time: '2025-01-01'
+ // }
+ ],
queryParams: {},
timeMerge: [],
sys_administrative_divisions: [],
- calculation: [],
countExceptionProjectData: {},
searchForm: {},
- tableDatas: [
- {
- name: "灏勬椽甯�",
- value: 105.37281,
- lat: 30.87145,
- lon: 105.37281,
- id: "222222222",
- },
- {
- name: "xxxx",
- value: 105.22332,
- lat: 31.52421,
- lon: 106.22332,
- id: "11112",
- },
+ tableDatas: [],
+ calculation: [
+ { text: "鍌�", mun: 0, statistics: "", statisticsMun: "0" },
+ { text: "寤�", mun: 0, statistics: "", statisticsMun: "0" },
+ { text: "鐪�", mun: 0, statistics: "", statisticsMun: "0" },
+ { text: "甯�", mun: 0, statistics: "", statisticsMun: "0" },
+ { text: "鏂�", mun: 0, statistics: "", statisticsMun: "0" },
+ { text: "绔�", mun: 0, statistics: "", statisticsMun: "0" },
+ { text: "鍘�", mun: 0, statistics: "", statisticsMun: "0" },
+ { text: "鏅�", mun: 0, statistics: "", statisticsMun: "0" },
],
};
},
@@ -168,7 +318,61 @@
TidingsTable,
Map,
},
+ 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 = "";
@@ -176,20 +380,19 @@
return;
}
- this.queryParams.startTime = timeMerge[0];
- this.queryParams.endTime = timeMerge[1];
+ this.queryParams.startTime = this.timeMerge[0];
+ this.queryParams.endTime = this.timeMerge[1];
},
handleQuery() {
- console.log(queryParams);
const obj = {
- startDate: queryParams.startTime,
- endDate: queryParams.endTime,
- areaCode: queryParams.area,
- minInvestment: queryParams.start,
- maxInvestment: queryParams.end,
+ startDate: this.queryParams.startTime,
+ endDate: this.queryParams.endTime,
+ areaCode: this.queryParams.area,
+ minInvestment: this.queryParams.start,
+ maxInvestment: this.queryParams.end,
};
- this.getCalculatioln(obj).then((res) => {
+ getCalculatioln(obj).then((res) => {
const arr = res.data.proPhaseCountVO?.concat(res.data.impTypeCountVO);
const newArr = arr.map((item) => ({
text: item.text,
@@ -197,7 +400,6 @@
statistics: item.type,
statisticsMun: item.amount,
}));
-
// 鍒涘缓涓�涓璞★紝浠ヤ究鏍规嵁 text 灞炴�у揩閫熸煡鎵� newArr 涓殑瀵硅薄
const newArrLookup = newArr.reduce((lookup, item) => {
lookup[item.text] = item;
@@ -205,15 +407,34 @@
}, {});
// 鏇存柊 calculation 鏁扮粍锛屼繚鎸佸叾鍘熷椤哄簭
- calculation.value = calculation.value.map((item) => {
+ this.calculation = this.calculation.map((item) => {
const newItem = newArrLookup[item.text];
return newItem ? newItem : item; // 濡傛灉 newItem 瀛樺湪锛屽垯杩斿洖 newItem锛屽惁鍒欒繑鍥炲師濮� item
});
});
- abnormalData(obj);
+ this.abnormalData(obj);
},
+ // 鍦板浘鎼滅储
+ searchList() {
+ var _this = this;
+ searchByKey({ wordKey: this.searchForm.name }).then((res) => {
+ if (res.code == 200) {
+ if (res.data.length > 0) {
+ // this.$refs["mapRef"].showProjectInfo(res.data);
+ // _this.tableDatas = res.data;
+ setTimeout(() => {
+ _this.$refs["mapRef"].makeAllMask(res.data);
+ }, 2000);
+ } else {
+ // _this.$message.error("鏈煡璇㈠埌瀵瑰簲椤圭洰");
+ }
+ } else {
+ _this.$message.error(res.msg);
+ }
+ });
+ },
// 鑾峰彇寮傚父鏁版嵁
async abnormalData(obj) {
const res = await getAbnormalData(obj);
@@ -244,12 +465,6 @@
};
this.timeMerge = [];
this.handleQuery();
- },
-
- // 鍦板浘鎼滅储
- async searchList() {
- // await search()
- this.mapRef.moveTo(105.37281, 30.87145);
},
mapQuery() {},
},
@@ -286,6 +501,9 @@
}
.search-form {
+ padding: 5px;
+ position: absolute;
+ z-index: 999;
display: flex;
justify-content: flex-end;
}
@@ -344,5 +562,24 @@
gap: 10px;
font-size: 12px;
}
+.map_div {
+ display: flex;
+ width: 100%;
+ 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