添加土壤数据弹窗50%

This commit is contained in:
wgx 2025-11-27 20:56:12 +08:00
parent 650db5e240
commit 22fdef3237
7 changed files with 430 additions and 553 deletions

View File

@ -258,7 +258,7 @@
width: 33.33%; width: 33.33%;
text-align: center; text-align: center;
float: left; float: left;
margin-top: 0.5vw; /*margin-top: 0.5vw;*/
} }
.sx_cov_lt_tit{ .sx_cov_lt_tit{
font-size:0.8vw ; font-size:0.8vw ;
@ -897,4 +897,12 @@
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0 !important; /* 隐藏滚动条 */ width: 0 !important; /* 隐藏滚动条 */
}
.amap-logo{
display: none;
opacity:0 !important;
}
.amap-copyright {
opacity:0;
} }

BIN
src/assets/image/img.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 744 B

BIN
src/assets/image/soil.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 910 B

View File

@ -0,0 +1,281 @@
<template>
<!-- 曲线弹窗 -->
<el-dialog
width="70%"
top="16vh"
:visible.sync="trqxzxdialogTableVisible"
:modal-append-to-body="false"
@close="closeDialog"
>
<div class="tz_cov" style="height: 35vw">
<div
style="width:100%;height:100%;margin:0 auto;position: absolute;top:0;left:0;z-index:444;background:rgba(0,0,0,0.4);"
v-if="loadding">
</div>
<img src="@/assets/image/loading.gif" alt=""
style="width:150px;height:150px;margin:0 auto;position: absolute;top:280px;left:45%;z-index: 555;"
v-if="loadding">
<img
src="@/assets/image/guanbi.png"
class="guanbiann"
@click="closeDialog"
alt=""
/>
<div class="tz_cov_top">
<span class="tz_cov_top_tit">{{ dialogTitle }}</span>
</div>
<div class="trwdcov jgdhei">
<div class="trwdcov_top">
<span class="trwdcov_top_tit">时间范围</span>
<el-date-picker
class="trwdcov_top_time"
v-model="timetr"
type="daterange"
@blur="timetrpicker"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
<span class="trwdcov_top_tit">展示方式</span>
<el-radio-group v-model="radiotr" @change="agreeChange">
<el-radio label="1">折线</el-radio>
<el-radio label="2">表格</el-radio>
</el-radio-group>
</div>
<el-table
:data="formListVlaue"
v-show="trzx"
height="480"
border
style="margin-top: 1vw; background: none"
>
<el-table-column prop="date" label="时间"></el-table-column>
<el-table-column prop="name" :label="'数值单位:' + unitValue">
</el-table-column>
</el-table>
<div id="maintczxtc" v-show="!trzx" style="width: 100%; height: 500px"></div>
</div>
<img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
<img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
<img src="@/assets/image/kuang_zuoxia.png" class="in2con_zzx" alt="">
<img src="@/assets/image/kuang_youxia.png" class="in2con_zyx" alt="">
<img src="@/assets/image/sanguang.png" class="tzsanguang" alt="">
<img src="@/assets/image/sanguang.png" class="tzsanguangbt" alt="">
</div>
</el-dialog>
</template>
<script>
import {survItemSummary} from "@/api";
export default {
props: {
item: Object
},
components: {},
data() {
return {
trqxzxdialogTableVisible: true,
loadding: true,
dialogTitle: '',
radiotr: '1',
timetr: [new Date(), new Date()],
trzx: false,
formListVlaue: [],
unitValue: '',
echartObj: null,
}
},
mounted() {
console.log('单曲线弹窗显示拉!', this.item)
//stationCode: item.stationCode,
// deployId: item.deployId,
// survItem: survItem
this.deviceSummaryApi();
},
methods: {
// 线
deviceSummaryApi() {
let obj = {
stationCode: this.item.stationCode,
deployId: this.item.deployId,
survItem: this.item.survItem,
endTime: this.endTime,
startTime: this.startTime,
}
this.loadding = true
survItemSummary(obj).then(res => {
let that = this
this.loadding = false
if(res.result){
this.dataListVlaue = res.result.dataList
this.timeListVlaue = res.result.timeList
this.formListVlaue = res.result.formList
// this.limitStrValue = res.result.itemInfo.limitStr
if (this.timeListVlaue) {
this.unitValue = res.result.itemInfo.unit
this.dialogTitle = res.result.itemInfo.description
setTimeout(() => {
that.$nextTick(() => {
that.drawChartTc();
})
}, 200)
}
}
})
},
drawChartTc() {
// domecharts main
if(this.echartObj){
this.echartObj.clear()
} else {
this.echartObj = this.$echarts.init(document.getElementById("maintczxtc"));
}
//
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#3c6ae1'
}
}
},
legend: {
data: ['']
},
toolbox: {},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [ //
{
offset: 0,
color: 'rgba(85,111,253,0.70)',
},
{
offset: 1,
color: 'rgba(85,111,253,0.20)',
},
],
global: false,
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: this.timeListVlaue.reverse(),
textStyle: {
color: "#fff",
},
axisLabel: {
//x
show: true,
},
}
],
yAxis: [
{
name: this.unitValue,
type: 'value',
textStyle: {
color: "#fff",
},
axisLabel: {
formatter: '{value}',
//x
show: true,
},
}
],
series: [
{
name: this.dialogTitle,
animationDurationUpdate: 1000, // 1s
animationEasingUpdate: 'quinticInOut', // 'quinticInOut'
type: 'line',
stack: 'Total',
smooth: true,
areaStyle: {},
emphasis: {
focus: 'series'
},
lineStyle: {
color: '#3c6ae1' // 线
},
data: this.dataListVlaue.reverse(),
},
],
};
// 使
this.echartObj.setOption(option);
},
//
timetrpicker(data) {
this.startTime = data.displayValue[0];
this.endTime = data.displayValue[1];
this.deviceSummaryApi()
},
agreeChange(val) {
let that = this
if (val == '1') {//线
this.trzx = false
} else if (val == '2') {//
this.trzx = true
}
// that.deviceSummaryApi();
},
closeDialog() {
this.$emit('close')
}
}
}
</script>
<style scoped>
.tz_cov {
width: 100%;
height: 30vw;
margin: 0 auto;
/* margin-top: 4vw; */
border: 1px solid #0169d0;
position: relative;
background: rgba(16, 45, 80, 1);
box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
}
.tz_cov_top {
width: 40%;
height: 3vw;
margin: 0 auto;
background: url(../assets/image/tz_tltle_bg.png) no-repeat;
background-size: cover;
text-align: center;
line-height: 3vw;
margin-bottom: 2vw;
}
.tz_cov_top_tit {
font-size: 1vw;
color: #fff;
text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
font-family: douyuFont;
}
</style>

