From 3f8204c31b44ca186f2d5d1f96682f8c46ad2996 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期六, 23 十一月 2024 16:23:01 +0800
Subject: [PATCH] map组件
---
src/views/index.vue | 580 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 290 insertions(+), 290 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index 82171b7..614cabe 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,348 +1,348 @@
<template>
- <div class="home">
- <div class="overview">
- <div class="overview-top">
- <div class="title">椤圭洰鎬昏</div>
- <div class="qurey">
- <el-form ref="queryFormRef" :model="queryParams">
- <div class="search_from">
- <el-form-item label="鏃ユ湡">
- <el-date-picker
- style="width: 300px"
- v-model="timeMerge"
- clearable
- end-placeholder="缁撴潫鏃堕棿"
- format="YYYY-MM-DD"
- placeholder="璇烽�夋嫨鏃ユ湡"
- size="default"
- start-placeholder="寮�濮嬫椂闂�"
- type="daterange"
- value-format="YYYY-MM-DD"
- @change="dataPickerChange"
- />
- </el-form-item>
- <el-form-item label="琛屾斂鍖哄垝">
- <el-select
- v-model="queryParams.area"
- clearable
- placeholder="璇烽�夋嫨鍖哄垝"
- style="width: 180px"
- >
- <el-option
- v-for="item in sys_administrative_divisions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item
- label="鎶曡祫閲戦"
- style="margin-right: 50px"
- >
- <div class="from_input">
- <el-input
- v-model="queryParams.start"
- clearable
- placeholder="璇疯緭鍏�"
- style="width: 100px"
- type="number"
- />
- 鑷�
- <el-input
- v-model="queryParams.end"
- clearable
- placeholder="璇疯緭鍏�"
- style="width: 100px"
- type="number"
- />
- </div>
- </el-form-item>
- <el-form-item style="margin-right: 20px">
- <el-button
- icon="Search"
- type="primary"
- @click="handleQuery"
- >鎼滅储</el-button
- >
- <el-button icon="Refresh" @click="resetQuery"
- >閲嶇疆</el-button
- >
- </el-form-item>
- </div>
- </el-form>
+ <div class="home">
+ <div class="overview">
+ <div class="overview-top">
+ <div class="title">椤圭洰鎬昏</div>
+ <div class="qurey">
+ <el-form ref="queryFormRef" :model="queryParams">
+ <div class="search_from">
+ <el-form-item label="鏃ユ湡">
+ <el-date-picker
+ style="width: 300px"
+ v-model="timeMerge"
+ clearable
+ end-placeholder="缁撴潫鏃堕棿"
+ format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨鏃ユ湡"
+ size="default"
+ start-placeholder="寮�濮嬫椂闂�"
+ type="daterange"
+ value-format="YYYY-MM-DD"
+ @change="dataPickerChange"
+ />
+ </el-form-item>
+ <el-form-item label="琛屾斂鍖哄垝">
+ <el-select
+ v-model="queryParams.area"
+ clearable
+ placeholder="璇烽�夋嫨鍖哄垝"
+ style="width: 180px"
+ >
+ <el-option
+ v-for="item in sys_administrative_divisions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鎶曡祫閲戦" style="margin-right: 50px">
+ <div class="from_input">
+ <el-input
+ v-model="queryParams.start"
+ clearable
+ placeholder="璇疯緭鍏�"
+ style="width: 100px"
+ type="number"
+ />
+ 鑷�
+ <el-input
+ v-model="queryParams.end"
+ clearable
+ placeholder="璇疯緭鍏�"
+ style="width: 100px"
+ type="number"
+ />
</div>
+ </el-form-item>
+ <el-form-item style="margin-right: 20px">
+ <el-button icon="Search" type="primary" @click="handleQuery"
+ >鎼滅储</el-button
+ >
+ <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
+ </el-form-item>
</div>
- <!-- 缁熻鎯呭喌 -->
- <ProjectOverview
- :calculation="calculation"
- :countExceptionProjectData="countExceptionProjectData"
- />
+ </el-form>
</div>
- <!-- 浠ｅ姙浜嬮」 -->
- <div class="flex">
- <div class="flex_card">
- <el-card>
- <NoticeTable style="height: 360px" />
- </el-card>
- </div>
- <!-- 娑堟伅閫氱煡 -->
- <div class="flex_card">
- <el-card>
- <TidingsTable style="height: 360px" />
- </el-card>
- </div>
- <!-- 鍦板浘 -->
- </div>
- <div class="mt-[10px] min-w-[1600px]">
- <el-card>
- <div>
- <div class="search-form">
- <el-form :model="searchForm" inline>
- <el-form-item label=" ">
- <el-input
- v-model="searchForm.name"
- clearable
- placeholder="璇疯緭鍏ラ」鐩悕绉版垨椤圭洰浠ｇ爜"
- style="width: 180px"
- />
- </el-form-item>
- <el-form-item style="margin-right: 0px">
- <el-button
- 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]">
- <!-- <Map
- id="DangerSourceId"
- ref="mapRef"
- :is-show-control="true"
- :list-type="true"
- :map-list="tableDatas"
- :map-type="true"
- class="w-full h-full border-r border-[#DBDEEA]"
- @label-click="showDetails"
- @mark-click="showDetails"
- @current-label-style-change="labelStyleChange"
- /> -->
- </div>
- </div>
- </el-card>
- </div>
+ </div>
+ <!-- 缁熻鎯呭喌 -->
+ <ProjectOverview
+ :calculation="calculation"
+ :countExceptionProjectData="countExceptionProjectData"
+ />
</div>
+ <!-- 浠ｅ姙浜嬮」 -->
+ <div class="flex">
+ <div class="flex_card">
+ <el-card>
+ <NoticeTable style="height: 360px" />
+ </el-card>
+ </div>
+ <!-- 娑堟伅閫氱煡 -->
+ <div class="flex_card">
+ <el-card>
+ <TidingsTable style="height: 360px" />
+ </el-card>
+ </div>
+ <!-- 鍦板浘 -->
+ </div>
+ <div class="mt-[10px] min-w-[1600px]">
+ <el-card>
+ <div>
+ <div class="search-form">
+ <el-form :model="searchForm" inline>
+ <el-form-item label=" ">
+ <el-input
+ v-model="searchForm.name"
+ clearable
+ placeholder="璇疯緭鍏ラ」鐩悕绉版垨椤圭洰浠ｇ爜"
+ style="width: 180px"
+ />
+ </el-form-item>
+ <el-form-item style="margin-right: 0px">
+ <el-button 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]">
+ <Map
+ id="DangerSourceId"
+ ref="mapRef"
+ :is-show-control="true"
+ :list-type="true"
+ :map-list="tableDatas"
+ :map-type="true"
+ class="w-full h-full border-r border-[#DBDEEA]"
+ @label-click="showDetails"
+ @mark-click="showDetails"
+ @current-label-style-change="labelStyleChange"
+ />
+ </div>
+ </div>
+ </el-card>
+ </div>
+ </div>
</template>
<script>
-import SvgIcon from '@/components/SvgIcon/index.vue';
-import ProjectOverview from './components/projectOverview.vue';
-import NoticeTable from './components/noticeTable.vue';
-import TidingsTable from './components/tidingsTable.vue';
-// import Map from './components/Map/index.vue';
+import SvgIcon from "@/components/SvgIcon/index.vue";
+import ProjectOverview from "./components/projectOverview.vue";
+import NoticeTable from "./components/noticeTable.vue";
+import TidingsTable from "./components/tidingsTable.vue";
+import Map from "./components/Map/index.vue";
export default {
- name: "Index",
- data() {
- return {
- queryParams: {},
- timeMerge: [],
- sys_administrative_divisions: [],
- calculation: [],
- countExceptionProjectData: {},
- searchForm: {},
- tableDatas: []
- };
+ name: "Index",
+ data() {
+ return {
+ 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",
+ },
+ ],
+ };
+ },
+ components: {
+ SvgIcon,
+ ProjectOverview,
+ NoticeTable,
+ TidingsTable,
+ Map,
+ },
+ methods: {
+ dataPickerChange(val) {
+ if (!val) {
+ this.queryParams.startTime = "";
+ this.queryParams.endTime = "";
+ return;
+ }
+
+ this.queryParams.startTime = timeMerge[0];
+ this.queryParams.endTime = timeMerge[1];
},
- components: {
- SvgIcon,
- ProjectOverview,
- NoticeTable,
- TidingsTable
+ handleQuery() {
+ console.log(queryParams);
+ const obj = {
+ startDate: queryParams.startTime,
+ endDate: queryParams.endTime,
+ areaCode: queryParams.area,
+ minInvestment: queryParams.start,
+ maxInvestment: queryParams.end,
+ };
+
+ this.getCalculatioln(obj).then((res) => {
+ const arr = res.data.proPhaseCountVO?.concat(res.data.impTypeCountVO);
+ const newArr = arr.map((item) => ({
+ text: item.text,
+ mun: item.count,
+ statistics: item.type,
+ statisticsMun: item.amount,
+ }));
+
+ // 鍒涘缓涓�涓璞★紝浠ヤ究鏍规嵁 text 灞炴�у揩閫熸煡鎵� newArr 涓殑瀵硅薄
+ const newArrLookup = newArr.reduce((lookup, item) => {
+ lookup[item.text] = item;
+ return lookup;
+ }, {});
+
+ // 鏇存柊 calculation 鏁扮粍锛屼繚鎸佸叾鍘熷椤哄簭
+ calculation.value = calculation.value.map((item) => {
+ const newItem = newArrLookup[item.text];
+ return newItem ? newItem : item; // 濡傛灉 newItem 瀛樺湪锛屽垯杩斿洖 newItem锛屽惁鍒欒繑鍥炲師濮� item
+ });
+ });
+
+ abnormalData(obj);
},
- methods: {
- dataPickerChange(val) {
- if (!val) {
- this.queryParams.startTime = '';
- this.queryParams.endTime = '';
- return;
- }
+ // 鑾峰彇寮傚父鏁版嵁
+ async abnormalData(obj) {
+ const res = await getAbnormalData(obj);
+ this.countExceptionProjectData = res.data;
+ },
- this.queryParams.startTime = timeMerge[0];
- this.queryParams.endTime = timeMerge[1];
- },
- handleQuery() {
- console.log(queryParams);
- const obj = {
- startDate: queryParams.startTime,
- endDate: queryParams.endTime,
- areaCode: queryParams.area,
- minInvestment: queryParams.start,
- maxInvestment: queryParams.end
- };
+ //鍦板浘璇︽儏
+ showDetails(row) {
+ console.log(row);
+ },
- this.getCalculatioln(obj).then((res) => {
- const arr = res.data.proPhaseCountVO?.concat(res.data.impTypeCountVO);
- const newArr = arr.map((item) => ({
- text: item.text,
- mun: item.count,
- statistics: item.type,
- statisticsMun: item.amount
- }));
+ labelStyleChange(currentLabel) {
+ if (lastLabel) {
+ lastLabel.setBackgroundColor("#fff");
+ lastLabel.setFontColor("var(--el-color-primary)");
+ }
+ currentLabel.setBackgroundColor("var(--el-color-primary)");
+ currentLabel.setFontColor("#fff");
+ lastLabel = currentLabel;
+ },
+ resetQuery() {
+ this.queryParams = {
+ area: "",
+ start: "",
+ end: "",
+ startTime: "",
+ endTime: "",
+ };
+ this.timeMerge = [];
+ this.handleQuery();
+ },
- // 鍒涘缓涓�涓璞★紝浠ヤ究鏍规嵁 text 灞炴�у揩閫熸煡鎵� newArr 涓殑瀵硅薄
- const newArrLookup = newArr.reduce((lookup, item) => {
- lookup[item.text] = item;
- return lookup;
- }, {});
-
- // 鏇存柊 calculation 鏁扮粍锛屼繚鎸佸叾鍘熷椤哄簭
- calculation.value = calculation.value.map((item) => {
- const newItem = newArrLookup[item.text];
- return newItem ? newItem : item; // 濡傛灉 newItem 瀛樺湪锛屽垯杩斿洖 newItem锛屽惁鍒欒繑鍥炲師濮� item
- });
- });
-
- abnormalData(obj);
- },
-
- // 鑾峰彇寮傚父鏁版嵁
- async abnormalData(obj) {
- const res = await getAbnormalData(obj);
- this.countExceptionProjectData = res.data;
- },
-
- //鍦板浘璇︽儏
- showDetails(row) {
- console.log(row);
- },
-
- labelStyleChange(currentLabel) {
- if (lastLabel) {
- lastLabel.setBackgroundColor('#fff');
- lastLabel.setFontColor('var(--el-color-primary)');
- }
- currentLabel.setBackgroundColor('var(--el-color-primary)');
- currentLabel.setFontColor('#fff');
- lastLabel = currentLabel;
- },
- resetQuery() {
- this.queryParams = {
- area: '',
- start: '',
- end: '',
- startTime: '',
- endTime: ''
- };
- this.timeMerge = [];
- this.handleQuery();
- },
-
- // 鍦板浘鎼滅储
- async searchList() {
- // await search()
- this.mapRef.moveTo(105.37281, 30.87145);
- },
- mapQuery() {
-
- }
- }
-}
+ // 鍦板浘鎼滅储
+ async searchList() {
+ // await search()
+ this.mapRef.moveTo(105.37281, 30.87145);
+ },
+ mapQuery() {},
+ },
+};
</script>
<style scoped lang="scss">
.home {
- padding: 10px;
- background-color: #f3f7fc;
- min-height: calc(100vh - 85px);
- overflow-x: auto;
+ padding: 10px;
+ background-color: #f3f7fc;
+ min-height: calc(100vh - 85px);
+ overflow-x: auto;
- .overview {
- padding: 10px 0 0 10px;
- height: 280px;
- min-width: 1600px;
- background-color: #fff;
- border-radius: 6px;
+ .overview {
+ padding: 10px 0 0 10px;
+ height: 280px;
+ min-width: 1600px;
+ background-color: #fff;
+ border-radius: 6px;
- .overview-top {
- display: flex;
- justify-content: space-between;
+ .overview-top {
+ display: flex;
+ justify-content: space-between;
- .title {
- font-size: 16px;
- }
+ .title {
+ font-size: 16px;
+ }
- .qurey {
- font-size: 12px;
- font-weight: 100;
- }
- }
+ .qurey {
+ font-size: 12px;
+ font-weight: 100;
+ }
}
+ }
- .search-form {
- display: flex;
- justify-content: flex-end;
- }
+ .search-form {
+ display: flex;
+ justify-content: flex-end;
+ }
}
// ::v-deep .el-form-item {
// display: inline-block !important;
// margin-right: 10px;
// }
::v-deep .el-form-item--medium .el-form-item__content {
- display: inline-block !important;
+ display: inline-block !important;
}
::v-deep .el-form-item__label {
- font-size: 12px;
- font-weight: 400;
+ font-size: 12px;
+ font-weight: 400;
}
::v-deep .el-button {
- font-size: 12px;
+ font-size: 12px;
}
::v-deep.el-input__inner {
- font-size: 12px;
- height: 32px;
+ font-size: 12px;
+ height: 32px;
}
::v-deep.el-range-input {
- font-size: 12px;
+ font-size: 12px;
}
::v-deep.el-select__placeholder {
- font-size: 12px;
+ font-size: 12px;
}
-::v-deep input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
- -webkit-appearance: none;
- margin: 0;
+::v-deep input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
}
-input[type='number'] {
- -moz-appearance: textfield;
+input[type="number"] {
+ -moz-appearance: textfield;
}
.search_from {
- display: flex;
- justify-self: justify-end;
- gap: 10px;
+ display: flex;
+ justify-self: justify-end;
+ gap: 10px;
}
.flex {
- display: flex;
- gap: 2%;
+ display: flex;
+ gap: 2%;
}
.flex_card {
- width: 49%;
- margin: 10px 0px;
+ width: 49%;
+ margin: 10px 0px;
}
.from_input {
- display: flex;
- gap: 10px;
- font-size: 12px;
+ display: flex;
+ gap: 10px;
+ font-size: 12px;
}
</style>
--
Gitblit v1.8.0