|
|
@@ -118,7 +118,7 @@
|
|
|
<el-table-column prop="gfsWnddir" label="风向" width=""/>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
- <!-- 上海风暴潮 -->
|
|
|
+ <!-- 排水 -->
|
|
|
<div v-if="route.params.id=='30'"
|
|
|
style="background-color: white;position: absolute;z-index: 100;top: 1%;left: 1%;width: 20vw;height: 45vh;overflow:auto;">
|
|
|
<div class="biz-data-card-header">方案列表</div>
|
|
|
@@ -143,6 +143,35 @@
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
+ <!-- 测试 -->
|
|
|
+ <div v-if="route.params.id=='42'"
|
|
|
+ style="background-color: white;position: absolute;z-index: 100;top: 1%;left: 1%;width: 30vw;height: 45vh;overflow:auto;">
|
|
|
+ <div class="biz-data-card-header">方案列表</div>
|
|
|
+ <el-table
|
|
|
+ :data="tableDataShanghaifeng"
|
|
|
+ style="width: 98%;margin-left: 1%;margin-top: 1%;height: 40vh;"
|
|
|
+ :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="planName" label="名称" width="150">
|
|
|
+ <template #default="scope">
|
|
|
+ <span style="cursor: pointer;color:#409EFF" @click="getGeo(scope.row)">{{ scope.row.dataName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="createTime" label="产生时间" width="200">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="timeLength" label="存放时长(天)">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
<el-dialog @close="clearFromLev" :title="titleFengbao" v-model="dialogVisibleFengbao" width="50%" destroy-on-close>
|
|
|
<div>
|
|
|
<div style="font-size: 20px;margin-left: 2%;">水位</div>
|
|
|
@@ -205,7 +234,9 @@ import {
|
|
|
getForecastlist,
|
|
|
getStromdatade,
|
|
|
getStromdataList,
|
|
|
- getStromlist
|
|
|
+ getStromlist,
|
|
|
+ getMdAppFlowDataList,
|
|
|
+ getAppData
|
|
|
} from "@/api/standardization/bizDataShowConfig.js";
|
|
|
import Map from 'ol/Map';
|
|
|
import View from 'ol/View';
|
|
|
@@ -232,7 +263,9 @@ import {useRoute} from "vue-router";
|
|
|
import suzhouPoint from "./suzhouPoints.json";
|
|
|
import {ref} from 'vue';
|
|
|
import fangan from "./fangan.json";
|
|
|
-
|
|
|
+import test1 from "./test1.json";
|
|
|
+import test2 from "./test2.json";
|
|
|
+import test3 from "./test3.json";
|
|
|
const dialogVisibleFengbao = ref(false)
|
|
|
const titleFengbao = ref('')
|
|
|
const tableDataFangan = ref([])
|
|
|
@@ -258,10 +291,10 @@ const tooltipRef = ref(null);
|
|
|
let currentFeature = null
|
|
|
let overlay = null
|
|
|
const tableDataShanghaifeng = ref([])
|
|
|
+const geoJSONLayer = ref(null)
|
|
|
onMounted(async () => {
|
|
|
console.log(route.params.id)
|
|
|
initMap();
|
|
|
- // 初始化完成后执行配置渲染
|
|
|
if (route.params.id === '30') {
|
|
|
getForecastlist({appId: route.params.id}).then(res => {
|
|
|
tableDataShanghaifeng.value = res.rows
|
|
|
@@ -315,6 +348,12 @@ onMounted(async () => {
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
+ if (route.params.id === '42') {
|
|
|
+ getMdAppFlowDataList({appId: route.params.id}).then(res => {
|
|
|
+ tableDataShanghaifeng.value = res.data
|
|
|
+ getGeo(tableDataShanghaifeng.value[0])
|
|
|
+ })
|
|
|
+ }
|
|
|
if (route.params.id === '28') {
|
|
|
tableDataFangan.value = fangan.data.records
|
|
|
const keys = Object.keys(suzhouJson.data.outPutQUZ)
|
|
|
@@ -409,7 +448,99 @@ const tableData = ref()
|
|
|
function getZ(row) {
|
|
|
console.log(row.id)
|
|
|
}
|
|
|
+function setGeoJSONLayer(json){
|
|
|
+ var parData = []
|
|
|
+ json.features.forEach(item => {
|
|
|
+ var par = {
|
|
|
+ type: 'Feature',
|
|
|
+ geometry: item.geometry,
|
|
|
+ properties: item.properties,
|
|
|
+ }
|
|
|
+ parData.push(par)
|
|
|
+ });
|
|
|
+ const polygonGeoJSON = {
|
|
|
+ "type": "FeatureCollection",
|
|
|
+ "features": parData
|
|
|
+ };
|
|
|
+ // 创建矢量数据源并加载GeoJSON多边形数据[3,4](@ref)
|
|
|
+ const vectorSource = new VectorSource({
|
|
|
+ features: new GeoJSON().readFeatures(polygonGeoJSON, {
|
|
|
+ dataProjection: 'EPSG:4326',
|
|
|
+ featureProjection: 'EPSG:4326'
|
|
|
+ })
|
|
|
+ });
|
|
|
|
|
|
+ // 3. 创建矢量图层
|
|
|
+ const styleFunction = function (feature) {
|
|
|
+ const properties = feature.getProperties();
|
|
|
+ if (properties.hvalue >= 50) {
|
|
|
+ return new Style({
|
|
|
+ fill: new Fill({
|
|
|
+ color: 'rgba(248, 152, 152, 0.5)'
|
|
|
+ }),
|
|
|
+ stroke: new Stroke({
|
|
|
+ color: '#ff0000',
|
|
|
+ width: 2
|
|
|
+ })
|
|
|
+ });
|
|
|
+ } else if (properties.hvalue < 50 && properties.hvalue >= 40) {
|
|
|
+ return new Style({
|
|
|
+ fill: new Fill({
|
|
|
+ color: 'rgba(255, 0, 0, 0.5)'
|
|
|
+ }),
|
|
|
+ stroke: new Stroke({
|
|
|
+ color: '#ff0000',
|
|
|
+ width: 2
|
|
|
+ })
|
|
|
+ });
|
|
|
+ } else if (properties.hvalue < 40 && properties.hvalue >= 30) {
|
|
|
+ return new Style({
|
|
|
+ fill: new Fill({
|
|
|
+ color: 'rgba(51, 126, 204, 0.5)'
|
|
|
+ }),
|
|
|
+ stroke: new Stroke({
|
|
|
+ color: '#ff0000',
|
|
|
+ width: 2
|
|
|
+ })
|
|
|
+ });
|
|
|
+ } else if (properties.hvalue < 30 && properties.hvalue >= 20) {
|
|
|
+ return new Style({
|
|
|
+ fill: new Fill({
|
|
|
+ color: 'rgba(121, 187, 255, 0.5)'
|
|
|
+ }),
|
|
|
+ stroke: new Stroke({
|
|
|
+ color: '#ff0000',
|
|
|
+ width: 2
|
|
|
+ })
|
|
|
+ });
|
|
|
+ } else if (properties.hvalue < 10 && properties.hvalue >= 1) {
|
|
|
+ return new Style({
|
|
|
+ fill: new Fill({
|
|
|
+ color: 'rgba(149, 212, 117, 0.5)'
|
|
|
+ }),
|
|
|
+ stroke: new Stroke({
|
|
|
+ color: '#ff0000',
|
|
|
+ width: 2
|
|
|
+ })
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 默认样式
|
|
|
+ return new Style({
|
|
|
+ fill: new Fill({
|
|
|
+ color: 'rgba(179, 225, 157, 0.5)' // 半透明蓝色填充
|
|
|
+ }),
|
|
|
+ stroke: new Stroke({
|
|
|
+ color: '#0066ff', // 蓝色边框
|
|
|
+ width: 2 // 边框宽度
|
|
|
+ })
|
|
|
+ });
|
|
|
+ };
|
|
|
+ const geoJSONLayer = new VectorLayer({
|
|
|
+ source: vectorSource,
|
|
|
+ style: styleFunction // 应用样式
|
|
|
+ });
|
|
|
+ return geoJSONLayer
|
|
|
+}
|
|
|
function initChart(x, y, mdName, id, color, danwei) {
|
|
|
var chartDom = document.getElementById(id);
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
@@ -616,7 +747,13 @@ async function wendai() {
|
|
|
dateLength.value = dateLength.value - 1
|
|
|
timerId = setInterval(changeWen, 1000)
|
|
|
}
|
|
|
-
|
|
|
+function getGeo(row){
|
|
|
+ getAppData({dataId:row.dataId}).then(res=>{
|
|
|
+ mapChart.value.removeLayer(geoJSONLayer.value)
|
|
|
+ geoJSONLayer.value = setGeoJSONLayer(res.data)
|
|
|
+ mapChart.value.addLayer(geoJSONLayer.value);
|
|
|
+ })
|
|
|
+}
|
|
|
function changeWen() {
|
|
|
if (tableJason.value) {
|
|
|
tableData.value = []
|
|
|
@@ -720,7 +857,6 @@ function createPolygonLayer(jsonData) {
|
|
|
"type": "FeatureCollection",
|
|
|
"features": parData
|
|
|
};
|
|
|
- console.log(parData)
|
|
|
// 创建矢量数据源并加载GeoJSON多边形数据[3,4](@ref)
|
|
|
const vectorSource = new VectorSource({
|
|
|
features: new GeoJSON().readFeatures(polygonGeoJSON, {
|
|
|
@@ -852,7 +988,6 @@ function createStationStyle(station) {
|
|
|
})
|
|
|
});
|
|
|
}
|
|
|
-
|
|
|
function createPointlayer(dataJson) {
|
|
|
const vectorSource = new VectorSource();
|
|
|
|
|
|
@@ -924,6 +1059,7 @@ const initMap = () => {
|
|
|
projection: 'EPSG:4326',
|
|
|
}),
|
|
|
layers: [vecLayer, cvaLayer],
|
|
|
+ // layers: [vecLayer],
|
|
|
controls: defaultControls({
|
|
|
zoom: false,//不显示放大放小按钮
|
|
|
rotate: false,//不显示指北针控件
|