zhny-dsjdp.git - Gitblit

			@@ -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 {