土壤监测弹框优化样式

This commit is contained in:
wgx 2026-01-14 10:54:18 +08:00
parent a0e14c8ff2
commit 7d9c8c7794
4 changed files with 22 additions and 17 deletions

View File

@ -2,7 +2,7 @@ import axios from "axios";
import router from '@/router' import router from '@/router'
const requests = axios.create({ const requests = axios.create({
baseURL:"/lh-api", baseURL:"/lh-api",
timeout:5000, timeout:20000,
}); });

View File

@ -12,7 +12,7 @@
<div class="tz_cov_chanye" style="height: 770px" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)" > <div class="tz_cov_chanye" style="height: 770px" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)" >
<img src="@/assets/image/zhwl/guanbi.png" class="guanbiann" @click="closeDialog" alt=""/> <img src="@/assets/image/zhwl/guanbi.png" class="guanbiann" @click="closeDialog" alt=""/>
<div class="tz_cov_topchanye"> <div class="tz_cov_topchanye">
<span class="tz_cov_top_tit">长期定位监测</span> <span class="tz_cov_top_tit">{{soilDataId.name}}</span>
</div> </div>
<el-row class="tz_cov_topyqjs"> <el-row class="tz_cov_topyqjs">
<el-col :span="9"> <el-col :span="9">
@ -20,7 +20,7 @@
<span class="tcxitit">实时监测信息</span> <span class="tcxitit">实时监测信息</span>
<div class="qxsjssjcTc" > <div class="qxsjssjcTc" >
<div class="qxsjssjc_left"> <div class="qxsjssjc_left">
<el-col :span="24" :class="`showTitle ${index > 7?'showTitle2':''}`" style="padding: 0px;width: 146px;" <el-col :span="24" :class="`showTitle ${index > 7?'showTitle2':''}`" style="padding: 0px;width: 146px; z-index: 99;"
v-for="(item, index) in tableHead" :key="index" :data-item="JSON.stringify(item)"> v-for="(item, index) in tableHead" :key="index" :data-item="JSON.stringify(item)">
<div class="jcsjtclist" style="overflow: hidden" @click="switchData(item)"> <div class="jcsjtclist" style="overflow: hidden" @click="switchData(item)">
<el-row :gutter="20"> <el-row :gutter="20">
@ -116,11 +116,12 @@ import { _colors } from '@/utils/color.js'
export default { export default {
props: { props: {
soilDataId: String soilDataId: Object,
}, },
components: {}, components: {},
data() { data() {
return { return {
dTitle: '长期定位监测',
urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/', urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
urlimg2: 'https://farm.ilhzn.cn/jeecg-boot/sys/common/static/', urlimg2: 'https://farm.ilhzn.cn/jeecg-boot/sys/common/static/',
deployType: 'soil', deployType: 'soil',
@ -135,7 +136,7 @@ export default {
summrayMode: 'monthDays' summrayMode: 'monthDays'
}, },
postParam: { postParam: {
deployIds: [this.soilDataId], deployIds: [this.soilDataId.ids],
startTime: null, startTime: null,
endTime: null, endTime: null,
summrayMode: 'monthDays', summrayMode: 'monthDays',
@ -691,11 +692,11 @@ export default {
} }
.tctrimg { .tctrimg {
width: 16%; width: 26%;
height: 450px;; height: 538px;
position: absolute; position: absolute;
left: 11%; left: 7%;
top: 120px; top: 74px;
z-index: 1; z-index: 1;
} }

View File

@ -192,7 +192,8 @@
<img src="@/assets/image/kuang_youxia.png" class="in2con_zyx" alt=""> <img src="@/assets/image/kuang_youxia.png" class="in2con_zyx" alt="">
<img src="@/assets/image/sanguang.png" class="sanguang2" alt=""> <img src="@/assets/image/sanguang.png" class="sanguang2" alt="">
<img src="@/assets/image/sanguang.png" class="sanguangbt2" alt=""> <img src="@/assets/image/sanguang.png" class="sanguangbt2" alt="">
<div> <div v-loading="tabsLoading" element-loading-text=" "
element-loading-background="rgba(0, 0, 0, 0.8)">
<span class="zywr_titshow">重要污染物治理效果</span> <span class="zywr_titshow">重要污染物治理效果</span>
<el-tooltip class="item" effect="dark" <el-tooltip class="item" effect="dark"
:content="dataTypeEchart?'监测值为正常历史监测数据。':'对比值为下游监测站数据减去上游监测站数据。'" :content="dataTypeEchart?'监测值为正常历史监测数据。':'对比值为下游监测站数据减去上游监测站数据。'"
@ -210,14 +211,14 @@
</el-option> </el-option>
</el-select> </el-select>
<el-tabs type="card" @tab-click="handleClick" v-show="dataTypeEchart"> <el-tabs type="card" @tab-click="handleClick" v-show="dataTypeEchart">
<el-tab-pane v-for="(item,index) in stationInfoList" :label="item.stationName" lazy> <el-tab-pane v-for="(item,index) in stationInfoList" :label="item.stationShortName?item.stationShortName:item.stationName" lazy>
<template> <template>
<div :id="`myChartDiv${index}`" style="height:12vw;width:100%;"></div> <div :id="`myChartDiv${index}`" style="height:12vw;width:100%;"></div>
</template> </template>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<el-tabs type="card" @tab-click="handleClick" v-show="!dataTypeEchart"> <el-tabs type="card" @tab-click="handleClick" v-show="!dataTypeEchart">
<el-tab-pane v-for="(item,index) in riverList" :label="item.stationName.split('-')[0]" lazy> <el-tab-pane v-for="(item,index) in riverList" :label="(item.stationShortName?item.stationShortName:item.stationName).split('-')[0]" lazy>
<template> <template>
<div :id="`myChartDiv2${index}`" style="height:12vw;width:100%;"></div> <div :id="`myChartDiv2${index}`" style="height:12vw;width:100%;"></div>
</template> </template>
@ -535,7 +536,8 @@ export default {
label: '12个月' label: '12个月'
}], }],
soidShowFlag: false, soidShowFlag: false,
soilDataId: '' soilDataId: '',
tabsLoading: false,
}; };
}, },
created() { created() {
@ -764,6 +766,7 @@ export default {
icon: this.urlimg + item.picUrl, icon: this.urlimg + item.picUrl,
position: [item.longitude, item.latitude], position: [item.longitude, item.latitude],
offset: new AMap.Pixel(item.width, item.height),// offset: new AMap.Pixel(item.width, item.height),//
title: item.name,
extData: { extData: {
ids: item.ids, ids: item.ids,
extPics: item.extPics, extPics: item.extPics,
@ -780,9 +783,9 @@ export default {
console.log('livestock or orient', this.qyinformation) console.log('livestock or orient', this.qyinformation)
}) })
this.markersOrient.push(marker) this.markersOrient.push(marker)
} else if(item.type == 'soil'){ } else if(item.type == 'soil'){//
marker.on('click', e => { marker.on('click', e => {
this.soilDataId = e.target.getExtData().ids this.soilDataId = e.target.getExtData()
this.soidShowFlag = true this.soidShowFlag = true
console.log('soil click', ) console.log('soil click', )
}) })
@ -830,6 +833,7 @@ export default {
}, 300); }, 300);
}, },
handleClick(tab, event) { handleClick(tab, event) {
this.tabsLoading = true;
this.echartIndex = tab.index - 0; this.echartIndex = tab.index - 0;
if (this.summryAllData) { if (this.summryAllData) {
this.$nextTick(() => { // echarts this.$nextTick(() => { // echarts
@ -977,6 +981,8 @@ export default {
//echarts //echarts
this.echartInit[domKey].setOption(optionLine); this.echartInit[domKey].setOption(optionLine);
}) })
this.tabsLoading = false;
}, },
// //
getNowTime() { getNowTime() {

View File

@ -318,13 +318,11 @@ import ScaleBox from 'vue2-scale-box'
import {getStationDetail, getStationDisplay, getIndexSummry, survItemSummary, getMaintainLog, stationInfo} from '@/api'; import {getStationDetail, getStationDisplay, getIndexSummry, survItemSummary, getMaintainLog, stationInfo} from '@/api';
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from 'vue-seamless-scroll'
import hefentianqi from '@/pages/weather/weather.vue' import hefentianqi from '@/pages/weather/weather.vue'
import SoilDialog from "@/components/SoilDialog.vue";
import SingleEchartDialog from "@/components/SingleEchartDialog.vue"; import SingleEchartDialog from "@/components/SingleEchartDialog.vue";
export default { export default {
components: { components: {
SingleEchartDialog, SingleEchartDialog,
SoilDialog,
vueSeamlessScroll, vueSeamlessScroll,
hefentianqi, hefentianqi,
ScaleBox ScaleBox