添加土壤数据弹窗50%
This commit is contained in:
wgx
parent
650db5e240
commit
22fdef3237
|
|
@ -258,7 +258,7 @@
|
|||
width: 33.33%;
|
||||
text-align: center;
|
||||
float: left;
|
||||
margin-top: 0.5vw;
|
||||
/*margin-top: 0.5vw;*/
|
||||
}
|
||||
.sx_cov_lt_tit{
|
||||
font-size:0.8vw ;
|
||||
|
|
@ -898,3 +898,11 @@
|
|||
::-webkit-scrollbar {
|
||||
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 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">
|
||||
<div class="sx_cov">
|
||||
<span class="sx_covtit">
|
||||
|
|
@ -177,6 +177,10 @@
|
|||
<img src="@/assets/image/icon-yellow.png" class="xcdimg" alt="">
|
||||
<span class="scdlist_tit">团柏河监测站</span>
|
||||
</div>
|
||||
<div class="scdlist" @click="switchIcon('soil')">
|
||||
<img src="@/assets/image/soil.png" class="xcdimg" alt="">
|
||||
<span class="scdlist_tit">土壤监测点</span>
|
||||
</div>
|
||||
</div>
|
||||
<transition enter-active-class="animate__animated animate__backInUp"
|
||||
leave-active-class="animate__animated animate__backOutDown">
|
||||
|
|
@ -250,10 +254,10 @@
|
|||
</div>
|
||||
</viewer>
|
||||
</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">
|
||||
<div class="jczbtm_lf" v-for="valist in item.wrwcode" :key="valist.index"
|
||||
@click="tczxtc(item.stationCode,valist.tylename)">
|
||||
<div class="jczbtm_lf" v-for="(valist,index) in item.wrwcode" :key="valist.index"
|
||||
:data-item="JSON.stringify(item)" :data-survItem="valist.tylename" >
|
||||
<img :src="urlimg + valist.icon" class="tpimg" alt="">
|
||||
<div class="jczbtm_lf_rt">
|
||||
<span class="jczbtm_lf_rttit">{{ valist.name }}</span>
|
||||
|
|
@ -278,7 +282,8 @@
|
|||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||||
</div>
|
||||
<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_onenum">
|
||||
<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess0.detailValue }}</span>
|
||||
|
|
@ -289,7 +294,8 @@
|
|||
<span class="mywrcov_onenum"><span
|
||||
class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess1.detailValue }}</span></span>
|
||||
</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
|
||||
class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess2.detailValue }}</span></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>
|
||||
<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="">
|
||||
</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">
|
||||
<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="">
|
||||
<div class="jcsssj_rt" @click="tczxtc(item.stationCode,item.survItem)">
|
||||
<div class="jcsssj_rt">
|
||||
<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_rt_numsy">
|
||||
<!-- <span class="in1con_lf_imglf_num_jix">{{item.value}}</span> -->
|
||||
|
|
@ -342,7 +348,7 @@
|
|||
<!-- 台账弹窗 -->
|
||||
<el-dialog width="60%" :visible.sync="dialogTableVisible">
|
||||
<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">
|
||||
<span class="tz_cov_top_tit">农业废弃物台账</span>
|
||||
</div>
|
||||
|
|
@ -531,75 +537,9 @@
|
|||
</el-row>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
</template>
|
||||
|
|
@ -622,10 +562,12 @@ import vueSeamlessScroll from 'vue-seamless-scroll'
|
|||
import hefentianqi from '@/pages/weather/weather.vue'
|
||||
import SoilDialog from '@/components/SoilDialog.vue'
|
||||
import {_colors} from '@/utils/color.js'
|
||||
import SingleEchartDialog from "@/components/SingleEchartDialog.vue";
|
||||
|
||||
export default {
|
||||
name: 'mainHome',
|
||||
components: {
|
||||
SingleEchartDialog,
|
||||
vueSeamlessScroll,
|
||||
hefentianqi,
|
||||
ScaleBox,
|
||||
|
|
@ -633,9 +575,12 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
singleEchartDialogShowFlag: false,
|
||||
singleEchartData: null,
|
||||
aMap: null,
|
||||
dataTypeEchart: true,
|
||||
markersOrient: [],
|
||||
markersSoil: [],
|
||||
markersOther: [],
|
||||
lastClickIcon: '',
|
||||
urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
|
||||
|
|
@ -668,13 +613,6 @@ export default {
|
|||
qcdtdialogTableVisible: false,
|
||||
qyinfordtdialogTableVisible: false,
|
||||
shipdialogTableVisible: false,
|
||||
trqxzxdialogTableVisible: false,
|
||||
trbg: null,
|
||||
trzx: false,
|
||||
trbgzhuanq: false,
|
||||
descriptionValue: null,
|
||||
timetr: [new Date(), new Date()],
|
||||
radiotr: '1',
|
||||
qyinformation: '',
|
||||
listData: [],
|
||||
summryAllData: null,
|
||||
|
|
@ -756,7 +694,7 @@ export default {
|
|||
// 实时时间
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
this.PestLight(this.zoomData, this.isShowLightNumber);
|
||||
this.initMap(this.zoomData, this.isShowLightNumber);
|
||||
})
|
||||
}, 2000)
|
||||
//初始化数据
|
||||
|
|
@ -771,9 +709,9 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
initSoilData(){
|
||||
getSoilSummry({deployIds:['1679816733238575105'], "summrayMode":"dayhours"}).then(res=>{
|
||||
console.log(res)
|
||||
})
|
||||
// getSoilSummry({deployIds:['1679816733238575105'], "summrayMode":"dayhours"}).then(res=>{
|
||||
// console.log(res)
|
||||
// })
|
||||
},
|
||||
formatter: function (num) {
|
||||
return num.toFixed(3)
|
||||
|
|
@ -789,10 +727,10 @@ export default {
|
|||
this.zoomData = 14
|
||||
if (this.isShowLight == undefined) {
|
||||
let isShowLight = '1'
|
||||
this.PestLight(this.zoomData, isShowLight);
|
||||
this.initMap(this.zoomData, isShowLight);
|
||||
} else {
|
||||
let isShowLight = this.isShowLight
|
||||
this.PestLight(this.zoomData, isShowLight);
|
||||
this.initMap(this.zoomData, isShowLight);
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
|
|
@ -802,9 +740,9 @@ export default {
|
|||
} else {// 地图模式
|
||||
this.zoomData = 15
|
||||
if (this.isShowLight == undefined) {
|
||||
this.PestLight(this.zoomData, '1');
|
||||
this.initMap(this.zoomData, '1');
|
||||
} else {
|
||||
this.PestLight(this.zoomData, this.isShowLight);
|
||||
this.initMap(this.zoomData, this.isShowLight);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -864,181 +802,49 @@ export default {
|
|||
if (value == true) {
|
||||
let isShowLight = '1'
|
||||
this.isShowLight = isShowLight
|
||||
this.PestLight(this.zoomData, isShowLight)
|
||||
this.initMap(this.zoomData, isShowLight)
|
||||
} else {
|
||||
let isShowLight = ''
|
||||
this.isShowLight = isShowLight
|
||||
this.PestLight(this.zoomData, isShowLight)
|
||||
this.initMap(this.zoomData, isShowLight)
|
||||
}
|
||||
},
|
||||
scaleChange(e) {
|
||||
console.log("ee", e)
|
||||
},
|
||||
// 历史数据曲线弹唱
|
||||
deviceSummaryApi() {
|
||||
let obj = {
|
||||
stationCode: this.stationCode,
|
||||
endTime: this.endTime,
|
||||
startTime: this.startTime,
|
||||
survItem: this.survItem,
|
||||
// auths:this.auths,
|
||||
showEchartDialog(item, survItem) {
|
||||
console.log('showEchartDialog', item, survItem)
|
||||
if(survItem === 1){
|
||||
let dom = item.target.closest(".jczbtm_lf"); // 定位元素
|
||||
if(!dom){
|
||||
dom = item.target.closest(".jcsssj");
|
||||
}
|
||||
if (dom) { // 是否是滚动组件的某一行/列
|
||||
let item2 = dom.dataset.item
|
||||
survItem = dom.dataset.survitem
|
||||
if(item2){
|
||||
item2=JSON.parse(item2)
|
||||
}else{
|
||||
item2 = null;
|
||||
}
|
||||
console.log('showEchartDialog222', dom,item2, survItem)
|
||||
// :data-item="item" :data-survItem="valist.tylename"
|
||||
if(item2 && survItem){
|
||||
this.showEchartDialog(item2, survItem)
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
this.singleEchartData = {
|
||||
stationCode: item.stationCode,
|
||||
deployId: item.deployId,
|
||||
survItem: survItem
|
||||
}
|
||||
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)
|
||||
}
|
||||
})
|
||||
this.singleEchartDialogShowFlag = true;
|
||||
}, 200)
|
||||
},
|
||||
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);
|
||||
},
|
||||
// 时间
|
||||
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)
|
||||
}
|
||||
|
||||
that.btnstatus = (val === '1') ? true : false;
|
||||
},
|
||||
PestLight(zoomnum, isShowLight) {
|
||||
initMap(zoomnum, isShowLight) {
|
||||
let that = this;
|
||||
// let isShowLight = this.isShowLightNumber
|
||||
getAllstationAndPestLight(isShowLight).then(res => {
|
||||
|
|
@ -1092,8 +898,8 @@ export default {
|
|||
this.soidShowFlag = true
|
||||
console.log('soil click', )
|
||||
})
|
||||
}
|
||||
else {
|
||||
this.markersSoil.push(marker)
|
||||
} else {
|
||||
this.markersOther.push(marker)
|
||||
}
|
||||
marker.setMap(that.aMap);
|
||||
|
|
@ -1109,7 +915,7 @@ export default {
|
|||
});
|
||||
})
|
||||
},
|
||||
tzalin() {
|
||||
tzalin() {//农业台账
|
||||
this.dialogTableVisible = true
|
||||
this.fwlistcover()
|
||||
this.$nextTick(() => {
|
||||
|
|
@ -1179,7 +985,7 @@ export default {
|
|||
myChart.setOption(option);
|
||||
});
|
||||
},
|
||||
tzqcalin() {
|
||||
tzqcalin() {//台账禽畜弹窗
|
||||
this.qcdialogTableVisible = true
|
||||
this.qclistcover()
|
||||
this.$nextTick(() => {
|
||||
|
|
@ -1263,7 +1069,7 @@ export default {
|
|||
},
|
||||
getNewestDataList() {
|
||||
getNewestData().then(res => {
|
||||
this.listData = res.result.HisSurvData
|
||||
this.listData = res.result.soilHisSurvData
|
||||
})
|
||||
},
|
||||
getPollutionDictList() {
|
||||
|
|
@ -1481,13 +1287,11 @@ export default {
|
|||
this.inforname = onformation.realname
|
||||
}
|
||||
},
|
||||
guanbi() {
|
||||
this.dialogTableVisible = false
|
||||
},
|
||||
qcguanbi() {
|
||||
qcguanbi() {//全部关闭
|
||||
this.qcdialogTableVisible = false
|
||||
this.qyinfordtdialogTableVisible = false
|
||||
this.trqxzxdialogTableVisible = false
|
||||
this.dialogTableVisible = false
|
||||
this.singleEchartDialogShowFlag = false
|
||||
},
|
||||
screen() {
|
||||
let element = document.documentElement;
|
||||
|
|
@ -1526,6 +1330,8 @@ export default {
|
|||
arr = this.markersOrient.filter(item => item.getExtData().name.indexOf("对竹河") != -1);
|
||||
} else if (flag == 'tuanbaihe') {
|
||||
arr = this.markersOrient.filter(item => item.getExtData().name.indexOf("团柏河") != -1);
|
||||
} else if (flag == 'soil') {
|
||||
arr = this.markersSoil;
|
||||
}
|
||||
}
|
||||
if (arr && arr.length > 0) {
|
||||
|
|
@ -1567,17 +1373,6 @@ export default {
|
|||
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 {
|
||||
width: 40%;
|
||||
height: 3vw;
|
||||
|
|
|
|||
|
|
@ -61,15 +61,12 @@ export default {
|
|||
// yzm:[
|
||||
// {required:true,message:'请输入验证码',trigger:"blur"}
|
||||
// ]
|
||||
}
|
||||
},
|
||||
timer:null,
|
||||
};
|
||||
},
|
||||
created(){
|
||||
this.getCode()
|
||||
// 设置整点定时发送请求
|
||||
setInterval(() => {
|
||||
this.getCode()
|
||||
}, 30000);
|
||||
},
|
||||
methods: {
|
||||
submitForm(formName){
|
||||
|
|
@ -94,6 +91,10 @@ export default {
|
|||
captcha: this.rulesForm.yzm,
|
||||
checkKey:1629428467008,
|
||||
}).then((data)=>{
|
||||
if(this.timer){
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
if(data.code === 200){
|
||||
// window.sessionStorage.setItem('token', data.result.token)
|
||||
window.sessionStorage.setItem('password', JSON.stringify(data.result.userInfo));
|
||||
|
|
@ -101,7 +102,8 @@ export default {
|
|||
this.$router.push('/');
|
||||
// window.location.href= '/Home';
|
||||
}else{
|
||||
this.$message.error(data.message)
|
||||
this.$message.error(data.message);
|
||||
this.getCode()
|
||||
}
|
||||
});
|
||||
}else{
|
||||
|
|
@ -115,9 +117,12 @@ export default {
|
|||
getCodeInfo(now).then((res) =>{
|
||||
if (res.success == true) {
|
||||
this.codeUrl = res.result
|
||||
console.log(this.codeUrl)
|
||||
// console.log(this.codeUrl)
|
||||
// this.codeUrl = res.data.img
|
||||
}
|
||||
this.timer = setTimeout(() => {
|
||||
this.getCode()
|
||||
}, 60000);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
:delay="100"
|
||||
:isFlat="true"
|
||||
>
|
||||
<div class="main2">
|
||||
<div class="main2" v-if="DetailList">
|
||||
<video class="fullscreenvideo" id="bgvid" playsinline="" autoplay="" muted="" loop="">
|
||||
<!-- <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">
|
||||
|
|
@ -18,9 +18,9 @@
|
|||
<div class="nav_btn">
|
||||
<div class="btn_left">
|
||||
<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 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/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"
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
<img src="@/assets/image/sbsl02.png" class="in1con_lf_imgone" alt="">
|
||||
<span class="in1con_lf_imglf_tit">监测项</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
|
||||
class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
|
||||
|
|
@ -128,14 +128,13 @@
|
|||
<span class="in1con_lf_titshow">重要污染实时监测</span>
|
||||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||||
</div>
|
||||
<ul class="liMarqueeUp" style="height:10vw;overflow:hidden;">
|
||||
<div @click.stop="handleClick($event)">
|
||||
<ul class="liMarqueeUp" style="height:226px;overflow:hidden;" @click="showEchartDialog($event, 1)" >
|
||||
<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"
|
||||
:data-survItem="item.survItem" >
|
||||
<img src="@/assets/image/xian2.png" class="jcsssj_xian2" alt="">
|
||||
<div class="jcsssj_rt" style="display:block;">
|
||||
<!-- @click="tczxtc(item.survItem)" -->
|
||||
<!-- @click="showEchartDialog(item.survItem)" -->
|
||||
<div style="float: left;width: 50%;">
|
||||
<span class="jcsssj_rtbiao" :style="{background:(item.color)}">{{ item.name }}</span>
|
||||
<span class="jcsssj_rt_num"><span
|
||||
|
|
@ -146,7 +145,6 @@
|
|||
</div>
|
||||
</li>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -199,34 +197,34 @@
|
|||
<div>
|
||||
<div class="changguiwucanshu">
|
||||
<div>
|
||||
<div class="wucanshuDiv" @click="tczxtc('dataWaterTn')">
|
||||
<div class="wucanshuValueDiv">12.6<span class="typeStyle">℃</span></div>
|
||||
<div class="wucanshuDiv" @click="showEchartDialog(DetailList,'dataWaterTemp')">
|
||||
<div class="wucanshuValueDiv">{{ DetailList.latestWaterData[0].dataWaterTemp }}<span class="typeStyle">℃</span></div>
|
||||
</div>
|
||||
<div class="wucanshuNameDiv">水温</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="wucanshuDiv" @click="tczxtc('dataWaterTn')">
|
||||
<div class="wucanshuValueDiv">6.9<span class="typeStyle"></span></div>
|
||||
<div class="wucanshuDiv" @click="showEchartDialog(DetailList,'dataWaterPh')">
|
||||
<div class="wucanshuValueDiv">{{ DetailList.latestWaterData[0].dataWaterPh }}<span class="typeStyle"></span></div>
|
||||
</div>
|
||||
<div class="wucanshuNameDiv">PH值</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="changguiwucanshu" @click="tczxtc('dataWaterTn')">
|
||||
<div class="changguiwucanshu" >
|
||||
<div>
|
||||
<div class="wucanshuDiv">
|
||||
<div class="wucanshuValueDiv">12.3<span class="typeStyle">mg/L</span></div>
|
||||
<div class="wucanshuDiv" @click="showEchartDialog(DetailList,'dataWaterDo')">
|
||||
<div class="wucanshuValueDiv">{{ DetailList.latestWaterData[0].dataWaterDo }}<span class="typeStyle">mg/L</span></div>
|
||||
</div>
|
||||
<div class="wucanshuNameDiv">溶解氧</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="wucanshuDiv" @click="tczxtc('dataWaterTn')">
|
||||
<div class="wucanshuValueDiv">841<span class="typeStyle">μS/cm</span></div>
|
||||
<div class="wucanshuDiv" @click="showEchartDialog(DetailList,'dataWaterDdl')">
|
||||
<div class="wucanshuValueDiv">{{ DetailList.latestWaterData[0].dataWaterDdl }}<span class="typeStyle">μS/cm</span></div>
|
||||
</div>
|
||||
<div class="wucanshuNameDiv">电导率</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="wucanshuDiv" @click="tczxtc('dataWaterTn')">
|
||||
<div class="wucanshuValueDiv">888<span class="typeStyle">NTU</span></div>
|
||||
<div class="wucanshuDiv" @click="showEchartDialog(DetailList,'dataWaterNtu')">
|
||||
<div class="wucanshuValueDiv">{{ DetailList.latestWaterData[0].dataWaterNtu }}<span class="typeStyle">NTU</span></div>
|
||||
</div>
|
||||
<div class="wucanshuNameDiv">浊度</div>
|
||||
</div>
|
||||
|
|
@ -286,71 +284,7 @@
|
|||
</el-row>
|
||||
</div>
|
||||
</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>
|
||||
<SingleEchartDialog v-if="singleEchartDialogShowFlag" :item="singleEchartData" @close="singleEchartDialogShowFlag=false"/>
|
||||
</div>
|
||||
</ScaleBox>
|
||||
</template>
|
||||
|
|
@ -361,9 +295,13 @@ import {getStationDetail, getStationDisplay, getIndexSummry, survItemSummary, ge
|
|||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
import {ModelFbx} from "vue-3d-model";
|
||||
import hefentianqi from '@/pages/weather/weather.vue'
|
||||
import SoilDialog from "@/components/SoilDialog.vue";
|
||||
import SingleEchartDialog from "@/components/SingleEchartDialog.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SingleEchartDialog,
|
||||
SoilDialog,
|
||||
ModelFbx,
|
||||
vueSeamlessScroll,
|
||||
hefentianqi,
|
||||
|
|
@ -372,6 +310,8 @@ export default {
|
|||
name: "MywrList",
|
||||
data() {
|
||||
return {
|
||||
singleEchartDialogShowFlag: false,
|
||||
singleEchartData: null,
|
||||
stationCode: '',
|
||||
urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
|
||||
player: null,
|
||||
|
|
@ -510,12 +450,7 @@ export default {
|
|||
}
|
||||
}
|
||||
});
|
||||
// console.log('对比数据初始化：', this.riverList)
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => { // 加载echarts图
|
||||
this.initEchartData(this.echartIndex)
|
||||
})
|
||||
}, 1000);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -623,178 +558,31 @@ export default {
|
|||
echartObj.setOption(optionLine);
|
||||
})
|
||||
},
|
||||
handleClick(e) {
|
||||
const item = e.target.closest(".jcsssj2"); // 定位元素
|
||||
if (item) { // 是否是滚动组件的某一行/列
|
||||
let survitem = item.dataset.survitem
|
||||
this.tczxtc(survitem)
|
||||
}
|
||||
},
|
||||
zdinfor(){
|
||||
this.qczddialogTableVisible=true;
|
||||
},
|
||||
tczxtc(survItem) {//echart弹窗
|
||||
this.descriptionValue = ''
|
||||
this.stationCode = this.$route.query.stationCode
|
||||
this.survItem = survItem
|
||||
this.trqxzxdialogTableVisible = true
|
||||
this.trbgzhuanq = true
|
||||
showEchartDialog(item, survItem) {
|
||||
console.log('showEchartDialog', item, survItem)
|
||||
if(survItem === 1){
|
||||
console.log('showEchartDialog111', item, survItem)
|
||||
const dom = item.target.closest(".jcsssj2"); // 定位元素
|
||||
if (dom) { // 是否是滚动组件的某一行/列
|
||||
survItem = dom.dataset.survitem
|
||||
if(survItem){
|
||||
this.showEchartDialog(this.DetailList, survItem)
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
console.log('showEchartDialog222', item, survItem)
|
||||
this.singleEchartData = {
|
||||
stationCode: item.stationCode,
|
||||
deployId: item.deployId,
|
||||
survItem: survItem
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.trbgzhuanq = false
|
||||
this.trbg = true;
|
||||
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)
|
||||
}
|
||||
})
|
||||
},
|
||||
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;
|
||||
},
|
||||
// 时间
|
||||
timetrpicker(data) {
|
||||
this.startTime = data.displayValue[0];
|
||||
this.endTime = data.displayValue[1];
|
||||
this.deviceSummaryApi()
|
||||
this.singleEchartDialogShowFlag = true;
|
||||
}, 200)
|
||||
},
|
||||
// 弹窗退出登录
|
||||
handleClosetuichu(done) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue