添加土壤数据弹窗50%
This commit is contained in:
parent
650db5e240
commit
22fdef3237
|
|
@ -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;
|
||||||
}
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 744 B |
Binary file not shown.
|
After Width: | Height: | Size: 910 B |
|
|
@ -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() {
|
||||||
|
// 基于准备好的dom,初始化echarts实例 这个和上面的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>
|
||||||
|
|
@ -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
|
||||||
// 基于准备好的dom,初始化echarts实例 这个和上面的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;
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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() {
|
|
||||||
// 基于准备好的dom,初始化echarts实例 这个和上面的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) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue