From e176ec0f4e2e35342bef6c909786c31d7fd8316f Mon Sep 17 00:00:00 2001
From: zh <314079846@qq.com>
Date: 星期一, 25 十一月 2024 10:07:03 +0800
Subject: [PATCH] 首頁
---
src/views/index.vue | 603 +++++++++++----------
src/api/login.js | 19
src/views/components/Map/index.vue | 916 ++++++++++++++++----------------
src/views/components/tidingsTable.vue | 2
src/views/components/projectOverview.vue | 79 ++
5 files changed, 850 insertions(+), 769 deletions(-)
diff --git a/src/api/login.js b/src/api/login.js
index 7b7388f..ead6dd7 100644
--- a/src/api/login.js
+++ b/src/api/login.js
@@ -57,4 +57,21 @@
method: 'get',
timeout: 20000
})
-}
\ No newline at end of file
+}
+
+export function getCalculatioln(data) {
+ return request({
+ url: '/count',
+ method: 'post',
+ data: data
+ });
+}
+
+// 鑾峰彇寮傚父鏁版嵁缁熻
+export function getAbnormalData(query) {
+ return request({
+ url: '/countExceptionProject',
+ method: 'get',
+ params: query
+ });
+}
diff --git a/src/views/components/Map/index.vue b/src/views/components/Map/index.vue
index 8a2312c..38f61f6 100644
--- a/src/views/components/Map/index.vue
+++ b/src/views/components/Map/index.vue
@@ -1,37 +1,35 @@
<template>
- <div>
- <div :id="id" ref="contentRef" class="w-full h-full">
- <div
- v-if="isShowControl"
- :class="controlPosition"
- class="control-container bottom-right"
- >
+ <div :id="id" ref="contentRef" style="height: 100%; width: 100%">
<div
- v-for="item in controlMapping"
- :key="item.id"
- class="control-content"
+ v-if="isShowControl"
+ :class="controlPosition"
+ class="control-container bottom-right"
>
- <template v-if="item.children">
<div
- v-for="child in item.children"
- :key="child.id"
- class="control-item"
- @click="child.event"
+ v-for="item in controlMapping"
+ :key="item.id"
+ class="control-content"
>
- <img :src="child.img" />
+ <template v-if="item.children">
+ <div
+ v-for="child in item.children"
+ :key="child.id"
+ class="control-item"
+ @click="child.event"
+ >
+ <img :src="child.img" />
+ </div>
+ </template>
+ <template v-else>
+ <div class="control-item" @click="item.event">
+ <img :src="item.img" />
+ </div>
+ </template>
</div>
- </template>
- <template v-else>
- <div class="control-item" @click="item.event">
- <img :src="item.img" />
- </div>
- </template>
</div>
- </div>
</div>
- </div>
</template>
-<script setup>
+<script>
import Location from "@/assets/images/location.png";
import FileImg from "@/assets/images/file1.png";
import MinusImg from "@/assets/images/minus.png";
@@ -39,220 +37,221 @@
import FullScreenImg from "@/assets/images/fullScreen.png";
import PositionImg from "@/assets/images/position.png";
export default {
- data() {
- return {
- zoom: 15,
- map: null,
- contentRef: {},
- infoWin: {},
- defaultMaskInfo: {},
- mapKey: "ffb871cd7ca48883db3b04cfd00d469f",
- controlMapping: [
- {
- id: "瀹氫綅",
- img: PositionImg,
- event: this.getCurrentPosition,
- },
- {
- id: "缂╂斁",
- children: [
- {
- id: "鏀惧ぇ",
- img: PlusImg,
- event: this.zoomIn,
- },
- {
- id: "缂╁皬",
- img: MinusImg,
- event: this.zoomOut,
- },
- ],
- },
- {
- id: "鍏ㄥ睆",
- img: FullScreenImg,
- event: this.fullScreen,
- },
- ],
- };
- },
- props: {
- id: String,
- mapList: Array,
- listType: Boolean,
- isShowControl: Boolean,
- controlPosition: Object,
- isImmediateLoad: { type: Boolean, default: true },
- mapType: Boolean,
- },
-
- created() {
- this.defaultMaskInfo = {
- lon: this.$props.mapList[0]?.lon
- ? this.$props.mapList[0].lon
- : "105.37281",
- lat: this.$props.mapList[0]?.lat
- ? this.$props.mapList[0].lat
- : "30.87145",
- name: this.$props.mapList[0]?.name ? this.$props.mapList[0].name : "鍒涘缓",
- };
- if (this.$props.isImmediateLoad) this.onLoad();
- },
- methods: {
- async onLoad() {
- const scripts = document.body.querySelectorAll("script");
- if (!this.mapKey) {
- // const res = await getDicts('map_key')
- // mapKey = res[0].dictLabel
- this.mapKey = "ffb871cd7ca48883db3b04cfd00d469f";
- }
-
- const scriptSrc = `http://api.tianditu.gov.cn/api?v=4.0&tk=${this.mapKey}`;
- const mapScript = Array.from(scripts).find((item) => {
- return item.getAttribute("src") === scriptSrc;
- });
-
- if (!mapScript) {
- // 鍒涘缓script鏍囩
- const script = document.createElement("script");
- // 璁剧疆API鐨刄RL
- script.src = scriptSrc;
- script.type = "text/javascript";
- // 灏唖cript鏍囩娣诲姞鍒癏TML涓�
- document.body.appendChild(script);
- script.onload = () => {
- this.initTianMap();
+ data() {
+ return {
+ zoom: 15,
+ map: null,
+ contentRef: {},
+ infoWin: {},
+ defaultMaskInfo: {},
+ mapKey: "ffb871cd7ca48883db3b04cfd00d469f",
+ controlMapping: [
+ {
+ id: "瀹氫綅",
+ img: PositionImg,
+ event: this.getCurrentPosition,
+ },
+ {
+ id: "缂╂斁",
+ children: [
+ {
+ id: "鏀惧ぇ",
+ img: PlusImg,
+ event: this.zoomIn,
+ },
+ {
+ id: "缂╁皬",
+ img: MinusImg,
+ event: this.zoomOut,
+ },
+ ],
+ },
+ {
+ id: "鍏ㄥ睆",
+ img: FullScreenImg,
+ event: this.fullScreen,
+ },
+ ],
};
- } else {
- this.initTianMap();
- }
+ },
+ props: {
+ id: String,
+ mapList: Array,
+ listType: Boolean,
+ isShowControl: Boolean,
+ controlPosition: Object,
+ isImmediateLoad: { type: Boolean, default: true },
+ mapType: Boolean,
},
- initTianMap() {
- var T = window.T;
- setTimeout(async () => {
- this.map = new T.Map(this.id, {
- projection: "EPSG:4326",
- });
- this.map.centerAndZoom(
- new T.LngLat(this.defaultMaskInfo.lon, this.defaultMaskInfo.lat),
- this.zoom
- );
- if (!this.$props.listType) {
- // 娓呴櫎涔嬪墠鐨勬爣璁�
- // map && map.clearOverLays()
- //form琛ㄥ崟涓槸鍚︽湁鍧愭爣锛屾湁鍒欏畾浣嶅埌瀵瑰簲浣嶇疆锛屾病鏈夊垯浣跨敤榛樿鐨�
- // 104.65417 28.75572 娴嬭瘯鏁版嵁
- // 鍥涘窛鐪佸疁瀹惧競缈犲睆鍖哄ぇ瑙傛ゼ琛楅亾澶栧崡琛�71
- if (this.$props.mapList[0].addr) {
- const { lng: lon, lat } = await this.getGeocode(
- this.$props.mapList[0].addr
- );
- this.defaultMaskInfo.lon = String(lon);
- this.defaultMaskInfo.lat = String(lat);
- }
-
- this.map && this.makeDefaultMask(this.defaultMaskInfo);
- this.addEvent(this.map, "click", (e) => this.mapClick(e));
- } else {
- this.$props.mapList.length && this.makeAllMask(this.$props.mapList);
- }
- }, 0);
+ created() {
+ this.defaultMaskInfo = {
+ lon: this.$props.mapList[0]?.lon
+ ? this.$props.mapList[0].lon
+ : "105.37281",
+ lat: this.$props.mapList[0]?.lat
+ ? this.$props.mapList[0].lat
+ : "30.87145",
+ name: this.$props.mapList[0]?.name ? this.$props.mapList[0].name : "鍒涘缓",
+ };
+ if (this.$props.isImmediateLoad) this.onLoad();
},
+ methods: {
+ async onLoad() {
+ const scripts = document.body.querySelectorAll("script");
+ if (!this.mapKey) {
+ // const res = await getDicts('map_key')
+ // mapKey = res[0].dictLabel
+ this.mapKey = "ffb871cd7ca48883db3b04cfd00d469f";
+ }
- zoomIn() {
- this.map && this.map.zoomIn();
- },
+ const scriptSrc = `http://api.tianditu.gov.cn/api?v=4.0&tk=${this.mapKey}`;
+ const mapScript = Array.from(scripts).find((item) => {
+ return item.getAttribute("src") === scriptSrc;
+ });
- zoomOut() {
- this.map && this.map.zoomOut();
- },
+ if (!mapScript) {
+ // 鍒涘缓script鏍囩
+ const script = document.createElement("script");
+ // 璁剧疆API鐨刄RL
+ script.src = scriptSrc;
+ script.type = "text/javascript";
+ // 灏唖cript鏍囩娣诲姞鍒癏TML涓�
+ document.body.appendChild(script);
+ script.onload = () => {
+ this.initTianMap();
+ };
+ } else {
+ this.initTianMap();
+ }
+ },
- fullScreen() {
- this.map && this.contentRef?.requestFullscreen();
- },
+ initTianMap() {
+ var T = window.T;
+ setTimeout(async () => {
+ // this.map = new T.Map(this.id, {
+ // projection: "EPSG:4326",
+ // });
+ this.map = new T.Map(this.id);
+ this.map.centerAndZoom(
+ new T.LngLat(this.defaultMaskInfo.lon, this.defaultMaskInfo.lat),
+ this.zoom
+ );
+ if (!this.$props.listType) {
+ // 娓呴櫎涔嬪墠鐨勬爣璁�
+ // map && map.clearOverLays()
+ //form琛ㄥ崟涓槸鍚︽湁鍧愭爣锛屾湁鍒欏畾浣嶅埌瀵瑰簲浣嶇疆锛屾病鏈夊垯浣跨敤榛樿鐨�
+ // 104.65417 28.75572 娴嬭瘯鏁版嵁
+ // 鍥涘窛鐪佸疁瀹惧競缈犲睆鍖哄ぇ瑙傛ゼ琛楅亾澶栧崡琛�71
+ if (this.$props.mapList[0].addr) {
+ const { lng: lon, lat } = await this.getGeocode(
+ this.$props.mapList[0].addr
+ );
+ this.defaultMaskInfo.lon = String(lon);
+ this.defaultMaskInfo.lat = String(lat);
+ }
- getCurrentPosition() {
- if (navigator.geolocation) {
- ElMessage.warning("璇ュ姛鑳芥殏鏈紑鍙�");
- // TODO 鍦板浘瀹氫綅
- // navigator.geolocation.getCurrentPosition(function (position) {
- // var latitude = position.coords.latitude
- // var longitude = position.coords.longitude
- //
- // moveTo(String(longitude), String(latitude))
- // })
- } else {
- ElMessage.warning("褰撳墠娴忚鍣ㄤ笉鏀寔瀹氫綅鍔熻兘");
- }
- },
+ this.map && this.makeDefaultMask(this.defaultMaskInfo);
+ this.addEvent(this.map, "click", (e) => this.mapClick(e));
+ } else {
+ this.$props.mapList.length && this.makeAllMask(this.$props.mapList);
+ }
+ }, 1500);
+ },
- moveTo(lon, lat) {
- this.map && this.map.panTo(new T.LngLat(lon, lat));
- },
+ zoomIn() {
+ this.map && this.map.zoomIn();
+ },
- // 榛樿鐨勭偣鏍囪
- makeDefaultMask(mapInfo) {
- const { name, lon, lat } = mapInfo
- const option = {
- text: name,
- offset: [-35, -45],
- labelBg: "#3369FF",
- labelColor: "#fff",
- labelClick,
- };
- // 娓呴櫎涔嬪墠鐨勬爣璁�
- this.map && this.map.clearOverLays();
- this.map.panTo(new T.LngLat(lon, lat));
- this.makeMask(lon, lat, { labelOptions: option });
- },
+ zoomOut() {
+ this.map && this.map.zoomOut();
+ },
- // 鍦板浘鐐瑰嚮浜嬩欢
- mapClick(e) {
- e.originalEvent.stopPropagation();
+ fullScreen() {
+ this.map && this.contentRef?.requestFullscreen();
+ },
- const { lat, lng: lon } = e.lnglat;
+ getCurrentPosition() {
+ if (navigator.geolocation) {
+ ElMessage.warning("璇ュ姛鑳芥殏鏈紑鍙�");
+ // TODO 鍦板浘瀹氫綅
+ // navigator.geolocation.getCurrentPosition(function (position) {
+ // var latitude = position.coords.latitude
+ // var longitude = position.coords.longitude
+ //
+ // moveTo(String(longitude), String(latitude))
+ // })
+ } else {
+ ElMessage.warning("褰撳墠娴忚鍣ㄤ笉鏀寔瀹氫綅鍔熻兘");
+ }
+ },
- this.makeDefaultMask({
- ...defaultMaskInfo,
- lon: String(lon),
- lat: String(lat),
- });
- this.getReverseGeocode(e).then((addr) => {
- this.$emit("mapClick", { e, addr });
- });
- console.log("鐐瑰嚮浜嬩欢", e);
- },
+ moveTo(lon, lat) {
+ this.map && this.map.panTo(new T.LngLat(lon, lat));
+ },
- // 閫嗗湴鐞嗙紪鐮� 鑾峰彇鍦板潃
- getReverseGeocode(e) {
- return new Promise((resolve) => {
- const geocode = new T.Geocoder();
- geocode.getLocation(e.lnglat, (result) => {
- if (result.status === "0") {
- resolve(result.getAddress());
- }
- });
- });
- },
+ // 榛樿鐨勭偣鏍囪
+ makeDefaultMask(mapInfo) {
+ const { name, lon, lat } = mapInfo
+ const option = {
+ text: name,
+ offset: [-35, -45],
+ labelBg: "#3369FF",
+ labelColor: "#fff",
+ labelClick,
+ };
+ // 娓呴櫎涔嬪墠鐨勬爣璁�
+ this.map && this.map.clearOverLays();
+ this.map.panTo(new T.LngLat(lon, lat));
+ this.makeMask(lon, lat, { labelOptions: option });
+ },
- // 鍦扮悊缂栫爜
- getGeocode(addr) {
- return new Promise((resolve) => {
- const geocoder = new T.Geocoder();
- geocoder.getPoint(addr, (result) => {
- if (result.status === "0") {
- resolve(result.getLocationPoint());
- }
- });
- });
- },
+ // 鍦板浘鐐瑰嚮浜嬩欢
+ mapClick(e) {
+ e.originalEvent.stopPropagation();
- // 鐢熸垚鐐逛綅鍐呭
- // 鐢熸垚鐐逛綅鍐呭
- generateContent(row, random) {
- if (row) {
- return `
+ const { lat, lng: lon } = e.lnglat;
+
+ this.makeDefaultMask({
+ ...defaultMaskInfo,
+ lon: String(lon),
+ lat: String(lat),
+ });
+ this.getReverseGeocode(e).then((addr) => {
+ this.$emit("mapClick", { e, addr });
+ });
+ console.log("鐐瑰嚮浜嬩欢", e);
+ },
+
+ // 閫嗗湴鐞嗙紪鐮� 鑾峰彇鍦板潃
+ getReverseGeocode(e) {
+ return new Promise((resolve) => {
+ const geocode = new T.Geocoder();
+ geocode.getLocation(e.lnglat, (result) => {
+ if (result.status === "0") {
+ resolve(result.getAddress());
+ }
+ });
+ });
+ },
+
+ // 鍦扮悊缂栫爜
+ getGeocode(addr) {
+ return new Promise((resolve) => {
+ const geocoder = new T.Geocoder();
+ geocoder.getPoint(addr, (result) => {
+ if (result.status === "0") {
+ resolve(result.getLocationPoint());
+ }
+ });
+ });
+ },
+
+ // 鐢熸垚鐐逛綅鍐呭
+ // 鐢熸垚鐐逛綅鍐呭
+ generateContent(row, random) {
+ if (row) {
+ return `
<div class="map-window-info">
<div class='title-block'>
<div class="title truncate-content">
@@ -263,9 +262,8 @@
</div>
</div>
<div class="detail-info">
- <span class="truncate-content">鎬绘姇璧勶細${
- row.totalMoney ?? "鏆傛棤鏁版嵁"
- }</span>
+ <span class="truncate-content">鎬绘姇璧勶細${row.totalMoney ?? "鏆傛棤鏁版嵁"
+ }</span>
<span class="truncate-content">
椤圭洰鐘舵�侊細
</span>
@@ -274,184 +272,186 @@
</span>
</div>
</div>`;
- } else {
- return `<div style="display: flex; justify-content:center; align-items:center; opacity: 0;">
+ } else {
+ return `<div style="display: flex; justify-content:center; align-items:center; opacity: 0;">
</div>`;
- }
+ }
+ },
+
+ // 鍞竴鏍囪瘑
+ getUniqueId() {
+ return Math.random().toString(36).substr(2) + Date.now();
+ },
+
+ markerMouseover(_e, infoWin, info, random) {
+ // 鐐逛綅鏍囪绉诲叆鏄剧ず涓嶅悓鍐呭
+ if (this.$props.isShowControl) {
+ infoWin.setContent(this.generateContent(info, random));
+ const contentWrapper = document.querySelector(
+ ".tdt-infowindow-content-wrapper"
+ );
+ if (contentWrapper) {
+ contentWrapper.style.opacity = "1";
+ }
+ // 鏌ユ壘鍒伴偅涓猧nfo 鐣岄潰
+ // const allCloseBtn = document.querySelectorAll(`.close-btn-${random}`);
+ // allCloseBtn[allCloseBtn.length - 1].onclick = (_e) => {
+ // infoWin.setContent(generateContent());
+ // };
+ }
+ },
+
+ markerMouseout(_e, infoWin) {
+ infoWin.setContent(this.generateContent());
+ const contentWrapper = document.querySelector(
+ ".tdt-infowindow-content-wrapper"
+ );
+ if (contentWrapper) {
+ contentWrapper.style.opacity = "0";
+ }
+ },
+
+ // 鎵撴爣璁�
+ makeMask(lon, lat, options) {
+
+ const { markerOptions, labelOptions } = options;
+ console.log("options", markerOptions, labelOptions);
+ const icon = new T.Icon({
+ iconUrl: Location,
+ iconSize: new T.Point(19, 27),
+ iconAnchor: new T.Point(10, 25),
+ });
+ var marker = new T.Marker(new T.LngLat(lon, lat), {
+ icon,
+ id: markerOptions?.id,
+ });
+
+ this.map && this.map.addOverLay(marker);
+ const label = new T.Label({
+ text: labelOptions.text,
+ position: new T.LngLat(lon, lat),
+ offset: new T.Point(...labelOptions.offset),
+ id: labelOptions?.id,
+ });
+
+ labelOptions.labelBg && label.setBackgroundColor(labelOptions.labelBg);
+ labelOptions.labelColor && label.setFontColor(labelOptions.labelColor);
+ //鍒涘缓鍦板浘鏂囨湰瀵硅薄
+ if (!this.$props.mapType) {
+ this.map && this.map.addOverLay(label);
+ }
+ markerOptions?.markerClick &&
+ this.addEvent(marker, "click", (e) => markerOptions.markerClick(label, e));
+ labelOptions?.labelClick &&
+ this.addEvent(label, "click", (e) => labelOptions.labelClick(label, e));
+
+ const lnglat = new T.LngLat(lon, lat);
+ const infoWin = new T.InfoWindow(this.generateContent(), {
+ id: markerOptions?.id,
+ offset: new T.Point(0, -15),
+ closeButton: false,
+ });
+
+ infoWin.setLngLat(lnglat);
+ // 鍚戝湴鍥句笂娣诲姞淇℃伅绐楀彛
+ if (this.$props.mapType) {
+ this.map && this.map.addOverLay(infoWin);
+ }
+
+ this.addEvent(marker, "mouseover", (e) =>
+ markerMouseover(e, infoWin, labelOptions, getUniqueId())
+ );
+ this.addEvent(marker, "mouseout", (e) => markerMouseout(e, infoWin));
+ },
+
+ // 鏍囪鎵�鏈夌偣
+ makeAllMask(mapList) {
+ var _this = this;
+ this.mapList.map((item) => {
+ const config = {
+ markerOptions: {
+ id: item.id,
+ markerClick: _this.markerClick,
+ },
+ labelOptions: {
+ text: item.name,
+ offset: [-45, -45],
+ id: item.id,
+ markerClick: _this.labelClick,
+ },
+ };
+ _this.makeMask(item.lon, item.lat, config);
+ });
+ },
+
+ // 閫氱敤娣诲姞浜嬩欢鐨勬柟娉�
+ addEvent(component, name, func) {
+ // 绉诲嚭浜嬩欢
+ this.removeEvent(component, name, func);
+ // 娣诲姞浜嬩欢
+ component.addEventListener(name, func);
+ },
+
+ // 閫氱敤绉诲嚭浜嬩欢鐨勬柟娉�
+ removeEvent(component, name, func) {
+ component.removeEventListener(name, func);
+ },
+
+ //鏍囪鐐瑰嚮浜嬩欢
+ markerClick(currentLabel, e) {
+ const id = e.target.options.id;
+ currentLabelStyleChange(currentLabel);
+ console.log("鐐瑰嚮浜嬩欢", e, currentLabel);
+ this.getReverseGeocode(e).then((addr) => {
+ this.$emit(
+ "markClick",
+ id
+ ? this.$props.mapList?.find((item) => item.id === id)
+ : { e, addr: addr }
+ );
+ });
+ },
+
+ // label鐐瑰嚮浜嬩欢
+ labelClick(currentLabel, e) {
+ const id = e.target.options.id;
+ currentLabelStyleChange(currentLabel);
+ getReverseGeocode(e).then((addr) => {
+ this.$emit(
+ "labelClick",
+ id
+ ? this.$props.mapList?.find((item) => {
+ return String(item.id) === String(id);
+ })
+ : { e, addr: addr }
+ );
+ });
+ },
+
+ currentLabelStyleChange(currentLabel) {
+ this.$emit("currentLabelStyleChange", currentLabel);
+ },
+
+ resizeMap() {
+ this.map.checkResize();
+ },
},
-
- // 鍞竴鏍囪瘑
- getUniqueId() {
- return Math.random().toString(36).substr(2) + Date.now();
+ watch: {
+ listType: {
+ handler(val) {
+ if (val) {
+ this.map && this.map.clearOverLays();
+ if (this.$props.mapList.length && T) {
+ this.makeAllMask(this.$props.mapList);
+ }
+ }
+ },
+ },
},
-
- markerMouseover(_e, infoWin, info, random) {
- // 鐐逛綅鏍囪绉诲叆鏄剧ず涓嶅悓鍐呭
- if (this.$props.isShowControl) {
- infoWin.setContent(this.generateContent(info, random));
- const contentWrapper = document.querySelector(
- ".tdt-infowindow-content-wrapper"
- );
- if (contentWrapper) {
- contentWrapper.style.opacity = "1";
- }
- // 鏌ユ壘鍒伴偅涓猧nfo 鐣岄潰
- // const allCloseBtn = document.querySelectorAll(`.close-btn-${random}`);
- // allCloseBtn[allCloseBtn.length - 1].onclick = (_e) => {
- // infoWin.setContent(generateContent());
- // };
- }
+ beforeUnmount() {
+ this.map = null;
},
-
- markerMouseout(_e, infoWin) {
- infoWin.setContent(this.generateContent());
- const contentWrapper = document.querySelector(
- ".tdt-infowindow-content-wrapper"
- );
- if (contentWrapper) {
- contentWrapper.style.opacity = "0";
- }
- },
-
- // 鎵撴爣璁�
- makeMask(lon, lat, options) {
- const { markerOptions, labelOptions } = options;
- console.log("options", markerOptions, labelOptions);
- const icon = new T.Icon({
- iconUrl: Location,
- iconSize: new T.Point(19, 27),
- iconAnchor: new T.Point(10, 25),
- });
- var marker = new T.Marker(new T.LngLat(lon, lat), {
- icon,
- id: markerOptions?.id,
- });
- this.map && this.map.addOverLay(marker);
- const label = new T.Label({
- text: labelOptions.text,
- position: new T.LngLat(lon, lat),
- offset: new T.Point(...labelOptions.offset),
- id: labelOptions?.id,
- });
-
- labelOptions.labelBg && label.setBackgroundColor(labelOptions.labelBg);
- labelOptions.labelColor && label.setFontColor(labelOptions.labelColor);
- //鍒涘缓鍦板浘鏂囨湰瀵硅薄
- if (!this.$props.mapType) {
- this.map && this.map.addOverLay(label);
- }
- markerOptions?.markerClick &&
- this.addEvent(marker, "click", (e) => markerOptions.markerClick(label, e));
- labelOptions?.labelClick &&
- this.addEvent(label, "click", (e) => labelOptions.labelClick(label, e));
-
- const lnglat = new T.LngLat(lon, lat);
- const infoWin = new T.InfoWindow(this.generateContent(), {
- id: markerOptions?.id,
- offset: new T.Point(0, -15),
- closeButton: false,
- });
-
- infoWin.setLngLat(lnglat);
- // 鍚戝湴鍥句笂娣诲姞淇℃伅绐楀彛
- if (this.$props.mapType) {
- this.map && this.map.addOverLay(infoWin);
- }
-
- this.addEvent(marker, "mouseover", (e) =>
- markerMouseover(e, infoWin, labelOptions, getUniqueId())
- );
- this.addEvent(marker, "mouseout", (e) => markerMouseout(e, infoWin));
- },
-
- // 鏍囪鎵�鏈夌偣
- makeAllMask(mapList) {
- var _this = this;
- this.mapList.map((item) => {
- const config = {
- markerOptions: {
- id: item.id,
- markerClick: _this.markerClick,
- },
- labelOptions: {
- text: item.name,
- offset: [-45, -45],
- id: item.id,
- markerClick: _this.labelClick,
- },
- };
- _this.makeMask(item.lon, item.lat, config);
- });
- },
-
- // 閫氱敤娣诲姞浜嬩欢鐨勬柟娉�
- addEvent(component, name, func) {
- // 绉诲嚭浜嬩欢
- this.removeEvent(component, name, func);
- // 娣诲姞浜嬩欢
- component.addEventListener(name, func);
- },
-
- // 閫氱敤绉诲嚭浜嬩欢鐨勬柟娉�
- removeEvent(component, name, func) {
- component.removeEventListener(name, func);
- },
-
- //鏍囪鐐瑰嚮浜嬩欢
- markerClick(currentLabel, e) {
- const id = e.target.options.id;
- currentLabelStyleChange(currentLabel);
- console.log("鐐瑰嚮浜嬩欢", e, currentLabel);
- this.getReverseGeocode(e).then((addr) => {
- this.$emit(
- "markClick",
- id
- ? this.$props.mapList?.find((item) => item.id === id)
- : { e, addr: addr }
- );
- });
- },
-
- // label鐐瑰嚮浜嬩欢
- labelClick(currentLabel, e) {
- const id = e.target.options.id;
- currentLabelStyleChange(currentLabel);
- getReverseGeocode(e).then((addr) => {
- this.$emit(
- "labelClick",
- id
- ? this.$props.mapList?.find((item) => {
- return String(item.id) === String(id);
- })
- : { e, addr: addr }
- );
- });
- },
-
- currentLabelStyleChange(currentLabel) {
- this.$emit("currentLabelStyleChange", currentLabel);
- },
-
- resizeMap() {
- this.map.checkResize();
- },
- },
- watch: {
- listType: {
- handler(val) {
- if (val) {
- this.map && this.map.clearOverLays();
- if (this.$props.mapList.length && T) {
- this.makeAllMask(this.$props.mapList);
- }
- }
- },
- },
- },
- beforeUnmount() {
- this.map = null;
- },
};
// const emits = defineEmits<{
@@ -463,112 +463,112 @@
</script>
<style lang="scss" scoped>
:deep(.tdt-label) {
- border-radius: 15px;
- color: var(--el-color-primary);
- cursor: pointer;
+ border-radius: 15px;
+ color: var(--el-color-primary);
+ cursor: pointer;
}
// #53547f
:deep(.tdt-bar a, .tdt-bar a:hover) {
- border-bottom: 0;
- color: #53547f;
+ border-bottom: 0;
+ color: #53547f;
}
:deep(.tdt-touch .tdt-control-zoom-in) {
- font-size: 18px;
+ font-size: 18px;
}
:deep(.tdt-bar) {
- border-radius: 3px;
- box-shadow: 5px 0px 12px 0px rgb(0 0 0 / 0.03);
+ border-radius: 3px;
+ box-shadow: 5px 0px 12px 0px rgb(0 0 0 / 0.03);
}
.tdt-bar a.tdt-disabled,
.tdt-bar a:hover {
- background-color: #f4f4f4;
+ background-color: #f4f4f4;
}
.control-container {
- position: absolute;
- display: flex;
- flex-direction: column;
- gap: 10px;
- z-index: 999;
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ z-index: 999;
}
.top-left {
- top: 10px;
- left: 10px;
+ top: 10px;
+ left: 10px;
}
.top-right {
- top: 10px;
- right: 10px;
+ top: 10px;
+ right: 10px;
}
.bottom-left {
- bottom: 10px;
- left: 10px;
+ bottom: 10px;
+ left: 10px;
}
.bottom-right {
- bottom: 10px;
- right: 10px;
+ bottom: 10px;
+ right: 10px;
}
.control-content {
- border-radius: 3px;
- box-shadow: 5px 0px 12px 0px rgb(0 0 0 / 0.03);
- background-color: #fff;
+ border-radius: 3px;
+ box-shadow: 5px 0px 12px 0px rgb(0 0 0 / 0.03);
+ background-color: #fff;
}
.control-item {
- box-sizing: border-box;
- width: 30px;
- height: 30px;
- line-height: 28px;
- padding: 0 9px;
+ box-sizing: border-box;
+ width: 30px;
+ height: 30px;
+ line-height: 28px;
+ padding: 0 9px;
- img {
- display: inline-block;
- }
+ img {
+ display: inline-block;
+ }
}
.control-item:hover {
- background-color: #f4f4f4;
+ background-color: #f4f4f4;
}
</style>
<style lang="scss">
.map-window-info {
- padding: 0 20px;
- width: 300px;
- cursor: default;
+ padding: 0 20px;
+ width: 300px;
+ cursor: default;
- .title {
- color: #3369ff;
- font-size: 18px;
- margin-bottom: 13px;
- }
+ .title {
+ color: #3369ff;
+ font-size: 18px;
+ margin-bottom: 13px;
+ }
- .detail-info {
- display: flex;
- flex-direction: column;
- color: #7e809c;
- font-size: 12px;
- gap: 8px;
- }
+ .detail-info {
+ display: flex;
+ flex-direction: column;
+ color: #7e809c;
+ font-size: 12px;
+ gap: 8px;
+ }
}
.title-block {
- display: flex;
- justify-content: space-between;
+ display: flex;
+ justify-content: space-between;
- .close-btn {
- font-size: 18px;
- color: #d8dde6;
- cursor: pointer;
- z-index: 999999;
- }
+ .close-btn {
+ font-size: 18px;
+ color: #d8dde6;
+ cursor: pointer;
+ z-index: 999999;
+ }
}
//.tdt-control-copyright {
@@ -576,10 +576,10 @@
//}
.tdt-infowindow-tip-container {
- opacity: 0;
+ opacity: 0;
}
.tdt-infowindow-content-wrapper {
- opacity: 0;
+ opacity: 0;
}
</style>
diff --git a/src/views/components/projectOverview.vue b/src/views/components/projectOverview.vue
index 0cb5697..3bda1ba 100644
--- a/src/views/components/projectOverview.vue
+++ b/src/views/components/projectOverview.vue
@@ -26,24 +26,24 @@
</div>
<div class="abnormal-img"></div>
</div>
- <div class="flex gap-[10px] ml-[10px] flex-wrap custom-min-width">
+ <div class="overview-div custom-min-width">
<div
v-for="i in calculation"
:key="i.text"
- :class="setbcStyle(i.text)"
+ :style="setbcStyle(i.text)"
class="listings"
@click="showDetail(i.text)"
>
- <div :class="setTextStyle(i.text)" class="title">
+ <div :style="setTextStyle(i.text)" class="title">
{{ i.text }}
</div>
<div class="conter">
- <div :class="setTextColor(i.text)" class="mun">
+ <div :style="setTextColor(i.text)" class="mun">
{{ i.mun }}
</div>
<div class="statistics">
<div>{{ i.statistics }}</div>
- <div :class="setTextColor(i.text)">
+ <div :style="setTextColor(i.text)">
{{ i.statisticsMun
}}<span style="font-size: 18px">浜�</span>
</div>
@@ -146,34 +146,58 @@
},
props: {
calculation: Array,
- countExceptionProjectData:Object,
+ countExceptionProjectData: Object,
+ },
+ watch: {
+ // calculation: {
+ // handler(val) {
+ // console.log("11111" + val);
+
+ // },
+ // },
+ // countExceptionProjectData: {
+ // handler(val) {
+ // console.log("22222" + val);
+
+ // },
+ // },
},
methods: {
setTextStyle(text) {
- if (text === '鍌�') return 'bg-[#3369FF]';
- if (text === '寤�') return 'bg-[#64ADFD]';
- if (text === '鐪�') return 'bg-[#FF5E57]';
- if (text === '甯�') return 'bg-[#FFA83F]';
- if (text === '鏂�') return 'bg-[#5DD1E5]';
- if (text === '绔�') return 'bg-[#576BF5]';
- if (text === '鍘�') return 'bg-[#3369FF]';
- if (text === '鏅�') return 'bg-[#64ADFD]';
+ if (text === '鍌�') return 'background-color:#3369FF';
+ if (text === '寤�') return 'background-color:#64ADFD';
+ if (text === '鐪�') return 'background-color:#FF5E57';
+ if (text === '甯�') return 'background-color:#FFA83F';
+ if (text === '鏂�') return 'background-color:#5DD1E5';
+ if (text === '绔�') return 'background-color:#576BF5';
+ if (text === '鍘�') return 'background-color:#3369FF';
+ if (text === '鏅�') return 'background-color:#64ADFD';
return '';
},
-
setTextColor(text) {
- if (text === '鍌�') return 'text-[#3369FF]';
- if (text === '寤�') return 'text-[#64ADFD]';
- if (text === '鐪�') return 'text-[#FF5E57]';
- if (text === '甯�') return 'text-[#FFA83F]';
- if (text === '鏂�') return 'text-[#5DD1E5]';
- if (text === '绔�') return 'text-[#576BF5]';
- if (text === '鍘�') return 'text-[#3369FF]';
- if (text === '鏅�') return 'text-[#64ADFD]';
+ if (text === '鍌�') return 'color:#3369FF';
+ if (text === '寤�') return 'color:#64ADFD';
+ if (text === '鐪�') return 'color:#FF5E57';
+ if (text === '甯�') return 'color:#FFA83F';
+ if (text === '鏂�') return 'color:#5DD1E5';
+ if (text === '绔�') return 'color:#576BF5';
+ if (text === '鍘�') return 'color:#3369FF';
+ if (text === '鏅�') return 'color:#64ADFD';
return '';
},
+ setbcStyle(text) {
+ if (text === '鍌�') return 'background-color:#EAF0FF';
+ if (text === '寤�') return 'background-color:#EFF7FF';
+ if (text === '鐪�') return 'background-color:#FEEEED';
+ if (text === '甯�') return 'background-color:#FFF6EB';
+ if (text === '鏂�') return 'background-color:#EEFAFC';
+ if (text === '绔�') return 'background-color:#EEF0FE';
+ if (text === '鍘�') return 'background-color:#EAF0FF';
+ if (text === '鏅�') return 'background-color:#EFF7FF';
+ return '';
+ },
// 璺宠浆鍒板紓甯搁」鐩�
showAbnormal() {
console.log('璺宠浆寮傚父椤圭洰');
@@ -304,5 +328,12 @@
}
}
}
-
+.overview-div {
+ min-width: 1250px;
+ width: 1250px;
+ gap: 10px;
+ flex-wrap: wrap;
+ display: flex;
+ margin-left: 10px;
+}
</style>
diff --git a/src/views/components/tidingsTable.vue b/src/views/components/tidingsTable.vue
index 8d2d659..8009d8e 100644
--- a/src/views/components/tidingsTable.vue
+++ b/src/views/components/tidingsTable.vue
@@ -137,7 +137,7 @@
async getMessageCountFun() {
const resp = await getMessageCount();
if (resp.code === 200) {
- this.tabs = tabs.map((tab) => {
+ this.tabs = this.tabs.map((tab) => {
if (tab.label === '瀹℃牳娑堟伅') {
tab.num = resp.data.auditCount;
}
diff --git a/src/views/index.vue b/src/views/index.vue
index 614cabe..b4cd025 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,130 +1,143 @@
<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 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>
- </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>
- </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"
+ <!-- 缁熻鎯呭喌 -->
+ <ProjectOverview
+ :calculation="calculation"
+ :countExceptionProjectData="countExceptionProjectData"
/>
- </div>
</div>
- </el-card>
+ <!-- 浠ｅ姙浜嬮」 -->
+ <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 style="margin-top: 10px">
+ <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="map_div">
+ <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>
- </div>
</template>
<script>
@@ -133,216 +146,236 @@
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';
export default {
- 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: "Index",
+ data() {
+ return {
+ queryParams: {},
+ timeMerge: [],
+ sys_administrative_divisions: [],
+ 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",
+ },
+ ],
+ 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' }
+ ]
+ };
+ },
+ components: {
+ SvgIcon,
+ ProjectOverview,
+ NoticeTable,
+ TidingsTable,
+ Map,
+ },
+ created() {
+ this.handleQuery()
+ },
+ methods: {
+ dataPickerChange(val) {
+ if (!val) {
+ this.queryParams.startTime = "";
+ this.queryParams.endTime = "";
+ return;
+ }
+
+ this.queryParams.startTime = this.timeMerge[0];
+ this.queryParams.endTime = this.timeMerge[1];
},
- {
- name: "xxxx",
- value: 105.22332,
- lat: 31.52421,
- lon: 106.22332,
- id: "11112",
+ handleQuery() {
+ console.log(this.queryParams);
+ const obj = {
+ startDate: this.queryParams.startTime,
+ endDate: this.queryParams.endTime,
+ areaCode: this.queryParams.area,
+ minInvestment: this.queryParams.start,
+ maxInvestment: this.queryParams.end,
+ };
+
+ 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 鏁扮粍锛屼繚鎸佸叾鍘熷椤哄簭
+ this.calculation = this.calculation.map((item) => {
+ const newItem = newArrLookup[item.text];
+ return newItem ? newItem : item; // 濡傛灉 newItem 瀛樺湪锛屽垯杩斿洖 newItem锛屽惁鍒欒繑鍥炲師濮� item
+ });
+
+ });
+
+ this.abnormalData(obj);
},
- ],
- };
- },
- 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];
+ // 鑾峰彇寮傚父鏁版嵁
+ 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() { },
},
- 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);
- },
-
- // 鑾峰彇寮傚父鏁版嵁
- 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() {},
- },
};
</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;
+}
+.map_div {
+ display: flex;
+ width: 100%;
+ height: 500px;
+ border: #dbdeea;
}
</style>
--
Gitblit v1.8.0