|
|
@@ -100,7 +100,7 @@
|
|
|
<div class="line-item">大暴雨</div>
|
|
|
<div class="line-item">特大暴雨</div>
|
|
|
</div>
|
|
|
- <div ref="lineRef" class="line2" @mousemove="handleMouseMove" @mouseup="handleMouseUp">
|
|
|
+ <div ref="lineRef" class="line2" @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseleave="handleMouseUp">
|
|
|
<div class="line-item"></div>
|
|
|
<div class="line-item"></div>
|
|
|
<div class="line-item"></div>
|
|
|
@@ -140,7 +140,7 @@
|
|
|
</div>
|
|
|
<div class="box">
|
|
|
<div class="text1">雨量范围</div>
|
|
|
- <div class="text2">25-50</div>
|
|
|
+ <div class="text2">{{ rainRange[0] }}-{{ rainRange[1] }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-box2">
|
|
|
@@ -189,8 +189,8 @@
|
|
|
<RainRank v-if="showMore" v-model="showMore" />
|
|
|
</template>
|
|
|
|
|
|
-<script lang="ts" setup>
|
|
|
-import { option6 } from './echartOptions';
|
|
|
+<script lang="ts" setup name="RainMonitor">
|
|
|
+import { option6 } from '../echartOptions';
|
|
|
import { graphic } from 'echarts';
|
|
|
import {
|
|
|
getRainfallRange1,
|
|
|
@@ -199,9 +199,11 @@ import {
|
|
|
getRainfallTownDataExport,
|
|
|
getRainfallTownNumCount
|
|
|
} from '@/api/globalMap/rainMonitor';
|
|
|
-import RainRank from '@/views/globalMap/RightMenu/RainRank.vue';
|
|
|
+import RainRank from '@/views/globalMap/RightMenu/RainMonitor/RainRank.vue';
|
|
|
import * as XLSX from 'xlsx';
|
|
|
import { getNextAreaInfo } from '@/api/common';
|
|
|
+import BigNumber from 'bignumber.js';
|
|
|
+import { useDebounce } from '@vueuse/core';
|
|
|
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
const { district_type } = toRefs<any>(proxy?.useDict('district_type'));
|
|
|
@@ -336,7 +338,7 @@ const handleShowMore = () => {
|
|
|
showMore.value = true;
|
|
|
};
|
|
|
// 影响分析
|
|
|
-const rainRange = reactive([25, 50]);
|
|
|
+const rainRange = reactive(['25', '50']);
|
|
|
const analyzeData = ref({
|
|
|
GDP: 0,
|
|
|
areaSize: 0,
|
|
|
@@ -344,8 +346,8 @@ const analyzeData = ref({
|
|
|
town_num: 0
|
|
|
});
|
|
|
const lineRef = ref();
|
|
|
-const startLeft = ref(351.5);
|
|
|
-const endLeft = ref(543.5);
|
|
|
+const startLeft = ref(384);
|
|
|
+const endLeft = ref(576);
|
|
|
const mouseStatus = reactive({
|
|
|
move: false,
|
|
|
type: '',
|
|
|
@@ -353,6 +355,7 @@ const mouseStatus = reactive({
|
|
|
left: 0
|
|
|
});
|
|
|
const handleMouseDown = (event, type) => {
|
|
|
+ event.preventDefault();
|
|
|
// 获取目标元素的边界框
|
|
|
const rect = lineRef.value.getBoundingClientRect();
|
|
|
// 获取鼠标位置
|
|
|
@@ -366,22 +369,22 @@ const handleMouseDown = (event, type) => {
|
|
|
} else {
|
|
|
mouseStatus.left = endLeft.value;
|
|
|
}
|
|
|
- console.log('按下', mouseStatus.downLeft);
|
|
|
};
|
|
|
const handleMouseMove = (event) => {
|
|
|
if (!mouseStatus.move) return;
|
|
|
+ event.preventDefault();
|
|
|
// 获取鼠标位置
|
|
|
const mouseX = event.clientX;
|
|
|
- console.log(mouseX);
|
|
|
let distance = mouseX - mouseStatus.downLeft;
|
|
|
- console.log(distance);
|
|
|
+ let value = mouseStatus.left + distance / containerScale().scaleX;
|
|
|
if (mouseStatus.type === 'start') {
|
|
|
- startLeft.value = mouseStatus.left + distance;
|
|
|
+ startLeft.value = value >= 0 ? value : 0;
|
|
|
} else {
|
|
|
- endLeft.value = mouseStatus.left + distance;
|
|
|
+ endLeft.value = value <= 1152 ? value : 1152;
|
|
|
}
|
|
|
};
|
|
|
-const handleMouseUp = () => {
|
|
|
+const handleMouseUp = (event) => {
|
|
|
+ event.preventDefault();
|
|
|
mouseStatus.move = false;
|
|
|
mouseStatus.type = '';
|
|
|
mouseStatus.downLeft = 0;
|
|
|
@@ -398,6 +401,36 @@ const getRainRange = () => {
|
|
|
analyzeData.value = res.rows[0];
|
|
|
});
|
|
|
};
|
|
|
+useDebounce(getRainRange, 1000);
|
|
|
+watch(startLeft, () => {
|
|
|
+ getNewRange(0, startLeft.value);
|
|
|
+ useDebounceFn(getRainRange, 1000);
|
|
|
+});
|
|
|
+watch(endLeft, () => {
|
|
|
+ getNewRange(1, endLeft.value);
|
|
|
+ useDebounceFn(getRainRange, 1000);
|
|
|
+});
|
|
|
+const getNewRange = (index, value) => {
|
|
|
+ if (value >= 0 && value < 192) {
|
|
|
+ const data = new BigNumber(value).dividedBy(new BigNumber(19.2)).toFixed(0);
|
|
|
+ rainRange[index] = data;
|
|
|
+ } else if (value >= 192 && value < 384) {
|
|
|
+ const data = new BigNumber(value).minus(new BigNumber(192)).dividedBy(new BigNumber(12.8)).plus(new BigNumber(10)).toFixed(0);
|
|
|
+ rainRange[index] = data;
|
|
|
+ } else if (value >= 384 && value < 576) {
|
|
|
+ const data = new BigNumber(value).minus(new BigNumber(384)).dividedBy(new BigNumber(7.68)).plus(new BigNumber(25)).toFixed(0);
|
|
|
+ rainRange[index] = data;
|
|
|
+ } else if (value >= 576 && value < 768) {
|
|
|
+ const data = new BigNumber(value).minus(new BigNumber(576)).dividedBy(new BigNumber(3.84)).plus(new BigNumber(50)).toFixed(0);
|
|
|
+ rainRange[index] = data;
|
|
|
+ } else if (value >= 768 && value < 960) {
|
|
|
+ const data = new BigNumber(value).minus(new BigNumber(768)).dividedBy(new BigNumber(1.28)).plus(new BigNumber(100)).toFixed(0);
|
|
|
+ rainRange[index] = data;
|
|
|
+ } else if (value >= 960 && value < 1152) {
|
|
|
+ const data = new BigNumber(value).minus(new BigNumber(960)).dividedBy(new BigNumber(1.28)).plus(new BigNumber(250)).toFixed(0);
|
|
|
+ rainRange[index] = data;
|
|
|
+ }
|
|
|
+};
|
|
|
const initData = () => {
|
|
|
handleGetRainfallStatisticsCount();
|
|
|
handleGetRainfallRange();
|
|
|
@@ -661,6 +694,7 @@ initData();
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
+ margin-left: -32.5px;
|
|
|
}
|
|
|
.line-item {
|
|
|
width: 192px;
|
