|
<template>
|
<div class="container">
|
<div class="current-header">
|
<div class="return">
|
<span @click="prev">
|
<i class="el-icon-back"></i> 返回
|
</span>
|
</div>
|
<div class="title">
|
{{currentDetails.farmName}}
|
<!-- <el-select-->
|
<!-- class="equipment-plot-select"-->
|
<!-- v-model="plotName"-->
|
<!-- placeholder="选择地块"-->
|
<!-- @change="landChangeValue($event)"-->
|
<!-- >-->
|
<!-- <el-option-->
|
<!-- v-for="(item, index) in plotList"-->
|
<!-- :key="index"-->
|
<!-- :label="item.landName"-->
|
<!-- :value="item.id"-->
|
<!-- ></el-option>-->
|
<!-- </el-select>-->
|
<!--
|
<el-select
|
class="equipment-plot-select"
|
v-model="farmName"
|
placeholder="选择地块"
|
@change="farmChangeValue($event)"
|
>
|
<el-option
|
v-for="(item, index) in farmList"
|
:key="index"
|
:label="item.farmName"
|
:value="item.id"
|
></el-option>
|
</el-select>-->
|
</div>
|
</div>
|
|
<div class="current-body">
|
<div class="current-wrapper">
|
<div class="video-boxs">
|
<div class="header">
|
<img src="../../../public/img/icon/video-logo.png" alt /> 视频监控
|
</div>
|
|
<div class="body">
|
<div class="box" v-for="(item, index) in vidList" :key="index">
|
<div class="nape-header">{{item.name}}</div>
|
<div class="nape-body">
|
<video
|
:id="'videoElement' + index"
|
controls
|
autoplay
|
muted
|
width="100%"
|
height="100%"
|
></video>
|
</div>
|
</div>
|
<div v-show="vidList.length == 0">
|
<img src="../../../public/img/video-poster.3a25068.png" alt />
|
</div>
|
</div>
|
</div>
|
|
<div class="equipment-boxs">
|
<div class="header">
|
<img src="../../../public/img/icon/equipment-logo.png" alt />物联网设备
|
</div>
|
|
<div class="body">
|
<div class="btn-grounp">
|
<ul>
|
<li
|
class="on"
|
v-for="(item,index) in staList"
|
:class="{activity:isChoose == index}"
|
:key="index"
|
@click="getStaList(index,item.stcd)"
|
>{{item.name}}</li>
|
</ul>
|
</div>
|
<div class="nape-boxs">
|
<!-- 气象监测 -->
|
<div v-for="(item, index) in stationData.weatherList" :key="index">
|
<div class="top">
|
<div class="l">
|
<img
|
v-if="item.name == '水隔离子'"
|
src="../../../public/img/staListIcon/NH4.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '雨量'"
|
src="../../../public/img/staListIcon/rain.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '土壤电导率'"
|
src="../../../public/img/staListIcon/soli-ele.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水电导率'"
|
src="../../../public/img/staListIcon/soli-ele.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '雨量累计'"
|
src="../../../public/img/staListIcon/rain.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '空气湿度'"
|
src="../../../public/img/staListIcon/soli-water.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '风向'"
|
src="../../../public/img/staListIcon/wind.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'EC'"
|
src="../../../public/img/staListIcon/EC.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '钾离子'"
|
src="../../../public/img/staListIcon/K.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '酸碱度'"
|
src="../../../public/img/staListIcon/PH.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '土壤温度'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '空气温度'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '硝酸银'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水铜离子'"
|
src="../../../public/img/staListIcon/CU2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水铅离子'"
|
src="../../../public/img/staListIcon/PB2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水镉离子'"
|
src="../../../public/img/staListIcon/CD2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'PM2.5'"
|
src="../../../public/img/staListIcon/PM25.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '气压'"
|
src="../../../public/img/staListIcon/pressure.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '光照度'"
|
src="../../../public/img/staListIcon/light.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '风速'"
|
src="../../../public/img/staListIcon/windSpeed.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'CO2'"
|
src="../../../public/img/staListIcon/CO2.png"
|
alt
|
/>
|
<img v-else src="../../../public/img/icon/wd-icon.png" alt />
|
<span>{{item.name}}</span>
|
</div>
|
|
<div class="r">
|
<span
|
class="num"
|
>{{item.valueDataList[item.valueDataList.length-1].value}}</span>
|
<span>{{item.unit}}</span>
|
</div>
|
</div>
|
<div class="bottom">
|
<div class="l">
|
<i class="el-icon-time"></i>
|
<span class="old-btn" @click="historyData(item)">历史数据</span>
|
</div>
|
|
<div
|
class="r"
|
>{{tmpTDiff(item.valueDataList[item.valueDataList.length-1].startTime)}}天前更新</div>
|
</div>
|
</div>
|
<!-- 土壤监测 -->
|
<div v-for="(item, index) in stationData.soilList" :key="index">
|
<div class="top">
|
<div class="l">
|
<img
|
v-if="item.name == '水隔离子'"
|
src="../../../public/img/staListIcon/NH4.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '雨量'"
|
src="../../../public/img/staListIcon/rain.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '土壤电导率'"
|
src="../../../public/img/staListIcon/soli-ele.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水电导率'"
|
src="../../../public/img/staListIcon/soli-ele.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '雨量累计'"
|
src="../../../public/img/staListIcon/rain.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '空气湿度'"
|
src="../../../public/img/staListIcon/soli-water.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '风向'"
|
src="../../../public/img/staListIcon/wind.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'EC'"
|
src="../../../public/img/staListIcon/EC.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '钾离子'"
|
src="../../../public/img/staListIcon/K.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '酸碱度'"
|
src="../../../public/img/staListIcon/PH.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '土壤温度'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '空气温度'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '硝酸银'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水铜离子'"
|
src="../../../public/img/staListIcon/CU2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水铅离子'"
|
src="../../../public/img/staListIcon/PB2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水镉离子'"
|
src="../../../public/img/staListIcon/CD2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'PM2.5'"
|
src="../../../public/img/staListIcon/PM25.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '气压'"
|
src="../../../public/img/staListIcon/pressure.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '光照度'"
|
src="../../../public/img/staListIcon/light.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '风速'"
|
src="../../../public/img/staListIcon/windSpeed.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'CO2'"
|
src="../../../public/img/staListIcon/CO2.png"
|
alt
|
/>
|
<img v-else src="../../../public/img/icon/wd-icon.png" alt />
|
<span>{{item.name}}</span>
|
</div>
|
|
<div class="r">
|
<span
|
class="num"
|
>{{item.valueDataList[item.valueDataList.length-1].value}}</span>
|
<span>{{item.unit}}</span>
|
</div>
|
</div>
|
<div class="bottom">
|
<div class="l">
|
<i class="el-icon-time"></i>
|
<span class="old-btn" @click="historyData(item)">历史数据</span>
|
</div>
|
|
<div
|
class="r"
|
>{{tmpTDiff(item.valueDataList[item.valueDataList.length-1].startTime)}}天前更新</div>
|
</div>
|
</div>
|
<!-- 空气监测 -->
|
<div v-for="(item, index) in stationData.airList" :key="index">
|
<div class="top">
|
<div class="l">
|
<img
|
v-if="item.name == '水隔离子'"
|
src="../../../public/img/staListIcon/NH4.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '雨量'"
|
src="../../../public/img/staListIcon/rain.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '土壤电导率'"
|
src="../../../public/img/staListIcon/soli-ele.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水电导率'"
|
src="../../../public/img/staListIcon/soli-ele.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '雨量累计'"
|
src="../../../public/img/staListIcon/rain.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '空气湿度'"
|
src="../../../public/img/staListIcon/soli-water.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '风向'"
|
src="../../../public/img/staListIcon/wind.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'EC'"
|
src="../../../public/img/staListIcon/EC.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '钾离子'"
|
src="../../../public/img/staListIcon/K.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '酸碱度'"
|
src="../../../public/img/staListIcon/PH.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '土壤温度'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '空气温度'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '硝酸银'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水铜离子'"
|
src="../../../public/img/staListIcon/CU2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水铅离子'"
|
src="../../../public/img/staListIcon/PB2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水镉离子'"
|
src="../../../public/img/staListIcon/CD2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'PM2.5'"
|
src="../../../public/img/staListIcon/PM25.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '气压'"
|
src="../../../public/img/staListIcon/pressure.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '光照度'"
|
src="../../../public/img/staListIcon/light.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '风速'"
|
src="../../../public/img/staListIcon/windSpeed.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'CO2'"
|
src="../../../public/img/staListIcon/CO2.png"
|
alt
|
/>
|
<img v-else src="../../../public/img/icon/wd-icon.png" alt />
|
<span>{{item.name}}</span>
|
</div>
|
|
<div class="r">
|
<span
|
class="num"
|
>{{item.valueDataList[item.valueDataList.length-1].value}}</span>
|
<span>{{item.unit}}</span>
|
</div>
|
</div>
|
<div class="bottom">
|
<div class="l">
|
<i class="el-icon-time"></i>
|
<span class="old-btn" @click="historyData(item)">历史数据</span>
|
</div>
|
|
<div
|
class="r"
|
>{{tmpTDiff(item.valueDataList[item.valueDataList.length-1].startTime)}}天前更新</div>
|
</div>
|
</div>
|
<!-- 水质监测 -->
|
<div v-for="(item, index) in stationData.waterList" :key="index">
|
<div class="top">
|
<div class="l">
|
<img
|
v-if="item.name == '水隔离子'"
|
src="../../../public/img/staListIcon/NH4.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '雨量'"
|
src="../../../public/img/staListIcon/rain.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '土壤电导率'"
|
src="../../../public/img/staListIcon/soli-ele.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水电导率'"
|
src="../../../public/img/staListIcon/soli-ele.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '雨量累计'"
|
src="../../../public/img/staListIcon/rain.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '空气湿度'"
|
src="../../../public/img/staListIcon/soli-water.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '风向'"
|
src="../../../public/img/staListIcon/wind.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'EC'"
|
src="../../../public/img/staListIcon/EC.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '钾离子'"
|
src="../../../public/img/staListIcon/K.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '酸碱度'"
|
src="../../../public/img/staListIcon/PH.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '土壤温度'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '空气温度'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '硝酸银'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水铜离子'"
|
src="../../../public/img/staListIcon/CU2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水铅离子'"
|
src="../../../public/img/staListIcon/PB2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水镉离子'"
|
src="../../../public/img/staListIcon/CD2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'PM2.5'"
|
src="../../../public/img/staListIcon/PM25.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '气压'"
|
src="../../../public/img/staListIcon/pressure.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '光照度'"
|
src="../../../public/img/staListIcon/light.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '风速'"
|
src="../../../public/img/staListIcon/windSpeed.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'CO2'"
|
src="../../../public/img/staListIcon/CO2.png"
|
alt
|
/>
|
<img v-else src="../../../public/img/icon/wd-icon.png" alt />
|
<span>{{item.name}}</span>
|
</div>
|
|
<div class="r">
|
<span
|
class="num"
|
>{{item.valueDataList[item.valueDataList.length-1].value}}</span>
|
<span>{{item.unit}}</span>
|
</div>
|
</div>
|
<div class="bottom">
|
<div class="l">
|
<i class="el-icon-time"></i>
|
<span class="old-btn" @click="historyData(item)">历史数据</span>
|
</div>
|
|
<div
|
class="r"
|
>{{tmpTDiff(item.valueDataList[item.valueDataList.length-1].startTime)}}天前更新</div>
|
</div>
|
</div>
|
<div class="hasNostaList" v-if="staList.length == 0 || !isNostaList">
|
<img
|
src="../../../public/img/nodata.png"
|
width="160%"
|
height="200%"
|
alt
|
/>
|
</div>
|
</div>
|
</div>
|
</div>~
|
</div>
|
</div>
|
|
<div class="echarts-box" v-show="echartsBosShow">
|
<div class="box">
|
<img
|
@click="echartsBosShow = false"
|
class="close"
|
src="../../../public/img/icon/echarts-close.png"
|
alt
|
/>
|
<div id="EchartsBox"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
// import {
|
// getLandList
|
// } from '@/api/land/land'
|
// import {
|
// getFarmList
|
// } from '@/api/farm/farmingrecord'
|
import {
|
getStationAndVideoByLandId, getStationAndVideoList,
|
getStationDateByStcd
|
} from '@/api/equipment/equipment'
|
import flvjs from 'flv.js'
|
import dateUtils from '@/utils/dateUtils' // 1.先引入
|
import { Loading } from 'element-ui'
|
|
export default {
|
data () {
|
return {
|
flvPlayer: null,
|
plotNameObj: {},
|
plotName: '',
|
plotList: [],
|
farmNameObj: {},
|
farmName: '',
|
farmList: [],
|
currentDetails: {},
|
echartsBosShow: false,
|
vidList: [],
|
staList: [],
|
isChoose: '',
|
stationData: { soilList: [] },
|
listTmp: [],
|
isNostaList: false// 是否有监测数据
|
}
|
},
|
created () {
|
this.getParams()
|
this.getStationAndVideoList()
|
// 获取地块列表，目前抛弃方法，换成显示基地名称
|
// this.getLandList()
|
// this.getFarmList()
|
},
|
mounted () {
|
|
},
|
methods: {
|
tmpTDiff (start) {
|
return dateUtils.tmpTDiff(start.substring(0, 10), new Date())
|
},
|
prev () {
|
this.$router.go(-1)
|
},
|
|
getParams () {
|
this.currentDetails = this.$route.query
|
},
|
|
initLine (dom, yName, x, y) {
|
const that = this
|
const chartDom = document.getElementById(dom)
|
const myChart = this.$echarts.init(chartDom)
|
|
const option = {
|
tooltip: {},
|
grid: {
|
top: '30px',
|
left: '28px',
|
right: '28px',
|
bottom: '0px',
|
containLabel: true
|
},
|
xAxis: [
|
{
|
|
type: 'category',
|
boundaryGap: false,
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#697B89'
|
}
|
},
|
axisLabel: {
|
// 坐标轴刻度标签的相关设置
|
lineHeight: 18,
|
textStyle: {
|
color: '#A9D1D7',
|
margin: 8
|
},
|
formatter: function (value) {
|
var ret = ''// 拼接加\n返回的类目项
|
var maxLength = 5// 每项显示文字个数
|
value = value.replace(/\s*/g, '')
|
var valLength = value.length// X轴类目项的文字个数
|
|
var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
|
// 如果类目项的文字大于5,
|
if (rowN > 1) {
|
for (var i = 0; i < rowN; i++) {
|
var temp = ''// 每次截取的字符串
|
var start = i * maxLength// 开始截取的位置
|
var end = start + maxLength// 结束截取的位置
|
// 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
temp = value.substring(start, end) + '\n'
|
ret += temp // 凭借最终的字符串
|
}
|
return ret
|
} else {
|
return value
|
}
|
}
|
},
|
axisTick: { show: false },
|
data: x
|
}
|
],
|
yAxis: [
|
{
|
name: yName,
|
nameTextStyle: {
|
color: '#A9D1D7'
|
},
|
type: 'value',
|
min: 0,
|
splitLine: {
|
show: false
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#697B89'
|
}
|
},
|
axisLabel: {
|
margin: 8,
|
textStyle: {
|
color: '#A9D1D7'
|
}
|
},
|
axisTick: { show: false }
|
}
|
],
|
series: [
|
{
|
type: 'line',
|
smooth: true, // 是否平滑曲线显示
|
symbolSize: 0,
|
lineStyle: {
|
normal: {
|
color: '#5ABF78' // 线条颜色
|
}
|
},
|
areaStyle: {
|
// 区域填充样式
|
normal: {
|
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0,
|
color: 'rgba(90, 191, 120, 0.5000)'
|
}, {
|
offset: 1,
|
color: 'rgba(90, 191, 120, 0)'
|
}]),
|
|
shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
|
shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
}
|
},
|
data: y
|
}
|
]
|
}
|
|
option && myChart.setOption(option)
|
},
|
|
historyData (item) {
|
const valueDataList = item.valueDataList
|
const values = []
|
const names = []
|
valueDataList.forEach(item => {
|
values.push(item.value)
|
names.push(item.startTime.substring(5, 10) + ' ' + item.startTime.substring(11) + ':00')
|
})
|
this.initLine('EchartsBox', '单位' + item.unit, names, values)
|
|
this.echartsBosShow = true
|
},
|
// 地块change方法
|
// landChangeValue (value) {
|
// this.getStationAndVideoByLandId(value, 'ALL')
|
// },
|
|
// 获取地块列表
|
// getLandList () {
|
// const farmId = this.currentDetails.id
|
// getLandList(farmId).then((res) => {
|
// this.plotList = res.data.data
|
// this.plotNameObj = this.plotList[0]
|
// this.plotName = this.plotNameObj.id
|
// this.getStationAndVideoByLandId(this.plotNameObj.id, 'ALL')
|
// })
|
// },
|
|
// 获取基地所有监控设备和监测设备
|
getStationAndVideoList () {
|
const params = {
|
type: 'ALL',
|
farmId: this.currentDetails.id
|
}
|
getStationAndVideoList(params).then((res) => {
|
if (res.data.code == 200) {
|
this.isChoose = 0
|
this.vidList = res.data.data.vidList
|
this.staList = res.data.data.staList
|
if (this.staList != null && this.staList.length > 0) {
|
this.$nextTick(() => {
|
this.getStationDateByStcd(this.staList[0].stcd)
|
})
|
} else {
|
this.stationData = []
|
}
|
if (this.vidList != null) {
|
this.$nextTick(() => {
|
this.playFlvVideo(this.vidList)
|
})
|
}
|
}
|
})
|
},
|
// farmChangeValue(value){
|
// this.getStationAndVideoByFarmId(value,'ALL')
|
// },
|
// getFarmList(){
|
// getFarmList().then((res)=>{
|
// this.farmList = res.data.data
|
// this.farmNameObj = this.farmList[0]
|
// this.farmName = this.farmNameObj
|
// })
|
// // this.getStationAndVideoByFarmId(this.farmNameObj.id,'ALL')
|
// },
|
// getStationAndVideoByFarmId(id,type){
|
// this.vidList = []
|
// this.staList = []
|
// var landList = []
|
// getLandList(id).then((res)=>{
|
// landList = res.data.data
|
// landList.forEach((e)=>{
|
// getStationAndVideoByLandId(e.id,type).then((res)=>{
|
// this.vidList.push(res.data.data.vidList)
|
// this.staList.push(res.data.data.staList)
|
// })
|
// })
|
// })
|
// },
|
|
// 根据地块id查询监控和监测设备
|
// getStationAndVideoByLandId (id, type) {
|
// getStationAndVideoByLandId(id, type).then((res) => {
|
// if (res.data.code == 200) {
|
// this.isChoose = 0
|
// this.vidList = res.data.data.vidList
|
// this.staList = res.data.data.staList
|
// if (this.staList != null && this.staList.length > 0) {
|
// this.$nextTick(() => {
|
// this.getStationDateByStcd(this.staList[0].stcd)
|
// })
|
// } else {
|
// this.stationData = []
|
// }
|
// if (this.vidList != null) {
|
// this.$nextTick(() => {
|
// this.playFlvVideo(this.vidList)
|
// })
|
// }
|
// }
|
// })
|
// },
|
|
// 点击获取对应监测设备数据
|
getStaList (index, id) {
|
this.isChoose = index
|
this.stationData = [] // 清空数据
|
const loadingInstance = Loading.service({ fullscreen: false, target: '.nape-boxs', text: '正在加载数据...', background: '#091a2b' })
|
|
this.$nextTick(() => {
|
setTimeout(() => {
|
loadingInstance.close()
|
this.getStationDateByStcd(id)
|
}, 2000)
|
})
|
},
|
// 根据设备号获取监测数据
|
getStationDateByStcd (stcd) {
|
// const startTime = dateUtils.getSpecifyMonthDate(3)// 获取3个月前时间
|
const startTime = dateUtils.getSpecifyDayDate(10)// 获取10天前时间
|
const endTime = dateUtils.getDayLast()// 获取今天最后日期
|
getStationDateByStcd(stcd, startTime, endTime).then((res) => {
|
// 遍历气象大集合
|
res.data.data.weatherList.forEach(function (item, index) {
|
// 把气象无效数据过滤掉
|
var list = item.valueDataList.filter(vaItem => {
|
return vaItem.value != '0.0'
|
})
|
// 如果没有找到就不做操作
|
if (list.length > 0) {
|
item.valueDataList = list
|
}
|
})
|
// 遍历水质
|
res.data.data.waterList.forEach(function (item, index) {
|
// 把水质无效数据过滤掉
|
var list = item.valueDataList.filter(vaItem => {
|
return vaItem.value != '0.0'
|
})
|
// 如果没有找到就不做操作
|
if (list.length > 0) {
|
item.valueDataList = list
|
}
|
})
|
// 遍历土壤
|
res.data.data.soilList.forEach(function (item, index) {
|
// 把水质无效数据过滤掉
|
var list = item.valueDataList.filter(vaItem => {
|
return vaItem.value != '0.0'
|
})
|
// 如果没有找到就不做操作
|
if (list.length > 0) {
|
item.valueDataList = list
|
}
|
})
|
// 遍历空气
|
res.data.data.airList.forEach(function (item, index) {
|
// 把水质无效数据过滤掉
|
var list = item.valueDataList.filter(vaItem => {
|
return vaItem.value != '0.0'
|
})
|
// 如果没有找到就不做操作
|
if (list.length > 0) {
|
item.valueDataList = list
|
}
|
})
|
|
this.stationData = res.data.data
|
if (this.stationData.soilList.length == 0 && this.stationData.weatherList.length == 0 &&
|
this.stationData.airList.length == 0 && this.stationData.waterList.length == 0) {
|
this.isNostaList = false
|
} else {
|
this.isNostaList = true
|
}
|
})
|
},
|
// flv视频播放
|
playFlvVideo (arr) {
|
// 先销毁
|
if (this.flvPlayer) {
|
this.flvPlayer.pause()
|
this.flvPlayer.unload()
|
this.flvPlayer.detachMediaElement()
|
this.flvPlayer.destroy()
|
this.flvPlayer = null
|
}
|
if (flvjs.isSupported()) {
|
// var arr = this.vidList
|
arr.forEach((item, index) => {
|
if (item.flv) {
|
var videoElement = document.getElementById(`videoElement${index}`)
|
this.flvPlayer = flvjs.createPlayer({
|
type: 'flv',
|
isLive: true,
|
hasAudio: false,
|
stashInitialSize: 128,
|
url: item.flv
|
// url: arr[index].wssFlv
|
// url: 'https://www.ainfo.top:700/rtp/34020000001110000301_34020000001320000001.flv'
|
|
}, {
|
enableStashBuffer: false,
|
fixAudioTimestampGap: false
|
})
|
this.flvPlayer.attachMediaElement(videoElement)
|
this.flvPlayer.load()
|
this.flvPlayer.play()
|
// 【flvjs播放器事件侦听】 关闭flv没有效果
|
// this.flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
|
// this.flvPlayer.pause()
|
// this.flvPlayer.unload()
|
// this.flvPlayer.detachMediaElement()
|
// this.flvPlayer.destroy()
|
// this.flvPlayer = null
|
// })
|
}
|
})
|
}
|
},
|
// 判断监测数据对应图标
|
chooseIcon (item) {
|
|
}
|
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
@font-face {
|
font-family: 'DS-Digital';
|
src: url('/DS-Digital/DS-DIGI-1.ttf');
|
src: url('/DS-Digital/DS-DIGIB-2.ttf');
|
src: url('/DS-Digital/DS-DIGII-3.ttf');
|
src: url('/DS-Digital/DS-DIGIT-4.ttf');
|
}
|
|
.container {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
.current-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 80px;
|
line-height: 80px;
|
background: rgba(14, 32, 54, 1);
|
.return {
|
margin-left: 40px;
|
font-size: 16px;
|
font-weight: bold;
|
color: #66dde9;
|
|
& > span {
|
cursor: pointer;
|
|
i {
|
margin-right: 4px;
|
}
|
}
|
}
|
|
.title {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: absolute;
|
top: 0;
|
left: 0;
|
bottom: 0;
|
right: 0;
|
margin: auto;
|
width: calc(100% - 200px);
|
font-size: 28px;
|
font-weight: bold;
|
color: #08f4ff;
|
}
|
}
|
|
.current-body {
|
position: absolute;
|
top: 80px;
|
left: 0;
|
width: 100%;
|
height: calc(100% - 80px);
|
background: rgba(5, 18, 31, 1);
|
|
.current-wrapper {
|
padding: 20px 250px;
|
height: 100%;
|
box-sizing: border-box;
|
|
.video-boxs {
|
height: 388px;
|
background: rgba(9, 26, 43, 1);
|
|
.header {
|
color: rgba(104, 218, 177, 1);
|
|
img {
|
width: 18px;
|
}
|
}
|
|
.body {
|
display: flex;
|
justify-content: center;
|
height: calc(100% - 60px);
|
|
.box {
|
margin-left: 22px;
|
width: 440px;
|
height: 290px;
|
border: 1px solid #224560;
|
|
.nape-header {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 42px;
|
color: rgba(104, 226, 251, 1);
|
font-size: 14px;
|
}
|
|
.nape-body {
|
height: calc(100% - 42px);
|
background: skyblue;
|
video {
|
object-fit: fill;
|
}
|
video::-webkit-media-controls-timeline {
|
display: none;
|
}
|
}
|
}
|
|
.box:first-child {
|
margin-left: 0;
|
}
|
}
|
}
|
|
.equipment-boxs {
|
margin-top: 20px;
|
height: calc(100% - 408px);
|
background: rgba(9, 26, 43, 1);
|
|
.header {
|
color: rgba(87, 186, 202, 1);
|
|
img {
|
width: 22px;
|
}
|
}
|
|
.body {
|
display: flex;
|
flex-direction: column;
|
height: calc(100% - 60px);
|
|
.btn-grounp {
|
margin: 4px 80px;
|
|
ul {
|
display: flex;
|
}
|
|
li {
|
margin: 0 8px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
min-width: 180px;
|
height: 32px;
|
font-size: 14px;
|
border-radius: 16px 16px 16px 16px;
|
background: rgba(4, 18, 34, 1);
|
color: rgba(0, 131, 143, 1);
|
cursor: pointer;
|
}
|
|
li.on {
|
background-color: #091a2b;
|
color: rgba(104, 226, 251, 1);
|
text-align: center;
|
line-height: 32px;
|
padding: 0 15px;
|
box-sizing: border-box;
|
}
|
li.activity {
|
background: rgba(0, 131, 143, 1);
|
}
|
}
|
|
.nape-boxs {
|
flex: 1;
|
display: flex;
|
flex-wrap: wrap;
|
align-content: flex-start;
|
justify-content: flex-start;
|
padding: 0 24px;
|
box-sizing: border-box;
|
overflow-x: hidden;
|
overflow-y: auto;
|
|
& > div {
|
margin: 0 2px;
|
margin-top: 16px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
width: 338px;
|
height: 118px;
|
background: url(../../../public/img/icon/monitor-bg.png)
|
no-repeat;
|
background-size: 100% 100%;
|
|
.top {
|
padding: 0 20px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
width: calc(100% - 10px);
|
height: 76px;
|
border-bottom: 1px solid #39818d;
|
box-sizing: border-box;
|
color: rgba(176, 189, 197, 1);
|
|
.l {
|
display: flex;
|
align-items: center;
|
|
span {
|
margin-left: 8px;
|
font-size: 16px;
|
font-weight: bold;
|
}
|
img {
|
width: 30px;
|
height: 30px;
|
}
|
}
|
|
.r {
|
color: rgba(176, 189, 197, 1);
|
.num {
|
margin-right: 8px;
|
font-size: 34px;
|
font-family: 'DS-Digital';
|
color: rgba(96, 210, 172, 1);
|
}
|
}
|
}
|
|
.bottom {
|
padding: 0 20px;
|
display: flex;
|
justify-content: space-between;
|
flex: 1;
|
width: 100%;
|
color: rgba(57, 129, 141, 1);
|
font-size: 14px;
|
box-sizing: border-box;
|
|
.old-btn {
|
margin-left: 5px;
|
cursor: pointer;
|
}
|
|
& > div {
|
margin-top: 8px;
|
}
|
}
|
}
|
|
& > div:last-child {
|
margin-bottom: 16px;
|
}
|
.hasNostaList {
|
margin: 0 auto;
|
}
|
}
|
}
|
}
|
|
.video-boxs,
|
.equipment-boxs {
|
.header {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 60px;
|
|
img {
|
margin-right: 12px;
|
vertical-align: middle;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.echarts-box {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: rgba(5, 18, 31, 0.5);
|
z-index: 99;
|
|
.box {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
width: 914px;
|
height: 328px;
|
background: rgba(18, 37, 61, 1);
|
|
.close {
|
position: absolute;
|
top: 20px;
|
right: 20px;
|
width: 28px;
|
cursor: pointer;
|
}
|
|
#EchartsBox {
|
margin-top: 48px;
|
width: 914px;
|
height: 280px;
|
}
|
}
|
}
|
</style>
|