View File

@ -144,7 +144,7 @@
</div> </div>
</div> </div>
<div class="home_dlhj"> <div class="home_dlhj">
<el-carousel arrow="never" height="150px"> <el-carousel arrow="never" height="150px" style=" bottom: 20px;">
<el-carousel-item v-for="value in roll_info" :key="value.id"> <el-carousel-item v-for="value in roll_info" :key="value.id">
<div class="sx_cov"> <div class="sx_cov">
<span class="sx_covtit"> <span class="sx_covtit">
@ -177,6 +177,10 @@
<img src="@/assets/image/icon-yellow.png" class="xcdimg" alt=""> <img src="@/assets/image/icon-yellow.png" class="xcdimg" alt="">
<span class="scdlist_tit">团柏河监测站</span> <span class="scdlist_tit">团柏河监测站</span>
</div> </div>
<div class="scdlist" @click="switchIcon('soil')">
<img src="@/assets/image/soil.png" class="xcdimg" alt="">
<span class="scdlist_tit">土壤监测点</span>
</div>
</div> </div>
<transition enter-active-class="animate__animated animate__backInUp" <transition enter-active-class="animate__animated animate__backInUp"
leave-active-class="animate__animated animate__backOutDown"> leave-active-class="animate__animated animate__backOutDown">
@ -250,10 +254,10 @@
</div> </div>
</viewer> </viewer>
</div> </div>
<div class="jczbtm"> <div class="jczbtm" @click="showEchartDialog($event, 1)" >
<vue-seamless-scroll :data="item.wrwcode" class="wp-1 hp-1" :class-option="classWrwcod"> <vue-seamless-scroll :data="item.wrwcode" class="wp-1 hp-1" :class-option="classWrwcod">
<div class="jczbtm_lf" v-for="valist in item.wrwcode" :key="valist.index" <div class="jczbtm_lf" v-for="(valist,index) in item.wrwcode" :key="valist.index"
@click="tczxtc(item.stationCode,valist.tylename)"> :data-item="JSON.stringify(item)" :data-survItem="valist.tylename" >
<img :src="urlimg + valist.icon" class="tpimg" alt=""> <img :src="urlimg + valist.icon" class="tpimg" alt="">
<div class="jczbtm_lf_rt"> <div class="jczbtm_lf_rt">
<span class="jczbtm_lf_rttit">{{ valist.name }}</span> <span class="jczbtm_lf_rttit">{{ valist.name }}</span>
@ -278,7 +282,8 @@
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt=""> <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div> </div>
<div class="mywrcov"> <div class="mywrcov">
<div class="mywrcov_one mywrcov_onehover" @click="tzqcalin"> <!-- <div class="mywrcov_one mywrcov_onehover" @click="tzqcalin">-->
<div class="mywrcov_one mywrcov_onehover">
<span class="mywrcov_onetit">{{ effect_assess0.detailCode }}</span> <span class="mywrcov_onetit">{{ effect_assess0.detailCode }}</span>
<span class="mywrcov_onenum"> <span class="mywrcov_onenum">
<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess0.detailValue }}</span> <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess0.detailValue }}</span>
@ -289,7 +294,8 @@
<span class="mywrcov_onenum"><span <span class="mywrcov_onenum"><span
class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess1.detailValue }}</span></span> class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess1.detailValue }}</span></span>
</div> </div>
<div class="mywrcov_three mywrcov_onehover" @click="tzalin"> <!-- <div class="mywrcov_three mywrcov_onehover" @click="tzalin">-->
<div class="mywrcov_three mywrcov_onehover" >
<span class="mywrcov_onenum" style="margin-top: 1vw;"><span <span class="mywrcov_onenum" style="margin-top: 1vw;"><span
class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess2.detailValue }}</span></span> class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess2.detailValue }}</span></span>
<span class="mywrcov_onetit">{{ effect_assess2.detailCode }}</span> <span class="mywrcov_onetit">{{ effect_assess2.detailCode }}</span>
@ -310,16 +316,16 @@
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div> <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
<div> <div>
<div class="in1con_lf_tit "> <div class="in1con_lf_tit ">
<span class="in1con_lf_titshow1">监测实时数据</span> <span class="in1con_lf_titshow1">土壤监测实时数据</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt=""> <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div> </div>
<div style="height:15vw;overflow: hidden"> <div style="height:280px;overflow: hidden" @click="showEchartDialog($event, 1)">
<vue-seamless-scroll :data="listData" class="wp-1 hp-1" :class-option="classOption" :step="1"> <vue-seamless-scroll :data="listData" class="wp-1 hp-1" :class-option="classOption" :step="1">
<div class="jcsssj" v-for="(item, index) in listData" :key="index"> <div class="jcsssj" v-for="(item, index) in listData" :key="index" :data-item="JSON.stringify(item)" :data-survItem="item.survItem" >
<img src="@/assets/image/xian.png" class="jcsssj_xian" alt=""> <img src="@/assets/image/xian.png" class="jcsssj_xian" alt="">
<div class="jcsssj_rt" @click="tczxtc(item.stationCode,item.survItem)"> <div class="jcsssj_rt">
<div style="float: left;width: 70%;"> <div style="float: left;width: 70%;">
<span class="jcsssj_rt_tit">{{ item.stationName }}</span> <span class="jcsssj_rt_tit">{{ item.stationName?item.stationName:item.deployRemark?item.deployRemark:'土壤监测站' }}</span>
<span class="jcsssj_rtbiao" :style="{background:(item.color)}">{{ item.name }}</span> <span class="jcsssj_rtbiao" :style="{background:(item.color)}">{{ item.name }}</span>
<span class="jcsssj_rt_numsy"> <span class="jcsssj_rt_numsy">
<!-- <span class="in1con_lf_imglf_num_jix">{{item.value}}</span> --> <!-- <span class="in1con_lf_imglf_num_jix">{{item.value}}</span> -->
@ -342,7 +348,7 @@
<!-- 台账弹窗 --> <!-- 台账弹窗 -->
<el-dialog width="60%" :visible.sync="dialogTableVisible"> <el-dialog width="60%" :visible.sync="dialogTableVisible">
<div class="tz_cov"> <div class="tz_cov">
<img src="@/assets/image/guanbi.png" class="guanbiann" @click="guanbi" alt=""> <img src="@/assets/image/guanbi.png" class="guanbiann" @click="qcguanbi" alt="">
<div class="tz_cov_top"> <div class="tz_cov_top">
<span class="tz_cov_top_tit">农业废弃物台账</span> <span class="tz_cov_top_tit">农业废弃物台账</span>
</div> </div>
@ -531,75 +537,9 @@
</el-row> </el-row>
</div> </div>
</el-dialog> </el-dialog>
<!-- 曲线弹窗 -->
<el-dialog
width="70%"
top="16vh"
:visible.sync="trqxzxdialogTableVisible"
:modal-append-to-body="false"
>
<div class="tz_cov" style="height: 35vw">
<div
style="width:100%;height:100%;margin:0 auto;position: absolute;top:0;left:0;z-index:444;background:rgba(0,0,0,0.4);"
v-if="trbgzhuanq"></div>
<img src="@/assets/image/loading.gif" alt=""
style="width:150px;height:150px;margin:0 auto;position: absolute;top:280px;left:45%;z-index: 555;"
v-if="trbgzhuanq">
<img
src="@/assets/image/guanbi.png"
class="guanbiann"
@click="qcguanbi"
alt=""
/>
<div class="tz_cov_top">
<span class="tz_cov_top_tit">{{ descriptionValue }}</span>
</div>
<div class="trwdcov jgdhei">
<div class="trwdcov_top">
<span class="trwdcov_top_tit">时间范围</span>
<el-date-picker
class="trwdcov_top_time"
v-model="timetr"
type="daterange"
@blur="timetrpicker"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
<span class="trwdcov_top_tit">展示方式</span>
<el-radio-group v-model="radiotr" @change="agreeChange">
<el-radio label="1">折线</el-radio>
<el-radio label="2">表格</el-radio>
</el-radio-group>
</div>
<el-table
:data="formListVlaue"
v-if="trzx"
height="480"
border
style="margin-top: 1vw; background: none"
>
<el-table-column prop="date" label="时间"></el-table-column>
<el-table-column prop="name" :label="'数值单位:' + unitValue">
</el-table-column>
</el-table>
<template v-else>
<div id="maintczxtc" style="width: 100%; height: 500px" v-if="trbg"></div>
</template>
</div>
<img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
<img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
<img src="@/assets/image/kuang_zuoxia.png" class="in2con_zzx" alt="">
<img src="@/assets/image/kuang_youxia.png" class="in2con_zyx" alt="">
<img src="@/assets/image/sanguang.png" class="tzsanguang" alt="">
<img src="@/assets/image/sanguang.png" class="tzsanguangbt" alt="">
</div>
</el-dialog>
</div> </div>
<SoilDialog ref="soilDialog" v-if="soidShowFlag" :soilDataId="soilDataId" @close="soidShowFlag=false"/> <SoilDialog v-if="soidShowFlag" :soilDataId="soilDataId" @close="soidShowFlag=false"/>
<SingleEchartDialog v-if="singleEchartDialogShowFlag" :item="singleEchartData" @close="singleEchartDialogShowFlag=false"/>
</ScaleBox> </ScaleBox>
</template> </template>
@ -622,10 +562,12 @@ 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 SoilDialog from '@/components/SoilDialog.vue'
import {_colors} from '@/utils/color.js' import {_colors} from '@/utils/color.js'
import SingleEchartDialog from "@/components/SingleEchartDialog.vue";
export default { export default {
name: 'mainHome', name: 'mainHome',
components: { components: {
SingleEchartDialog,
vueSeamlessScroll, vueSeamlessScroll,
hefentianqi, hefentianqi,
ScaleBox, ScaleBox,
@ -633,9 +575,12 @@ export default {
}, },
data() { data() {
return { return {
singleEchartDialogShowFlag: false,
singleEchartData: null,
aMap: null, aMap: null,
dataTypeEchart: true, dataTypeEchart: true,
markersOrient: [], markersOrient: [],
markersSoil: [],
markersOther: [], markersOther: [],
lastClickIcon: '', lastClickIcon: '',
urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/', urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
@ -668,13 +613,6 @@ export default {
qcdtdialogTableVisible: false, qcdtdialogTableVisible: false,
qyinfordtdialogTableVisible: false, qyinfordtdialogTableVisible: false,
shipdialogTableVisible: false, shipdialogTableVisible: false,
trqxzxdialogTableVisible: false,
trbg: null,
trzx: false,
trbgzhuanq: false,
descriptionValue: null,
timetr: [new Date(), new Date()],
radiotr: '1',
qyinformation: '', qyinformation: '',
listData: [], listData: [],
summryAllData: null, summryAllData: null,
@ -756,7 +694,7 @@ export default {
// //
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
this.PestLight(this.zoomData, this.isShowLightNumber); this.initMap(this.zoomData, this.isShowLightNumber);
}) })
}, 2000) }, 2000)
// //
@ -771,9 +709,9 @@ export default {
}, },
methods: { methods: {
initSoilData(){ initSoilData(){
getSoilSummry({deployIds:['1679816733238575105'], "summrayMode":"dayhours"}).then(res=>{ // getSoilSummry({deployIds:['1679816733238575105'], "summrayMode":"dayhours"}).then(res=>{
console.log(res) // console.log(res)
}) // })
}, },
formatter: function (num) { formatter: function (num) {
return num.toFixed(3) return num.toFixed(3)
@ -789,10 +727,10 @@ export default {
this.zoomData = 14 this.zoomData = 14
if (this.isShowLight == undefined) { if (this.isShowLight == undefined) {
let isShowLight = '1' let isShowLight = '1'
this.PestLight(this.zoomData, isShowLight); this.initMap(this.zoomData, isShowLight);
} else { } else {
let isShowLight = this.isShowLight let isShowLight = this.isShowLight
this.PestLight(this.zoomData, isShowLight); this.initMap(this.zoomData, isShowLight);
} }
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
@ -802,9 +740,9 @@ export default {
} else {// } else {//
this.zoomData = 15 this.zoomData = 15
if (this.isShowLight == undefined) { if (this.isShowLight == undefined) {
this.PestLight(this.zoomData, '1'); this.initMap(this.zoomData, '1');
} else { } else {
this.PestLight(this.zoomData, this.isShowLight); this.initMap(this.zoomData, this.isShowLight);
} }
} }
}, },
@ -864,181 +802,49 @@ export default {
if (value == true) { if (value == true) {
let isShowLight = '1' let isShowLight = '1'
this.isShowLight = isShowLight this.isShowLight = isShowLight
this.PestLight(this.zoomData, isShowLight) this.initMap(this.zoomData, isShowLight)
} else { } else {
let isShowLight = '' let isShowLight = ''
this.isShowLight = isShowLight this.isShowLight = isShowLight
this.PestLight(this.zoomData, isShowLight) this.initMap(this.zoomData, isShowLight)
} }
}, },
scaleChange(e) { scaleChange(e) {
console.log("ee", e) console.log("ee", e)
}, },
// 线 showEchartDialog(item, survItem) {
deviceSummaryApi() { console.log('showEchartDialog', item, survItem)
let obj = { if(survItem === 1){
stationCode: this.stationCode, let dom = item.target.closest(".jczbtm_lf"); //
endTime: this.endTime, if(!dom){
startTime: this.startTime, dom = item.target.closest(".jcsssj");
survItem: this.survItem,
// auths:this.auths,
}
survItemSummary(obj).then(res => {
let that = this
this.dataListVlaue = res.result.dataList
this.timeListVlaue = res.result.timeList
this.formListVlaue = res.result.formList
this.unitValue = res.result.itemInfo.unit
// this.limitStrValue = res.result.itemInfo.limitStr
this.descriptionValue = res.result.itemInfo.description
if (this.timeListVlaue) {
setTimeout(() => {
that.$nextTick(() => {
that.drawChartTc();
})
}, 700)
} }
}) if (dom) { // /
}, let item2 = dom.dataset.item
drawChartTc() { survItem = dom.dataset.survitem
// domecharts main if(item2){
let myChart1 = this.$echarts.init(document.getElementById("maintczxtc")); item2=JSON.parse(item2)
// }else{
let option = { item2 = null;
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#3c6ae1'
}
} }
}, console.log('showEchartDialog222', dom,item2, survItem)
legend: { // :data-item="item" :data-survItem="valist.tylename"
data: [''] if(item2 && survItem){
}, this.showEchartDialog(item2, survItem)
toolbox: {},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [ //
{
offset: 0,
color: 'rgba(85,111,253,0.70)',
},
{
offset: 1,
color: 'rgba(85,111,253,0.20)',
},
],
global: false,
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: this.timeListVlaue.reverse(),
axisLabel: {
//x
show: true,
textStyle: {
color: "#fff",
},
},
} }
], }
yAxis: [ return;
{
type: 'value',
axisLabel: {
//x
show: true,
textStyle: {
color: "#fff",
},
},
}
],
series: [
{
name: this.descriptionValue,
animationDurationUpdate: 1000, // 1s
animationEasingUpdate: 'quinticInOut', // 'quinticInOut'
type: 'line',
stack: 'Total',
smooth: true,
areaStyle: {},
emphasis: {
focus: 'series'
},
lineStyle: {
color: '#3c6ae1' // 线
},
data: this.dataListVlaue.reverse(),
},
],
};
// 使
myChart1.clear();
myChart1.setOption(option);
},
//
timetrpicker(data) {
this.startTime = data.displayValue[0],
this.endTime = data.displayValue[1],
this.deviceSummaryApi()
},
//
tczxtc(val, survItem) {
this.descriptionValue = ''
this.stationCode = val
this.survItem = survItem
this.trqxzxdialogTableVisible = true
this.trbgzhuanq = true
setTimeout(() => {
this.deviceSummaryApi()
this.trbgzhuanq = false
this.trbg = true;
}, 1500)
},
agreeChange(val) {
let that = this
this.trbg = false;
if (val == '1') {
this.trbg = true
this.trbgzhuanq = true
this.trzx = false
setTimeout(() => {
this.trbgzhuanq = false
that.$nextTick(() => {
that.deviceSummaryApi()
// this.drawChartTc();
})
}, 1200)
} else if (val == '2') {
this.trbgzhuanq = true
setTimeout(() => {
that.deviceSummaryApi()
this.trbgzhuanq = false
this.trzx = true
this.trbg = false
}, 1200)
} }
this.singleEchartData = {
that.btnstatus = (val === '1') ? true : false; stationCode: item.stationCode,
deployId: item.deployId,
survItem: survItem
}
setTimeout(() => {
this.singleEchartDialogShowFlag = true;
}, 200)
}, },
PestLight(zoomnum, isShowLight) { initMap(zoomnum, isShowLight) {
let that = this; let that = this;
// let isShowLight = this.isShowLightNumber // let isShowLight = this.isShowLightNumber
getAllstationAndPestLight(isShowLight).then(res => { getAllstationAndPestLight(isShowLight).then(res => {
@ -1092,8 +898,8 @@ export default {
this.soidShowFlag = true this.soidShowFlag = true
console.log('soil click', ) console.log('soil click', )
}) })
} this.markersSoil.push(marker)
else { } else {
this.markersOther.push(marker) this.markersOther.push(marker)
} }
marker.setMap(that.aMap); marker.setMap(that.aMap);
@ -1109,7 +915,7 @@ export default {
}); });
}) })
}, },
tzalin() { tzalin() {//
this.dialogTableVisible = true this.dialogTableVisible = true
this.fwlistcover() this.fwlistcover()
this.$nextTick(() => { this.$nextTick(() => {
@ -1179,7 +985,7 @@ export default {
myChart.setOption(option); myChart.setOption(option);
}); });
}, },
tzqcalin() { tzqcalin() {//
this.qcdialogTableVisible = true this.qcdialogTableVisible = true
this.qclistcover() this.qclistcover()
this.$nextTick(() => { this.$nextTick(() => {
@ -1263,7 +1069,7 @@ export default {
}, },
getNewestDataList() { getNewestDataList() {
getNewestData().then(res => { getNewestData().then(res => {
this.listData = res.result.HisSurvData this.listData = res.result.soilHisSurvData
}) })
}, },
getPollutionDictList() { getPollutionDictList() {
@ -1481,13 +1287,11 @@ export default {
this.inforname = onformation.realname this.inforname = onformation.realname
} }
}, },
guanbi() { qcguanbi() {//
this.dialogTableVisible = false
},
qcguanbi() {
this.qcdialogTableVisible = false this.qcdialogTableVisible = false
this.qyinfordtdialogTableVisible = false this.qyinfordtdialogTableVisible = false
this.trqxzxdialogTableVisible = false this.dialogTableVisible = false
this.singleEchartDialogShowFlag = false
}, },
screen() { screen() {
let element = document.documentElement; let element = document.documentElement;
@ -1526,6 +1330,8 @@ export default {
arr = this.markersOrient.filter(item => item.getExtData().name.indexOf("对竹河") != -1); arr = this.markersOrient.filter(item => item.getExtData().name.indexOf("对竹河") != -1);
} else if (flag == 'tuanbaihe') { } else if (flag == 'tuanbaihe') {
arr = this.markersOrient.filter(item => item.getExtData().name.indexOf("团柏河") != -1); arr = this.markersOrient.filter(item => item.getExtData().name.indexOf("团柏河") != -1);
} else if (flag == 'soil') {
arr = this.markersSoil;
} }
} }
if (arr && arr.length > 0) { if (arr && arr.length > 0) {
@ -1567,17 +1373,6 @@ export default {
right: 38%; right: 38%;
} }
.tz_cov {
width: 100%;
height: 30vw;
margin: 0 auto;
/* margin-top: 4vw; */
border: 1px solid #0169d0;
position: relative;
background: rgba(16, 45, 80, 1);
box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
}
.tz_cov_top { .tz_cov_top {
width: 40%; width: 40%;
height: 3vw; height: 3vw;

View File

@ -61,15 +61,12 @@ export default {
// yzm:[ // yzm:[
// {required:true,message:'',trigger:"blur"} // {required:true,message:'',trigger:"blur"}
// ] // ]
} },
timer:null,
}; };
}, },
created(){ created(){
this.getCode() this.getCode()
//
setInterval(() => {
this.getCode()
}, 30000);
}, },
methods: { methods: {
submitForm(formName){ submitForm(formName){
@ -94,6 +91,10 @@ export default {
captcha: this.rulesForm.yzm, captcha: this.rulesForm.yzm,
checkKey:1629428467008, checkKey:1629428467008,
}).then((data)=>{ }).then((data)=>{
if(this.timer){
clearInterval(this.timer);
this.timer = null;
}
if(data.code === 200){ if(data.code === 200){
// window.sessionStorage.setItem('token', data.result.token) // window.sessionStorage.setItem('token', data.result.token)
window.sessionStorage.setItem('password', JSON.stringify(data.result.userInfo)); window.sessionStorage.setItem('password', JSON.stringify(data.result.userInfo));
@ -101,7 +102,8 @@ export default {
this.$router.push('/'); this.$router.push('/');
// window.location.href= '/Home'; // window.location.href= '/Home';
}else{ }else{
this.$message.error(data.message) this.$message.error(data.message);
this.getCode()
} }
}); });
}else{ }else{
@ -115,9 +117,12 @@ export default {
getCodeInfo(now).then((res) =>{ getCodeInfo(now).then((res) =>{
if (res.success == true) { if (res.success == true) {
this.codeUrl = res.result this.codeUrl = res.result
console.log(this.codeUrl) // console.log(this.codeUrl)
// this.codeUrl = res.data.img // this.codeUrl = res.data.img
} }
this.timer = setTimeout(() => {
this.getCode()
}, 60000);
}) })
} }
} }

View File

@ -6,7 +6,7 @@
:delay="100" :delay="100"
:isFlat="true" :isFlat="true"
> >
<div class="main2"> <div class="main2" v-if="DetailList">
<video class="fullscreenvideo" id="bgvid" playsinline="" autoplay="" muted="" loop=""> <video class="fullscreenvideo" id="bgvid" playsinline="" autoplay="" muted="" loop="">
<!-- <source src="@/assets/image/bg2.mp4" type="video/mp4">--> <!-- <source src="@/assets/image/bg2.mp4" type="video/mp4">-->
<source src="http://fxnsp.zgzhny.com/lh-api/sys/common/static/v/bg2.mp4" type="video/mp4"> <source src="http://fxnsp.zgzhny.com/lh-api/sys/common/static/v/bg2.mp4" type="video/mp4">
@ -18,9 +18,9 @@
<div class="nav_btn"> <div class="nav_btn">
<div class="btn_left"> <div class="btn_left">
<img src="@/assets/image/return.png" class="returnimg" alt="" onClick="javaScript:history.go(-1)"> <img src="@/assets/image/return.png" class="returnimg" alt="" onClick="javaScript:history.go(-1)">
<span class="btn_left_time"> {{ nowTime }}</span> <span class="btn_left_tianq" style="z-index: 9999;"><hefentianqi/></span> <span class="btn_left_time"> {{ nowTime }}</span> <span class="btn_left_tianq" style="z-index: 9999;"> </span>
</div> </div>
<div class="btn_right"> <div class="btn_right"><hefentianqi/>
<img src="@/assets/image/quanping.png" class="quanping" v-if="fullscreen==false" @click="screen" alt=""> <img src="@/assets/image/quanping.png" class="quanping" v-if="fullscreen==false" @click="screen" alt="">
<img src="@/assets/image/quanpingtui.png" class="quanping" @click="screen" alt="" v-else> <img src="@/assets/image/quanpingtui.png" class="quanping" @click="screen" alt="" v-else>
<span class="btn_right_time"><img src="@/assets/image/header.png" @click="dialogVisible = true" class="peoimg" <span class="btn_right_time"><img src="@/assets/image/header.png" @click="dialogVisible = true" class="peoimg"
@ -111,7 +111,7 @@
<img src="@/assets/image/sbsl02.png" class="in1con_lf_imgone" alt=""> <img src="@/assets/image/sbsl02.png" class="in1con_lf_imgone" alt="">
<span class="in1con_lf_imglf_tit">监测项</span> <span class="in1con_lf_imglf_tit">监测项</span>
<span class="in1con_lf_imglf_num"><span <span class="in1con_lf_imglf_num"><span
class="in1con_lf_imglf_num_jix">{{ DetailList.deviceCount }}</span></span> class="in1con_lf_imglf_num_jix">{{ DetailList.survColorItems.length }}</span></span>
</div> </div>
<div <div
class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse"> class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
@ -128,25 +128,23 @@
<span class="in1con_lf_titshow">重要污染实时监测</span> <span class="in1con_lf_titshow">重要污染实时监测</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt=""> <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div> </div>
<ul class="liMarqueeUp" style="height:10vw;overflow:hidden;"> <ul class="liMarqueeUp" style="height:226px;overflow:hidden;" @click="showEchartDialog($event, 1)" >
<div @click.stop="handleClick($event)">
<vue-seamless-scroll :data="DetailList.latestData" class="wp-1 hp-1" :class-option="classOption"> <vue-seamless-scroll :data="DetailList.latestData" class="wp-1 hp-1" :class-option="classOption">
<li class="jcsssj2" v-for="(item,index) in DetailList.latestData" :key="index" <li class="jcsssj2" v-for="(item,index) in DetailList.latestData" :key="index"
:data-survItem="item.survItem"> :data-survItem="item.survItem" >
<img src="@/assets/image/xian2.png" class="jcsssj_xian2" alt=""> <img src="@/assets/image/xian2.png" class="jcsssj_xian2" alt="">
<div class="jcsssj_rt" style="display:block;"> <div class="jcsssj_rt" style="display:block;">
<!-- @click="tczxtc(item.survItem)" --> <!-- @click="showEchartDialog(item.survItem)" -->
<div style="float: left;width: 50%;"> <div style="float: left;width: 50%;">
<span class="jcsssj_rtbiao" :style="{background:(item.color)}">{{ item.name }}</span> <span class="jcsssj_rtbiao" :style="{background:(item.color)}">{{ item.name }}</span>
<span class="jcsssj_rt_num"><span <span class="jcsssj_rt_num"><span
class="in1con_lf_imglf_num_jix">{{ item.value }}</span>{{ item.unit }}</span> class="in1con_lf_imglf_num_jix">{{ item.value }}</span>{{ item.unit }}</span>
<!-- <img src="@/assets/image/up.png" class="jcsssj_rt_up" alt=""> --> <!-- <img src="@/assets/image/up.png" class="jcsssj_rt_up" alt=""> -->
</div>
<span class="jcsssj_rt_time">{{ item.dataDateTime }}</span>
</div> </div>
<span class="jcsssj_rt_time">{{ item.dataDateTime }}</span>
</div>
</li> </li>
</vue-seamless-scroll> </vue-seamless-scroll>
</div>
</ul> </ul>
</div> </div>
</div> </div>
@ -199,34 +197,34 @@
<div> <div>
<div class="changguiwucanshu"> <div class="changguiwucanshu">
<div> <div>
<div class="wucanshuDiv" @click="tczxtc('dataWaterTn')"> <div class="wucanshuDiv" @click="showEchartDialog(DetailList,'dataWaterTemp')">
<div class="wucanshuValueDiv">12.6<span class="typeStyle"></span></div> <div class="wucanshuValueDiv">{{ DetailList.latestWaterData[0].dataWaterTemp }}<span class="typeStyle"></span></div>
</div> </div>
<div class="wucanshuNameDiv">水温</div> <div class="wucanshuNameDiv">水温</div>
</div> </div>
<div> <div>
<div class="wucanshuDiv" @click="tczxtc('dataWaterTn')"> <div class="wucanshuDiv" @click="showEchartDialog(DetailList,'dataWaterPh')">
<div class="wucanshuValueDiv">6.9<span class="typeStyle"></span></div> <div class="wucanshuValueDiv">{{ DetailList.latestWaterData[0].dataWaterPh }}<span class="typeStyle"></span></div>
</div> </div>
<div class="wucanshuNameDiv">PH值</div> <div class="wucanshuNameDiv">PH值</div>
</div> </div>
</div> </div>
<div class="changguiwucanshu" @click="tczxtc('dataWaterTn')"> <div class="changguiwucanshu" >
<div> <div>
<div class="wucanshuDiv"> <div class="wucanshuDiv" @click="showEchartDialog(DetailList,'dataWaterDo')">
<div class="wucanshuValueDiv">12.3<span class="typeStyle">mg/L</span></div> <div class="wucanshuValueDiv">{{ DetailList.latestWaterData[0].dataWaterDo }}<span class="typeStyle">mg/L</span></div>
</div> </div>
<div class="wucanshuNameDiv">溶解氧</div> <div class="wucanshuNameDiv">溶解氧</div>
</div> </div>
<div> <div>
<div class="wucanshuDiv" @click="tczxtc('dataWaterTn')"> <div class="wucanshuDiv" @click="showEchartDialog(DetailList,'dataWaterDdl')">
<div class="wucanshuValueDiv">841<span class="typeStyle">μS/cm</span></div> <div class="wucanshuValueDiv">{{ DetailList.latestWaterData[0].dataWaterDdl }}<span class="typeStyle">μS/cm</span></div>
</div> </div>
<div class="wucanshuNameDiv">电导率</div> <div class="wucanshuNameDiv">电导率</div>
</div> </div>
<div> <div>
<div class="wucanshuDiv" @click="tczxtc('dataWaterTn')"> <div class="wucanshuDiv" @click="showEchartDialog(DetailList,'dataWaterNtu')">
<div class="wucanshuValueDiv">888<span class="typeStyle">NTU</span></div> <div class="wucanshuValueDiv">{{ DetailList.latestWaterData[0].dataWaterNtu }}<span class="typeStyle">NTU</span></div>
</div> </div>
<div class="wucanshuNameDiv">浊度</div> <div class="wucanshuNameDiv">浊度</div>
</div> </div>
@ -286,71 +284,7 @@
</el-row> </el-row>
</div> </div>
</el-dialog> </el-dialog>
<!-- 曲线弹窗 --> <SingleEchartDialog v-if="singleEchartDialogShowFlag" :item="singleEchartData" @close="singleEchartDialogShowFlag=false"/>
<el-dialog
width="70%"
top="16vh"
:visible.sync="trqxzxdialogTableVisible"
:modal-append-to-body="false"
>
<div class="tz_cov" style="height: 35vw">
<div
style="width:100%;height:100%;margin:0 auto;position: absolute;top:0;left:0;z-index:444;background:rgba(0,0,0,0.4);"
v-if="trbgzhuanq"></div>
<img src="@/assets/image/loading.gif" alt=""
style="width:150px;height:150px;margin:0 auto;position: absolute;top:280px;left:45%;z-index: 555;"
v-if="trbgzhuanq">
<img
src="@/assets/image/guanbi.png"
class="guanbiann"
@click="qcguanbi"
alt=""
/>
<div class="tz_cov_top">
<span class="tz_cov_top_tit">{{ descriptionValue }}</span>
</div>
<div class="trwdcov jgdhei">
<div class="trwdcov_top">
<span class="trwdcov_top_tit">时间范围</span>
<el-date-picker
class="trwdcov_top_time"
v-model="timetr"
type="daterange"
@blur="timetrpicker"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
<span class="trwdcov_top_tit">展示方式</span>
<el-radio-group v-model="radiotr" @change="agreeChange">
<el-radio label="1">折线</el-radio>
<el-radio label="2">表格</el-radio>
</el-radio-group>
</div>
<el-table
:data="formListVlaue"
v-if="trzx"
height="480"
border
style="margin-top: 1vw; background: none"
>
<el-table-column prop="date" label="时间"></el-table-column>
<el-table-column prop="name" :label="'数值单位:' + unitValue"></el-table-column>
</el-table>
<template v-else>
<div id="maintczxtc" style="width: 100%; height: 500px" v-if="trbg"></div>
</template>
</div>
<img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
<img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
<img src="@/assets/image/kuang_zuoxia.png" class="in2con_zzx" alt="">
<img src="@/assets/image/kuang_youxia.png" class="in2con_zyx" alt="">
<img src="@/assets/image/sanguang.png" class="tzsanguang" alt="">
<img src="@/assets/image/sanguang.png" class="tzsanguangbt" alt="">
</div>
</el-dialog>
</div> </div>
</ScaleBox> </ScaleBox>
</template> </template>
@ -361,9 +295,13 @@ import {getStationDetail, getStationDisplay, getIndexSummry, survItemSummary, ge
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from 'vue-seamless-scroll'
import {ModelFbx} from "vue-3d-model"; import {ModelFbx} from "vue-3d-model";
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";
export default { export default {
components: { components: {
SingleEchartDialog,
SoilDialog,
ModelFbx, ModelFbx,
vueSeamlessScroll, vueSeamlessScroll,
hefentianqi, hefentianqi,
@ -372,6 +310,8 @@ export default {
name: "MywrList", name: "MywrList",
data() { data() {
return { return {
singleEchartDialogShowFlag: false,
singleEchartData: null,
stationCode: '', stationCode: '',
urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/', urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
player: null, player: null,
@ -510,12 +450,7 @@ export default {
} }
} }
}); });
// console.log('', this.riverList) this.initEchartData(this.echartIndex)
setTimeout(() => {
this.$nextTick(() => { // echarts
this.initEchartData(this.echartIndex)
})
}, 1000);
} }
}) })
}, },
@ -623,178 +558,31 @@ export default {
echartObj.setOption(optionLine); echartObj.setOption(optionLine);
}) })
}, },
handleClick(e) {
const item = e.target.closest(".jcsssj2"); //
if (item) { // /
let survitem = item.dataset.survitem
this.tczxtc(survitem)
}
},
zdinfor(){ zdinfor(){
this.qczddialogTableVisible=true; this.qczddialogTableVisible=true;
}, },
tczxtc(survItem) {//echart showEchartDialog(item, survItem) {
this.descriptionValue = '' console.log('showEchartDialog', item, survItem)
this.stationCode = this.$route.query.stationCode if(survItem === 1){
this.survItem = survItem console.log('showEchartDialog111', item, survItem)
this.trqxzxdialogTableVisible = true const dom = item.target.closest(".jcsssj2"); //
this.trbgzhuanq = true if (dom) { // /
setTimeout(() => { survItem = dom.dataset.survitem
this.trbgzhuanq = false if(survItem){
this.trbg = true; this.showEchartDialog(this.DetailList, survItem)
this.deviceSummaryApi() }
}, 500)
},
// 线
deviceSummaryApi() {
let obj = {
stationCode: this.stationCode,
endTime: this.endTime,
startTime: this.startTime,
survItem: this.survItem,
// auths:this.auths,
}
survItemSummary(obj).then(res => {
let that = this
this.dataListVlaue = res.result.dataList
this.timeListVlaue = res.result.timeList
this.formListVlaue = res.result.formList
this.unitValue = res.result.itemInfo.unit
// this.limitStrValue = res.result.itemInfo.limitStr
this.descriptionValue = res.result.itemInfo.description
if (this.timeListVlaue) {
setTimeout(() => {
that.$nextTick(() => {
that.drawChartTc();
})
}, 700)
} }
}) return;
},
drawChartTc() {
// domecharts main
let myChart1 = this.$echarts.init(document.getElementById("maintczxtc"));
//
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#3c6ae1'
}
}
},
legend: {
data: ['']
},
toolbox: {},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [ //
{
offset: 0,
color: 'rgba(85,111,253,0.70)',
},
{
offset: 1,
color: 'rgba(85,111,253,0.20)',
},
],
global: false,
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: this.timeListVlaue.reverse(),
axisLabel: {
//x
show: true,
textStyle: {
color: "#fff",
},
},
}
],
yAxis: [
{
type: 'value',
axisLabel: {
//x
show: true,
textStyle: {
color: "#fff",
},
},
}
],
series: [
{
name: this.descriptionValue,
animationDurationUpdate: 1000, // 1s
animationEasingUpdate: 'quinticInOut', // 'quinticInOut'
type: 'line',
stack: 'Total',
smooth: true,
areaStyle: {},
emphasis: {
focus: 'series'
},
lineStyle: {
color: '#3c6ae1' // 线
},
data: this.dataListVlaue.reverse(),
},
],
};
// 使
myChart1.clear();
myChart1.setOption(option);
},
agreeChange(val) {//线
let that = this
this.trbg = false;
if (val == '1') {
this.trbg = true
this.trbgzhuanq = true
this.trzx = false
setTimeout(() => {
this.trbgzhuanq = false
that.$nextTick(() => {
that.deviceSummaryApi()
// this.drawChartTc();
})
}, 1200)
} else if (val == '2') {
this.trbgzhuanq = true
setTimeout(() => {
that.deviceSummaryApi()
this.trbgzhuanq = false
this.trzx = true
this.trbg = false
}, 1200)
} }
that.btnstatus = (val === '1') ? true : false; console.log('showEchartDialog222', item, survItem)
}, this.singleEchartData = {
// stationCode: item.stationCode,
timetrpicker(data) { deployId: item.deployId,
this.startTime = data.displayValue[0]; survItem: survItem
this.endTime = data.displayValue[1]; }
this.deviceSummaryApi() setTimeout(() => {
this.singleEchartDialogShowFlag = true;
}, 200)
}, },
// 退 // 退
handleClosetuichu(done) { handleClosetuichu(done) {