|
@@ -1,7 +1,8 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="map-index">
|
|
<div class="map-index">
|
|
|
- <div ref="scrollContainer" v-if="route.params.id=='28'" style="background-color: white;position: absolute;z-index: 9999;bottom: 1%;left: 1%;width:98vw;height: 10vh;overflow-x:auto;overflow-y: hidden;">
|
|
|
|
|
- <el-timeline style="padding-top:1%;padding-left: 0%;" class="horizontal-timeline">
|
|
|
|
|
|
|
+ <div ref="scrollContainer" v-if="route.params.id=='28'" style="border: 2px solid #409EFF;background-color: rgba(127, 161, 215, 0.5);border-radius: 50px 50px 50px 50px;
|
|
|
|
|
+ align-items: center;display: flex;position: absolute;z-index: 9999;bottom: 1%;left: 25%;width:50vw;height: 10vh;overflow-x:auto;overflow-y: hidden;">
|
|
|
|
|
+ <!-- <el-timeline style="padding-top:1%;padding-left: 0%;" class="horizontal-timeline">
|
|
|
<el-timeline-item
|
|
<el-timeline-item
|
|
|
v-for="(activity, index) in activities"
|
|
v-for="(activity, index) in activities"
|
|
|
:key="index"
|
|
:key="index"
|
|
@@ -15,12 +16,40 @@
|
|
|
>
|
|
>
|
|
|
{{ activity.content }}
|
|
{{ activity.content }}
|
|
|
</el-timeline-item>
|
|
</el-timeline-item>
|
|
|
- </el-timeline>
|
|
|
|
|
|
|
+ </el-timeline> -->
|
|
|
|
|
+ <svg-icon icon-class="start1" v-if="!isStart" @click="reStart" style="margin-left: 10%;width: 30px;height:30px;cursor: pointer;"/>
|
|
|
|
|
+ <svg-icon icon-class="pause1" v-if="isStart" @click="pause" style="margin-left: 10%;width: 30px;height:30px;cursor: pointer;"/>
|
|
|
|
|
+ <el-slider @change="pauseIn" :format-tooltip="formatTooltip" v-model="activities1" :max="dateLength" :marks="marks" style="width: 80%;margin-left: 1%;"/>
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div v-if="route.params.id=='28'" style="background-color: white;position: absolute;z-index: 9999;top: 1%;left: 1%;width: 20vw;height: 40vh;overflow:auto;">
|
|
|
|
|
+ <div class="biz-data-card-header">方案列表</div>
|
|
|
|
|
+ <el-table
|
|
|
|
|
+ :data="tableDataFangan"
|
|
|
|
|
+ style="width: 98%;margin-left: 1%;margin-top: 1%;height: 35vh;"
|
|
|
|
|
+ :cell-style="{ padding:'5px' }"
|
|
|
|
|
+ :header-cell-style="{height: heightAll*0.01+'px',}"
|
|
|
|
|
+ :row-style="{ fontSize: '16px',textAlign:'center'}"
|
|
|
|
|
+ border >
|
|
|
|
|
+ <el-table-column type="index" label="序号" width="80">
|
|
|
|
|
+ <template #default="{ $index }">
|
|
|
|
|
+ <div style="text-align: center;">
|
|
|
|
|
+ {{ $index + 1 }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column prop="name" label="名称">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <span style="cursor: pointer;color:#409EFF" @click="getZ(scope.row)">{{ scope.row.name }}</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ </el-table>
|
|
|
</div>
|
|
</div>
|
|
|
<div v-if="route.params.id=='28'" style="background-color: white;position: absolute;z-index: 9999;top: 1%;right: 1%;width: 30vw;height: 60vh;overflow:auto;">
|
|
<div v-if="route.params.id=='28'" style="background-color: white;position: absolute;z-index: 9999;top: 1%;right: 1%;width: 30vw;height: 60vh;overflow:auto;">
|
|
|
|
|
+ <div class="biz-data-card-header">水位信息</div>
|
|
|
<el-table
|
|
<el-table
|
|
|
:data="tableData"
|
|
:data="tableData"
|
|
|
- style="width: 98%;margin-left: 1%;margin-top: 1%;height: 59vh;"
|
|
|
|
|
|
|
+ style="width: 98%;margin-left: 1%;margin-top: 1%;height: 55vh;"
|
|
|
:cell-style="{ padding:'5px' }"
|
|
:cell-style="{ padding:'5px' }"
|
|
|
:header-cell-style="{height: heightAll*0.01+'px',}"
|
|
:header-cell-style="{height: heightAll*0.01+'px',}"
|
|
|
:row-style="{ fontSize: '16px',textAlign:'center'}"
|
|
:row-style="{ fontSize: '16px',textAlign:'center'}"
|
|
@@ -42,6 +71,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<script setup>
|
|
<script setup>
|
|
|
|
|
+import { VideoPlay } from '@element-plus/icons-vue'
|
|
|
import 'ol/css';
|
|
import 'ol/css';
|
|
|
import {defaults as defaultControls} from 'ol/control';
|
|
import {defaults as defaultControls} from 'ol/control';
|
|
|
import Map from 'ol/Map';
|
|
import Map from 'ol/Map';
|
|
@@ -73,7 +103,8 @@ import suzhouJson from "./suzhou.json";
|
|
|
import {useRoute} from "vue-router";
|
|
import {useRoute} from "vue-router";
|
|
|
import suzhouPoint from "./suzhouPoints.json";
|
|
import suzhouPoint from "./suzhouPoints.json";
|
|
|
import { ref } from 'vue';
|
|
import { ref } from 'vue';
|
|
|
-
|
|
|
|
|
|
|
+import fangan from "./fangan.json";
|
|
|
|
|
+const tableDataFangan = ref([])
|
|
|
const scrollContainer = ref(null);
|
|
const scrollContainer = ref(null);
|
|
|
const scrollAmount =0;
|
|
const scrollAmount =0;
|
|
|
const widthAll = ref(window.innerWidth)
|
|
const widthAll = ref(window.innerWidth)
|
|
@@ -86,6 +117,11 @@ const mapChart = ref(null);
|
|
|
const popupOverlays = ref([]);
|
|
const popupOverlays = ref([]);
|
|
|
const activities =ref( [
|
|
const activities =ref( [
|
|
|
])
|
|
])
|
|
|
|
|
+const activities1= ref()
|
|
|
|
|
+const dateLength = ref(0)
|
|
|
|
|
+const marks = ref({
|
|
|
|
|
+})
|
|
|
|
|
+const isStart = ref(true)
|
|
|
onMounted(async () => {
|
|
onMounted(async () => {
|
|
|
await initMap();
|
|
await initMap();
|
|
|
// 初始化完成后执行配置渲染
|
|
// 初始化完成后执行配置渲染
|
|
@@ -94,7 +130,10 @@ onMounted(async () => {
|
|
|
mapChart.value.addLayer(polygonLayer.value);
|
|
mapChart.value.addLayer(polygonLayer.value);
|
|
|
}
|
|
}
|
|
|
if(route.params.id==='28'){
|
|
if(route.params.id==='28'){
|
|
|
|
|
+ tableDataFangan.value = fangan.data.records
|
|
|
const keys = Object.keys(suzhouJson.data.outPutQUZ)
|
|
const keys = Object.keys(suzhouJson.data.outPutQUZ)
|
|
|
|
|
+ dateLength.value = keys.length
|
|
|
|
|
+
|
|
|
keys.forEach(item=>{
|
|
keys.forEach(item=>{
|
|
|
var par = {
|
|
var par = {
|
|
|
content: '',
|
|
content: '',
|
|
@@ -104,12 +143,42 @@ onMounted(async () => {
|
|
|
}
|
|
}
|
|
|
activities.value.push(par)
|
|
activities.value.push(par)
|
|
|
})
|
|
})
|
|
|
|
|
+ var parTime = uniformSample(activities.value)
|
|
|
|
|
+ console.log(activities.value)
|
|
|
|
|
+ var a = Math.round((dateLength.value - 1) * 1 / 3)
|
|
|
|
|
+ var b = Math.round((dateLength.value - 1) * 2 / 3)
|
|
|
|
|
+ var c = dateLength.value
|
|
|
|
|
+ marks.value = {
|
|
|
|
|
+ 0:{
|
|
|
|
|
+ style: {
|
|
|
|
|
+ color: '#1989FA',
|
|
|
|
|
+ },
|
|
|
|
|
+ label: parTime[0].timestamp.slice(5),
|
|
|
|
|
+ },
|
|
|
|
|
+ }
|
|
|
|
|
+ marks.value[a] = {
|
|
|
|
|
+ style: {
|
|
|
|
|
+ color: '#1989FA',
|
|
|
|
|
+ },
|
|
|
|
|
+ label: parTime[1].timestamp.slice(5),
|
|
|
|
|
+ }
|
|
|
|
|
+ marks.value[b] = {
|
|
|
|
|
+ style: {
|
|
|
|
|
+ color: '#1989FA',
|
|
|
|
|
+ },
|
|
|
|
|
+ label: parTime[2].timestamp.slice(5),
|
|
|
|
|
+ }
|
|
|
|
|
+ marks.value[c] = {
|
|
|
|
|
+ style: {
|
|
|
|
|
+ color: '#1989FA',
|
|
|
|
|
+ },
|
|
|
|
|
+ label: parTime[3].timestamp.slice(5),
|
|
|
|
|
+ }
|
|
|
suzhouJson.data.inputParam = JSON.parse(suzhouJson.data.inputParam)
|
|
suzhouJson.data.inputParam = JSON.parse(suzhouJson.data.inputParam)
|
|
|
console.log(suzhouJson.data)
|
|
console.log(suzhouJson.data)
|
|
|
- setInterval(changeMap, 1000)
|
|
|
|
|
|
|
+ timerId = setInterval(changeMap, 1000)
|
|
|
pointLayer.value = createPointlayer(suzhouPoint)
|
|
pointLayer.value = createPointlayer(suzhouPoint)
|
|
|
mapChart.value.addLayer(pointLayer.value);
|
|
mapChart.value.addLayer(pointLayer.value);
|
|
|
-
|
|
|
|
|
}
|
|
}
|
|
|
if (props.config) {
|
|
if (props.config) {
|
|
|
// toCenter(props.config.center, props.config.zoom);
|
|
// toCenter(props.config.center, props.config.zoom);
|
|
@@ -118,6 +187,50 @@ onMounted(async () => {
|
|
|
});
|
|
});
|
|
|
const count = ref(0)
|
|
const count = ref(0)
|
|
|
const tableData = ref()
|
|
const tableData = ref()
|
|
|
|
|
+function getZ(row){
|
|
|
|
|
+ console.log(row.id)
|
|
|
|
|
+
|
|
|
|
|
+}
|
|
|
|
|
+function formatTooltip(val){
|
|
|
|
|
+ if (activities.value && activities.value[val]) {
|
|
|
|
|
+ return activities.value[val].timestamp.slice(5);
|
|
|
|
|
+ }
|
|
|
|
|
+ // 数据未就绪时返回默认提示
|
|
|
|
|
+ return 'Loading...';
|
|
|
|
|
+}
|
|
|
|
|
+function pause(){
|
|
|
|
|
+ clearInterval(timerId);
|
|
|
|
|
+ timerId = null
|
|
|
|
|
+ isStart.value = false
|
|
|
|
|
+}
|
|
|
|
|
+function reStart(){
|
|
|
|
|
+ timerId = setInterval(changeMap, 1000)
|
|
|
|
|
+ isStart.value = true
|
|
|
|
|
+}
|
|
|
|
|
+function uniformSample(arr) {
|
|
|
|
|
+ const n = arr.length;
|
|
|
|
|
+ if (n === 0) return [];
|
|
|
|
|
+ if (n <= 4) {
|
|
|
|
|
+ return arr.slice();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 计算三个等分点的索引
|
|
|
|
|
+ const index0 = 0; // 首元素
|
|
|
|
|
+ const index1 = Math.round((n - 1) * 1 / 3); // 第一个等分点
|
|
|
|
|
+ const index2 = Math.round((n - 1) * 2 / 3); // 第二个等分点
|
|
|
|
|
+ const index3 = n - 1; // 尾元素
|
|
|
|
|
+ return [
|
|
|
|
|
+ arr[index0],
|
|
|
|
|
+ arr[index1],
|
|
|
|
|
+ arr[index2],
|
|
|
|
|
+ arr[index3]
|
|
|
|
|
+ ];
|
|
|
|
|
+}
|
|
|
|
|
+function pauseIn(){
|
|
|
|
|
+ pause()
|
|
|
|
|
+ count.value = activities1.value
|
|
|
|
|
+ changeMap()
|
|
|
|
|
+}
|
|
|
function changeMap(){
|
|
function changeMap(){
|
|
|
tableData.value = []
|
|
tableData.value = []
|
|
|
const keys1 = Object.keys(suzhouJson.data.outPutQUZ)
|
|
const keys1 = Object.keys(suzhouJson.data.outPutQUZ)
|
|
@@ -130,12 +243,13 @@ function changeMap(){
|
|
|
behavior: 'smooth' // 启用平滑滚动效果
|
|
behavior: 'smooth' // 启用平滑滚动效果
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
- activities.value.forEach(item=>{
|
|
|
|
|
- item.content = ''
|
|
|
|
|
- item.color = ''
|
|
|
|
|
- })
|
|
|
|
|
- activities.value[count.value].content = '当前展示时间'
|
|
|
|
|
- activities.value[count.value].color = '#0bbd87',
|
|
|
|
|
|
|
+ // activities.value.forEach(item=>{
|
|
|
|
|
+ // item.content = ''
|
|
|
|
|
+ // item.color = ''
|
|
|
|
|
+ // })
|
|
|
|
|
+ // activities.value[count.value].content = '当前展示时间'
|
|
|
|
|
+ // activities.value[count.value].color = '#0bbd87',
|
|
|
|
|
+ activities1.value = count.value
|
|
|
mapChart.value.removeLayer(pointLayer.value)
|
|
mapChart.value.removeLayer(pointLayer.value)
|
|
|
const keys = Object.keys(suzhouJson.data.outPutQUZ)
|
|
const keys = Object.keys(suzhouJson.data.outPutQUZ)
|
|
|
tableData.value = suzhouJson.data.outPutQUZ[keys[count.value]]
|
|
tableData.value = suzhouJson.data.outPutQUZ[keys[count.value]]
|
|
@@ -653,7 +767,18 @@ watch(() => props.config, async (config) => {
|
|
|
}, {deep: true});
|
|
}, {deep: true});
|
|
|
</script>
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
-
|
|
|
|
|
|
|
+.biz-data-card-header {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 36px;
|
|
|
|
|
+ background: url("@/assets/map/img/left-title.png") no-repeat;
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-family: 'PuHuiTi', sans-serif;
|
|
|
|
|
+ font-weight: bolder;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 34px;
|
|
|
|
|
+ }
|
|
|
/*滚动条里面轨道*/
|
|
/*滚动条里面轨道*/
|
|
|
::-webkit-scrollbar-track {
|
|
::-webkit-scrollbar-track {
|
|
|
background-color: rgba(20, 19, 19, 0);
|
|
background-color: rgba(20, 19, 19, 0);
|