From b9ffd276b4fa8ca1918f486e70d7e4d0d04d9d9f Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 10 Aug 2022 08:47:46 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/zhny-dsjdp
---
src/views/farm/index.vue | 512 +++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 479 insertions(+), 33 deletions(-)
diff --git a/src/views/farm/index.vue b/src/views/farm/index.vue
index 779c7ea..e77f1a4 100644
--- a/src/views/farm/index.vue
+++ b/src/views/farm/index.vue
@@ -71,7 +71,7 @@
</div>
<div v-show="ncjscz == 'cz'" class="lists-box nscz">
- <div v-for="(item, index) in farmRecordList" :key="index">
+ <div v-for="(item, index) in farmRecordList" :key="'item'+index">
<div class="t-border"></div>
<div class="t-item">
<div>{{item.typeName}}</div>
@@ -117,7 +117,7 @@
</div>
<div v-show="zydksb == 'zy'" class="lists-box dk">
- <div v-for="(item, index) in farmPlantList" :key="index">
+ <div v-for="(item, index) in farmPlantList" :key="'farmPlantList'+index">
<div class="title">
<img :src="item.url" alt />
{{item.strainName}}
@@ -130,7 +130,7 @@
</div>
<div v-show="zydksb == 'dk'" class="lists-box dk">
- <div v-for="(item, index) in plotLists" :key="index" @click="setCenter(item)">
+ <div v-for="(item, index) in plotLists" :key="'plotLists'+index" @click="setCenter(item)">
<div class="title">
<img :src="item.url" alt />
{{item.landName}}
@@ -143,12 +143,55 @@
</div>
<div v-show="zydksb =='sb'" class="lists-box sb">
- <div v-for="(item, index) in equipmentList" :key="index">
+ <div
+ v-for="(item, index) in equipmentList"
+ :key="'equipmentList' + index"
+ class="lists-item"
+ @click="item.dictTypeNum == 0?goToJkDetail(item
+ ):goToDetail(item)"
+ >
<div class="title">
- <img src="/img/icon/jk.png" alt />{{item.name}}
+ <img v-if="item.dictTypeNum == 0" src="/img/icon/jk.png" alt />
+ <img v-else-if="item.dictTypeNum == 1" src="/img/icon/qx.png" alt />
+ <img v-else-if="item.dictTypeNum == 2" src="/img/icon/qx.png" alt />
+ <img v-else-if="item.dictTypeNum == 3" src="/img/icon/sz.png" alt />
+ <img v-else-if="item.dictTypeNum == 4" src="/img/icon/tr.png" alt />
+ <img v-else src="/img/icon/qx.png" alt />
+ {{item.name}}
</div>
- <div class="type off">在线</div>
+ <div class="type on" v-if="item.status">在线</div>
+ <div class="type off" v-else>离线</div>
</div>
+ <!-- 视频监控数据 -->
+<!-- <div v-for="(item, index) in equipmentList.vidList"-->
+<!-- :key="'vidList'+index"-->
+<!-- class="lists-item"-->
+<!-- @click="goToJkDetail(item)">-->
+<!-- <div class="title">-->
+<!-- <img src="/img/icon/jk.png" alt />-->
+<!-- {{item.name}}-->
+<!-- </div>-->
+<!-- <div class="type on" v-if="item.onLine == 0">在线</div>-->
+<!-- <div class="type off" v-else>离线</div>-->
+<!-- </div>-->
+ <!-- 监测设备数据 -->
+<!-- <div-->
+<!-- v-for="(item, index) in equipmentList.staList"-->
+<!-- :key="'staList' + index"-->
+<!-- class="lists-item"-->
+<!-- @click="goToDetail(item)"-->
+<!-- >-->
+<!-- <div class="title">-->
+<!-- <img v-if="item.dictTypeNum == 1" src="/img/icon/qx.png" alt />-->
+<!-- <img v-else-if="item.dictTypeNum == 2" src="/img/icon/qx.png" alt />-->
+<!-- <img v-else-if="item.dictTypeNum == 3" src="/img/icon/sz.png" alt />-->
+<!-- <img v-else-if="item.dictTypeNum == 4" src="/img/icon/tr.png" alt />-->
+<!-- <img v-else src="/img/icon/qx.png" alt />-->
+<!-- {{item.name}}-->
+<!-- </div>-->
+<!-- <div class="type on" v-if="item.onLine == 0">在线</div>-->
+<!-- <div class="type off" v-else>离线</div>-->
+<!-- </div>-->
</div>
</div>
@@ -197,29 +240,31 @@
</div>
<div class="table-list">
<div class="t-header">
- <div class="sym-style">溯源码样式</div>
+<!-- <div class="sym-style">溯源码样式</div>-->
+ <div>产品名称</div>
<div>溯源码编号</div>
<div>已绑定溯源/总数</div>
<div>创建时间</div>
<div>操作</div>
</div>
<div class="t-body">
- <div class="table-list" v-for="(item, index) in sourceList" :key="index">
- <div class="sym-style">
- <div class="l">
- <img src="/img/icon/sym.png" alt />
- </div>
- <div class="r">
- <div class="title">常规-样式1</div>
- <div class="unit">5cm*3cm</div>
- </div>
- </div>
+ <div class="table-list" v-for="(item, index) in sourceList" :key="'sourceList'+index">
+<!-- <div class="sym-style">-->
+<!-- <div class="l">-->
+<!-- <img src="/img/icon/sym.png" alt />-->
+<!-- </div>-->
+<!-- <div class="r">-->
+<!-- <div class="title">常规-样式1</div>-->
+<!-- <div class="unit">5cm*3cm</div>-->
+<!-- </div>-->
+<!-- </div>-->
+ <div>{{item.productName}}</div>
<div>{{item.code}}</div>
<div>{{item.bind == 0 ? 1 : 0}}/1</div>
<div>{{item.createTime}}</div>
<div>
<el-button
- @click="openPopup('/img/icon/sym.png')"
+ @click="openPopup(item.code)"
size="small"
class="look"
type="info"
@@ -255,7 +300,7 @@
</template>
<template slot="public-box-content">
<div v-show="plotDetailsNape == 'zypz'" class="box zypz-box">
- <div v-for="(item, index) in plotDetailsPlantList" :key="index">
+ <div v-for="(item, index) in plotDetailsPlantList" :key="'plotDetailsPlantList'+index">
<img class="logo" :src="item.url" alt />
<div class="titles-box">
<div class="title">{{item.strainName}}</div>
@@ -266,7 +311,7 @@
</div>
</div>
<div v-show="plotDetailsNape == 'nscz'" class="box nscz-box">
- <div v-for="(item, index) in plotDetailsRecordList" :key="index">
+ <div v-for="(item, index) in plotDetailsRecordList" :key="'plotDetailsRecordList'+index">
<div class="t-border"></div>
<div class="t-item">
<div class="type">{{item.typeName}}</div>
@@ -299,26 +344,176 @@
</template>
</public-nape-box>
- <el-dialog
- title="溯源码"
- custom-class="dialog-fixed"
- :visible.sync="dialogVisible"
- :before-close="handleClose"
- >
+ <el-dialog title="溯源码" custom-class="dialog-fixed" :visible.sync="dialogVisible">
<img style="width: 500px;" :src="currentUrl" alt />
</el-dialog>
+
+ <public-box
+ v-show="staionDetail"
+ :closeFlag="'staionDetail'"
+ :className="'public-equirment-station-details'"
+ >
+ <template slot="public-box-header">
+ <div>{{staInfo.name}}</div>
+ <img
+ @click="staionDetail = false"
+ src="../../../public/img/icon/close.png"
+ class="close"
+ />
+ </template>
+ <template slot="public-box-content">
+ <!-- 气象监测 -->
+ <div class="item" v-for="(item, staListIndex) in stationData.weatherList"
+ :key="'weatherList' + staListIndex">
+ <div class="itemTitle">
+ <img src="../../../public/img/icon/icon_3788.png" alt />
+ <div class="type">
+ <h1>{{item.name}}</h1>
+ <span>单位：{{item.unit}}</span>
+ </div>
+ <div class="data">{{item.valueDataList[item.valueDataList.length-1].value}}</div>
+ <img
+ src="../../../public/img/icon/up_menu.png"
+ class="openMenuIcon"
+ @click="showEchart(staListIndex,null)"
+ v-if="echartIsShow && jcIndex == staListIndex"
+ alt
+ />
+ <img
+ src="../../../public/img/icon/down_menu.png"
+ class="openMenuIcon"
+ @click="showEchart(staListIndex,item)"
+ v-else
+ alt
+ />
+ </div>
+ <div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
+ <div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
+ </div>
+ </div>
+ <!-- 土壤监测 -->
+ <div class="item" v-for="(item, staListIndex) in stationData.soliList"
+ :key="'soliList' + staListIndex">
+ <div class="itemTitle">
+ <img src="../../../public/img/icon/icon_3788.png" alt />
+ <div class="type">
+ <h1>{{item.name}}</h1>
+ <span>单位：{{item.unit}}</span>
+ </div>
+ <div class="data">{{item.valueDataList[item.valueDataList.length-1].value}}</div>
+ <img
+ src="../../../public/img/icon/up_menu.png"
+ class="openMenuIcon"
+ @click="showEchart(staListIndex,null)"
+ v-if="echartIsShow && jcIndex == staListIndex"
+ alt
+ />
+ <img
+ src="../../../public/img/icon/down_menu.png"
+ class="openMenuIcon"
+ @click="showEchart(staListIndex,item)"
+ v-else
+ alt
+ />
+ </div>
+ <div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
+ <div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
+ </div>
+ </div>
+ <!-- 空气监测 -->
+ <div class="item" v-for="(item, staListIndex) in stationData.airList"
+ :key="'airList' + staListIndex">
+ <div class="itemTitle">
+ <img src="../../../public/img/icon/icon_3788.png" alt />
+ <div class="type">
+ <h1>{{item.name}}</h1>
+ <span>单位：{{item.unit}}</span>
+ </div>
+ <div class="data">{{item.valueDataList[item.valueDataList.length-1].value}}</div>
+ <img
+ src="../../../public/img/icon/up_menu.png"
+ class="openMenuIcon"
+ @click="showEchart(staListIndex,null)"
+ v-if="echartIsShow && jcIndex == staListIndex"
+ alt
+ />
+ <img
+ src="../../../public/img/icon/down_menu.png"
+ class="openMenuIcon"
+ @click="showEchart(staListIndex,item)"
+ v-else
+ alt
+ />
+ </div>
+ <div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
+ <div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
+ </div>
+ </div>
+ <!-- 水质监测 -->
+ <div class="item" v-for="(item, staListIndex) in stationData.waterList"
+ :key="'waterList' + staListIndex">
+ <div class="itemTitle">
+ <img src="../../../public/img/icon/icon_3788.png" alt />
+ <div class="type">
+ <h1>{{item.name}}</h1>
+ <span>单位：{{item.unit}}</span>
+ </div>
+ <div class="data">{{item.valueDataList[item.valueDataList.length-1].value}}</div>
+ <img
+ src="../../../public/img/icon/up_menu.png"
+ class="openMenuIcon"
+ @click="showEchart(staListIndex,null)"
+ v-if="echartIsShow && jcIndex == staListIndex"
+ alt
+ />
+ <img
+ src="../../../public/img/icon/down_menu.png"
+ class="openMenuIcon"
+ @click="showEchart(staListIndex,item)"
+ v-else
+ alt
+ />
+ </div>
+ <div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
+ <div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
+ </div>
+ </div>
+ </template>
+ </public-box>
+
+ <public-box
+ v-show="JkDetail"
+ :closeFlag="'JkDetail'"
+ :className="'public-equirment-vid-details'"
+ >
+ <template slot="public-box-header">
+ <div>{{vidInfo.name}}</div>
+ <img
+ @click="JkDetail = false"
+ src="../../../public/img/icon/close.png"
+ class="close"
+ />
+ </template>
+ <template slot="public-box-content">
+ <div class="video">
+ <video id="videoElement" autoplay muted width="100%" height="100%"></video>
+ </div>
+ </template>
+ </public-box>
</div>
</template>
<script>
-import { getSourceList } from '@/api/farm/source'
+import { getSimpleInfo, getSourceList } from '@/api/farm/source'
+import flvjs from 'flv.js'
import {
getLandList,
getFarmingRecordList,
- getFarmPlantList,
- getStationAndVideoList
+ getFarmPlantList
} from '@/api/farm/farmingrecord'
+import dateUtils from '@/utils/dateUtils'
+import { getStationDateByStcd, queryEquipmentList } from '@/api/equipment/equipment'
export default {
data () {
@@ -346,6 +541,18 @@
currentClickPlot: {},
// 物联网设备
equipmentList: {},
+ // 监测设备详情
+ staionDetail: false,
+ // 监控设备详情
+ JkDetail: false,
+ // 监测设备echart展示
+ echartIsShow: false,
+ // 监测列表index
+ jcIndex: 0,
+ flvPlayer: null,
+ vidInfo: {}, // 视频数据
+ staInfo: {}, // 监测数据
+ stationData: {} // 监测详细数据
}
},
created () {
@@ -413,8 +620,11 @@
this.$router.go(-1)
},
- openPopup (url) {
- this.currentUrl = url
+ openPopup (code) {
+ getSimpleInfo(code).then(res => {
+ this.currentUrl = res.data.data.qrcode
+ })
+
this.dialogVisible = true
},
@@ -480,10 +690,243 @@
},
getStationAndVideo () {
var that = this
- getStationAndVideoList({ type: 'ALL',farmId: this.currentDetails.id }).then((res) => {
+ queryEquipmentList({ type: 'ALL', farmId: this.currentDetails.id }).then((res) => {
if (JSON.stringify(res.data) != '{}' && res.data.data) {
- that.equipmentList = res.data.data.staList
+ that.equipmentList = res.data.data.equipmentList
}
+ })
+ },
+ // 跳转 监测 设备详情窗口
+ goToDetail (item) {
+ this.staInfo = item
+ this.getStationDateByStcd(item.stcd)
+ this.staionDetail = true
+ },
+ // 跳转 监控 设备详情窗口
+ goToJkDetail (item) {
+ this.vidInfo = item
+ this.JkDetail = true
+ this.$nextTick(() => {
+ this.playFlvVideo('wss://www.ainfo.top:700/rtp/34020000001110000105_34020000001310000002.flv')
+ })
+ },
+ // echart
+ 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)
+ },
+ // 点击展示监测设备echart图
+ showEchart (index, item) {
+ if (this.jcIndex == index) {
+ this.echartIsShow = !this.echartIsShow
+ } else {
+ this.jcIndex = index
+ this.echartIsShow = true
+ }
+ if (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' + index, '单位' + item.unit, names, values)
+ }
+ },
+ // flv视频播放
+ playFlvVideo (url) {
+ // 先销毁
+ if (this.flvPlayer) {
+ this.flvPlayer.pause()
+ this.flvPlayer.unload()
+ this.flvPlayer.detachMediaElement()
+ this.flvPlayer.destroy()
+ this.flvPlayer = null
+ }
+ if (flvjs.isSupported()) {
+ var videoElement = document.getElementById('videoElement')
+ this.flvPlayer = flvjs.createPlayer({
+ type: 'flv',
+ isLive: true,
+ hasAudio: false,
+ stashInitialSize: 128,
+ url: url
+ }, {
+ enableStashBuffer: false,
+ fixAudioTimestampGap: false
+ })
+ this.flvPlayer.attachMediaElement(videoElement)
+ this.flvPlayer.load()
+ this.flvPlayer.play()
+ }
+ },
+ // 根据设备号获取监测数据
+ 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
})
}
}
@@ -788,6 +1231,9 @@
& > div:last-child {
border: none;
}
+ .lists-item {
+ cursor: pointer;
+ }
}
.dk.lists-box {
--
Gitblit v1.9.3