|
|
@@ -3,160 +3,197 @@
|
|
|
* @Autor: lin
|
|
|
* @Date: 2024-04-09 14:26:43
|
|
|
* @LastEditors: lin
|
|
|
- * @LastEditTime: 2024-04-22 14:22:53
|
|
|
+ * @LastEditTime: 2024-04-23 14:11:27
|
|
|
-->
|
|
|
<template>
|
|
|
<div class="bigBg" v-loading="loading">
|
|
|
- <el-carousel indicator-position="outside" trigger="click" :initial-index="activeIndex" class="deviceBox" :interval="10000"
|
|
|
- @change="changeSlider">
|
|
|
+ <el-carousel
|
|
|
+ indicator-position="outside"
|
|
|
+ trigger="click"
|
|
|
+ :initial-index="activeIndex"
|
|
|
+ class="deviceBox"
|
|
|
+ :interval="1200000"
|
|
|
+ @change="changeSlider"
|
|
|
+ >
|
|
|
<el-carousel-item v-for="(item, index) in deviceList" :key="item.id">
|
|
|
- <div class="flexBox topBox">
|
|
|
- <div class="rowFlex" v-show="index == activeIndex">
|
|
|
- <div class="card">
|
|
|
- <Title text="设备信息"></Title>
|
|
|
- <div class="deviceInfo">
|
|
|
- <div class="leftInfo">
|
|
|
- <img src="../../../assets/images/newHome/id.png" />
|
|
|
- <div>设备ID</div>
|
|
|
- </div>
|
|
|
- <div class="rightInfo">{{ item.device_id }}</div>
|
|
|
- </div>
|
|
|
- <div class="deviceInfo">
|
|
|
- <div class="leftInfo">
|
|
|
- <img src="../../../assets/images/newHome/name.png" />
|
|
|
- <div>设备名称</div>
|
|
|
- </div>
|
|
|
- <div class="rightInfo">{{ item.device_name }}</div>
|
|
|
- </div>
|
|
|
- <div class="deviceInfo">
|
|
|
- <div class="leftInfo">
|
|
|
- <img src="../../../assets/images/newHome/point.png" />
|
|
|
- <div>设备定位</div>
|
|
|
- </div>
|
|
|
- <div class="rightInfo">{{ item.address }}</div>
|
|
|
- </div>
|
|
|
- <div class="deviceInfo">
|
|
|
- <div class="leftInfo">
|
|
|
- <img src="../../../assets/images/newHome/time.png" />
|
|
|
- <div>最新上报时间</div>
|
|
|
- </div>
|
|
|
- <div class="rightInfo">{{ item.uptime_format }}</div>
|
|
|
+ <div class="flexBox topBox">
|
|
|
+ <div class="rowFlex" v-show="index == activeIndex">
|
|
|
+ <div class="card">
|
|
|
+ <Title text="设备信息"></Title>
|
|
|
+ <div class="deviceInfo">
|
|
|
+ <div class="leftInfo">
|
|
|
+ <img src="../../../assets/images/newHome/id.png" />
|
|
|
+ <div>设备ID</div>
|
|
|
</div>
|
|
|
+ <div class="rightInfo">{{ item.device_id }}</div>
|
|
|
</div>
|
|
|
- <div class="card">
|
|
|
- <Title text="设备参数"></Title>
|
|
|
- <div class="flexBox">
|
|
|
- <div class="itemInfo">
|
|
|
- <span class="status">{{ item.device_status ? '在线' : '离线' }}</span>
|
|
|
- <span>在线状态</span>
|
|
|
- </div>
|
|
|
- <div class="itemInfo">
|
|
|
- <span class="status">≤5w</span>
|
|
|
- <span>待机功率</span>
|
|
|
- </div>
|
|
|
- <div class="itemInfo">
|
|
|
- <span class="status">雨控</span>
|
|
|
- <span>自动触发</span>
|
|
|
- </div>
|
|
|
- <div class="itemInfo">
|
|
|
- <span class="status">1200w</span>
|
|
|
- <span>超清像素</span>
|
|
|
- </div>
|
|
|
- <div class="itemInfo">
|
|
|
- <span class="status">开启</span>
|
|
|
- <span>光诱状态</span>
|
|
|
- </div>
|
|
|
- <div class="itemInfo">
|
|
|
- <span class="status">3</span>
|
|
|
- <span>灯管数量</span>
|
|
|
- </div>
|
|
|
- <div class="itemInfo">
|
|
|
- <span class="status">365nm</span>
|
|
|
- <span>主波长</span>
|
|
|
- </div>
|
|
|
- <div class="itemInfo">
|
|
|
- <span class="status">开启</span>
|
|
|
- <span>性诱状态</span>
|
|
|
- </div>
|
|
|
+ <div class="deviceInfo">
|
|
|
+ <div class="leftInfo">
|
|
|
+ <img src="../../../assets/images/newHome/name.png" />
|
|
|
+ <div>设备名称</div>
|
|
|
</div>
|
|
|
+ <div class="rightInfo">{{ item.device_name }}</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="bigCard">
|
|
|
- <div class="titleBox">
|
|
|
- <Title text="实时监控"></Title>
|
|
|
- <div class="nameContent">{{ item.jk_device_name }}</div>
|
|
|
+ <div class="deviceInfo">
|
|
|
+ <div class="leftInfo">
|
|
|
+ <img src="../../../assets/images/newHome/point.png" />
|
|
|
+ <div>设备定位</div>
|
|
|
+ </div>
|
|
|
+ <div class="rightInfo">{{ item.address }}</div>
|
|
|
</div>
|
|
|
- <div class="charBox" :id="`playBox${item.id}`">
|
|
|
+ <div class="deviceInfo">
|
|
|
+ <div class="leftInfo">
|
|
|
+ <img src="../../../assets/images/newHome/time.png" />
|
|
|
+ <div>最新上报时间</div>
|
|
|
+ </div>
|
|
|
+ <div class="rightInfo">{{ item.uptime_format }}</div>
|
|
|
</div>
|
|
|
- <!-- <video class="charBox" :id="`play${item.id}`" :src="item.jk_addr.hlsHd" muted autoplay poster='' controls playsInline webkit-playsinline></video> -->
|
|
|
</div>
|
|
|
- <div class="rowFlex" v-if="index == activeIndex">
|
|
|
- <div class="card">
|
|
|
- <Title text="设备图片"></Title>
|
|
|
- <el-carousel v-if="pestImgList[index]" indicator-position="none" class="charBox" :autoplay="false"
|
|
|
- :interval="1000">
|
|
|
- <el-carousel-item v-for="(img) in pestImgList[index]" :key="img">
|
|
|
- <el-image :src="`https://www.yhswjc.com${img}`" fit="contain"
|
|
|
- :preview-src-list="pestImgList[index]">
|
|
|
- </el-image>
|
|
|
- </el-carousel-item>
|
|
|
- </el-carousel>
|
|
|
- </div>
|
|
|
- <div class="card">
|
|
|
- <Title text="实时数据"></Title>
|
|
|
- <div class="charBox">
|
|
|
- <div class="scrollItem scrollHeader">
|
|
|
- <div>害虫名称</div>
|
|
|
- <div class="timeBox">上报时间</div>
|
|
|
- <div>数量</div>
|
|
|
- </div>
|
|
|
- <PestInfo :idData="item.id" v-if="pestNowList[index] && pestNowList[index].length > 0"
|
|
|
- :data="pestNowList[index]">
|
|
|
- </PestInfo>
|
|
|
+ <div class="card">
|
|
|
+ <Title text="设备参数"></Title>
|
|
|
+ <div class="flexBox">
|
|
|
+ <div class="itemInfo">
|
|
|
+ <span class="status">{{ item.device_status ? '在线' : '离线' }}</span>
|
|
|
+ <span>在线状态</span>
|
|
|
+ </div>
|
|
|
+ <div class="itemInfo">
|
|
|
+ <span class="status">≤5w</span>
|
|
|
+ <span>待机功率</span>
|
|
|
+ </div>
|
|
|
+ <div class="itemInfo">
|
|
|
+ <span class="status">雨控</span>
|
|
|
+ <span>自动触发</span>
|
|
|
+ </div>
|
|
|
+ <div class="itemInfo">
|
|
|
+ <span class="status">1200w</span>
|
|
|
+ <span>超清像素</span>
|
|
|
+ </div>
|
|
|
+ <div class="itemInfo">
|
|
|
+ <span class="status">开启</span>
|
|
|
+ <span>光诱状态</span>
|
|
|
+ </div>
|
|
|
+ <div class="itemInfo">
|
|
|
+ <span class="status">3</span>
|
|
|
+ <span>灯管数量</span>
|
|
|
+ </div>
|
|
|
+ <div class="itemInfo">
|
|
|
+ <span class="status">365nm</span>
|
|
|
+ <span>主波长</span>
|
|
|
+ </div>
|
|
|
+ <div class="itemInfo">
|
|
|
+ <span class="status">开启</span>
|
|
|
+ <span>性诱状态</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="flexBox bottomBox" v-if="index == activeIndex">
|
|
|
- <div class="card">
|
|
|
- <Title text="环境温湿度"></Title>
|
|
|
- <div class="charBox" :id="`temChar${item.id}`"></div>
|
|
|
+ <div class="bigCard">
|
|
|
+ <div class="titleBox">
|
|
|
+ <Title text="实时监控"></Title>
|
|
|
+ <div class="nameContent">{{ item.jk_device_name }}</div>
|
|
|
</div>
|
|
|
- <div class="card">
|
|
|
- <Title text="虫情类别"></Title>
|
|
|
- <PestType class="charBox" v-if="pestTypeList[index] && pestTypeList[index].length > 0"
|
|
|
- :dataList="pestTypeList[index]" :chartId="`type${item.id}`"></PestType>
|
|
|
+ <div class="charBox" >
|
|
|
+ <img
|
|
|
+ src="../../../assets/images/newHome/videoDefault.png"
|
|
|
+ v-if="!showVideo"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ @click="playVideo(item)"
|
|
|
+ />
|
|
|
+ <div v-show="showVideo" :id="`playBox${item.id}`" style="height: 100%"></div>
|
|
|
</div>
|
|
|
+ <!-- <video class="charBox" :id="`play${item.id}`" :src="item.jk_addr.hlsHd" muted autoplay poster='' controls playsInline webkit-playsinline></video> -->
|
|
|
+ </div>
|
|
|
+ <div class="rowFlex" v-if="index == activeIndex">
|
|
|
<div class="card">
|
|
|
- <Title text="害虫总数量">
|
|
|
- </Title>
|
|
|
- <div class="charBox" :id="`countChar${item.id}`"></div>
|
|
|
+ <Title text="设备图片"></Title>
|
|
|
+ <el-carousel
|
|
|
+ v-if="pestImgList[index]"
|
|
|
+ indicator-position="none"
|
|
|
+ class="charBox"
|
|
|
+ :autoplay="false"
|
|
|
+ :interval="1000"
|
|
|
+ >
|
|
|
+ <el-carousel-item v-for="(img) in pestImgList[index]" :key="img">
|
|
|
+ <el-image
|
|
|
+ :src="`https://www.yhswjc.com${img}`"
|
|
|
+ fit="contain"
|
|
|
+ :preview-src-list="pestImgList[index]"
|
|
|
+ ></el-image>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
- <div class="titleBox">
|
|
|
- <Title text="虫害折线图"></Title>
|
|
|
- <div class="rightBox" v-if="pestLineDate.length > 0">
|
|
|
- <el-select size="mini" filterable v-model="pestLineCheck[index].value"
|
|
|
- @change="e => changePestSelect(e, pestLineCheck[index], pestLineDate[index], `pestDateChar${item.id}`)">
|
|
|
- <el-option v-for="(pest, pestIndex) in (pestLineDate[index])[(pestLineCheck[index].type)].pestName"
|
|
|
- :key="`${index}${pest}${pestIndex}`" :value="pest" :label="pest"></el-option>
|
|
|
- </el-select>
|
|
|
- <div class="rightType">
|
|
|
- <div :class="`${(pestLineCheck[index]).type == 'day' ? 'active' : ''}`"
|
|
|
- @click="changePestType(`pestDateChar${item.id}`, 'day', pestLineCheck[index], pestLineDate[index])">
|
|
|
- 日</div>
|
|
|
- <div :class="`${(pestLineCheck[index]).type == 'months' ? 'active' : ''}`"
|
|
|
- @click="changePestType(`pestDateChar${item.id}`, 'months', pestLineCheck[index], pestLineDate[index])">
|
|
|
- 月</div>
|
|
|
- <div :class="`${(pestLineCheck[index]).type == 'year' ? 'active' : ''}`"
|
|
|
- @click="changePestType(`pestDateChar${item.id}`, 'year', pestLineCheck[index], pestLineDate[index])">
|
|
|
- 年</div>
|
|
|
- </div>
|
|
|
+ <Title text="实时数据"></Title>
|
|
|
+ <div class="charBox">
|
|
|
+ <div class="scrollItem scrollHeader">
|
|
|
+ <div>害虫名称</div>
|
|
|
+ <div class="timeBox">上报时间</div>
|
|
|
+ <div>数量</div>
|
|
|
</div>
|
|
|
+ <PestInfo
|
|
|
+ :idData="item.id"
|
|
|
+ v-if="pestNowList[index] && pestNowList[index].length > 0"
|
|
|
+ :data="pestNowList[index]"
|
|
|
+ ></PestInfo>
|
|
|
</div>
|
|
|
- <div class="charBox" :id="`pestDateChar${item.id}`"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div class="flexBox bottomBox" v-if="index == activeIndex">
|
|
|
+ <div class="card">
|
|
|
+ <Title text="环境温湿度"></Title>
|
|
|
+ <div class="charBox" :id="`temChar${item.id}`"></div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <Title text="虫情类别"></Title>
|
|
|
+ <PestType
|
|
|
+ class="charBox"
|
|
|
+ v-if="pestTypeList[index] && pestTypeList[index].length > 0"
|
|
|
+ :dataList="pestTypeList[index]"
|
|
|
+ :chartId="`type${item.id}`"
|
|
|
+ ></PestType>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <Title text="害虫总数量"></Title>
|
|
|
+ <div class="charBox" :id="`countChar${item.id}`"></div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="titleBox">
|
|
|
+ <Title text="虫害折线图"></Title>
|
|
|
+ <div class="rightBox" v-if="pestLineDate.length > 0">
|
|
|
+ <el-select
|
|
|
+ size="mini"
|
|
|
+ filterable
|
|
|
+ v-model="pestLineCheck[index].value"
|
|
|
+ @change="e => changePestSelect(e, pestLineCheck[index], pestLineDate[index], `pestDateChar${item.id}`)"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(pest, pestIndex) in (pestLineDate[index])[(pestLineCheck[index].type)].pestName"
|
|
|
+ :key="`${index}${pest}${pestIndex}`"
|
|
|
+ :value="pest"
|
|
|
+ :label="pest"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ <div class="rightType">
|
|
|
+ <div
|
|
|
+ :class="`${(pestLineCheck[index]).type == 'day' ? 'active' : ''}`"
|
|
|
+ @click="changePestType(`pestDateChar${item.id}`, 'day', pestLineCheck[index], pestLineDate[index])"
|
|
|
+ >日</div>
|
|
|
+ <div
|
|
|
+ :class="`${(pestLineCheck[index]).type == 'months' ? 'active' : ''}`"
|
|
|
+ @click="changePestType(`pestDateChar${item.id}`, 'months', pestLineCheck[index], pestLineDate[index])"
|
|
|
+ >月</div>
|
|
|
+ <div
|
|
|
+ :class="`${(pestLineCheck[index]).type == 'year' ? 'active' : ''}`"
|
|
|
+ @click="changePestType(`pestDateChar${item.id}`, 'year', pestLineCheck[index], pestLineDate[index])"
|
|
|
+ >年</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="charBox" :id="`pestDateChar${item.id}`"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-carousel-item>
|
|
|
</el-carousel>
|
|
|
</div>
|
|
|
@@ -165,12 +202,10 @@
|
|
|
<script>
|
|
|
import * as echarts from 'echarts';
|
|
|
import Title from './components/Title.vue';
|
|
|
-import PestType from "./components/pie3D.vue"; // 害虫种类3d环状图
|
|
|
+import PestType from './components/pie3D.vue'; // 害虫种类3d环状图
|
|
|
import PestInfo from './components/scrollInfo.vue';
|
|
|
export default {
|
|
|
- props: {
|
|
|
-
|
|
|
- },
|
|
|
+ props: {},
|
|
|
data() {
|
|
|
return {
|
|
|
loading: true,
|
|
|
@@ -183,37 +218,55 @@ export default {
|
|
|
videoList: [], //监控列表 跳出页面要停止
|
|
|
pestLineCheck: [],
|
|
|
activeIndex: 0,
|
|
|
- timmer:null
|
|
|
+ timmer: null,
|
|
|
+ showVideo: false
|
|
|
};
|
|
|
},
|
|
|
- computed: {
|
|
|
-
|
|
|
- },
|
|
|
- created() {
|
|
|
-
|
|
|
- },
|
|
|
+ computed: {},
|
|
|
+ created() {},
|
|
|
mounted() {
|
|
|
this.getDeviceList();
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
- this.videoList.forEach(item => {
|
|
|
- item.stop()
|
|
|
- })
|
|
|
+ this.clearVideo();
|
|
|
clearInterval(this.timmer);
|
|
|
},
|
|
|
methods: {
|
|
|
+ clearVideo() {
|
|
|
+ this.videoList.forEach((item) => {
|
|
|
+ item.stop();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ playVideo(data) {
|
|
|
+ // // 视频
|
|
|
+ console.log(data);
|
|
|
+ if (data.jk_addr == '') {
|
|
|
+ this.$message.error('当前视频无播放地址，请联系管理员');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.clearVideo();
|
|
|
+ this.videoList = [];
|
|
|
+ this.showVideo = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ console.log(document.getElementById('playBox' + data.id));
|
|
|
+ let hlsHdSrc = data.jk_addr.hlsHd;
|
|
|
+ hlsHdSrc = 'https' + hlsHdSrc.toString().slice(4);
|
|
|
+ let playHtml = `<video id="play${data.id}" autoplay muted poster='' controls playsInline webkit-playsinline src="${hlsHdSrc}" style="width:100%; height:100%;"></video>`;
|
|
|
+ document.getElementById('playBox' + data.id).innerHTML = playHtml;
|
|
|
+ let playerObj = new EZUIKit.EZUIPlayer({
|
|
|
+ id: `play${data.id}`,
|
|
|
+ });
|
|
|
+ this.videoList.push(playerObj);
|
|
|
+ })
|
|
|
+ },
|
|
|
changeSlider(index) {
|
|
|
this.activeIndex = index;
|
|
|
+ this.clearVideo();
|
|
|
+ this.showVideo = false;
|
|
|
+ // this.deviceList[index].showVideo = false;
|
|
|
this.$nextTick(() => {
|
|
|
this.initCharByIndex(index);
|
|
|
- // this.videoList.forEach((item, videoIndex) => {
|
|
|
- // if (videoIndex != index) {
|
|
|
- // item.stop()
|
|
|
- // } else {
|
|
|
- // item.play()
|
|
|
- // }
|
|
|
- // })
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
/**
|
|
|
* @description: 根据当前索引值 渲染对应页面echarts（一次渲染页面太卡）
|
|
|
@@ -227,23 +280,47 @@ export default {
|
|
|
let countCharInfo = this.pestTypeBar[index]; // 当前害虫类型的信息
|
|
|
let pestDateCharInfo = this.pestLineDate[index]; // 当前害虫数量的信息
|
|
|
if (type == 'tem' || !type) {
|
|
|
- let temChar = echarts.init(document.getElementById(`temChar${indexId}`)); // 温湿度的charts
|
|
|
- this.setLineOption(temChar, ['温度（℃）', '湿度（%）'], deviceItem.ath.addtime, [deviceItem.ath.tem, deviceItem.ath.hum], [['#90ff0366', '#8fff0010'], ['#0066ff59', '#0066ff00']], ['#19E4A6', '#1588F2'])
|
|
|
+ let temChar = echarts.init(
|
|
|
+ document.getElementById(`temChar${indexId}`)
|
|
|
+ ); // 温湿度的charts
|
|
|
+ this.setLineOption(
|
|
|
+ temChar,
|
|
|
+ ['温度（℃）', '湿度（%）'],
|
|
|
+ deviceItem.ath.addtime,
|
|
|
+ [deviceItem.ath.tem, deviceItem.ath.hum],
|
|
|
+ [
|
|
|
+ ['#90ff0366', '#8fff0010'],
|
|
|
+ ['#0066ff59', '#0066ff00'],
|
|
|
+ ],
|
|
|
+ ['#19E4A6', '#1588F2']
|
|
|
+ );
|
|
|
}
|
|
|
if (type == 'count' || !type) {
|
|
|
// console.log(countCharInfo, 'countCharInfo');
|
|
|
- let countChar = echarts.init(document.getElementById(`countChar${indexId}`)); // 害虫类型
|
|
|
+ let countChar = echarts.init(
|
|
|
+ document.getElementById(`countChar${indexId}`)
|
|
|
+ ); // 害虫类型
|
|
|
this.setBarOption(countChar, countCharInfo.name, countCharInfo.count);
|
|
|
}
|
|
|
if (type == 'pestDate' || !type) {
|
|
|
- let pestDateChar = echarts.init(document.getElementById(`pestDateChar${indexId}`)); // 害虫个数
|
|
|
+ let pestDateChar = echarts.init(
|
|
|
+ document.getElementById(`pestDateChar${indexId}`)
|
|
|
+ ); // 害虫个数
|
|
|
let xData = [];
|
|
|
let yData = [];
|
|
|
- pestDateCharInfo.day.countInfo.forEach(pest => {
|
|
|
+ pestDateCharInfo.day.countInfo.forEach((pest) => {
|
|
|
xData.push(pest.date);
|
|
|
- yData.push(pest.data[0])
|
|
|
- })
|
|
|
- this.setLineOption(pestDateChar, [pestDateCharInfo.day.pestName[0]], xData, [yData], [['#0066ff59', '#0066ff00']], ['#1588F2'], true)
|
|
|
+ yData.push(pest.data[0]);
|
|
|
+ });
|
|
|
+ this.setLineOption(
|
|
|
+ pestDateChar,
|
|
|
+ [pestDateCharInfo.day.pestName[0]],
|
|
|
+ xData,
|
|
|
+ [yData],
|
|
|
+ [['#0066ff59', '#0066ff00']],
|
|
|
+ ['#1588F2'],
|
|
|
+ true
|
|
|
+ );
|
|
|
}
|
|
|
this.loading = false;
|
|
|
},
|
|
|
@@ -260,12 +337,20 @@ export default {
|
|
|
typeObj.value = data[type].pestName[0];
|
|
|
let xData = [];
|
|
|
let yData = [];
|
|
|
- data[type].countInfo.forEach(pest => {
|
|
|
+ data[type].countInfo.forEach((pest) => {
|
|
|
xData.push(pest.date);
|
|
|
- yData.push(pest.data[0])
|
|
|
- })
|
|
|
+ yData.push(pest.data[0]);
|
|
|
+ });
|
|
|
let char = echarts.init(document.getElementById(charID));
|
|
|
- this.setLineOption(char, [typeObj.value], xData, [yData], [['#0066ff59', '#0066ff00']], ['#1588F2'], true)
|
|
|
+ this.setLineOption(
|
|
|
+ char,
|
|
|
+ [typeObj.value],
|
|
|
+ xData,
|
|
|
+ [yData],
|
|
|
+ [['#0066ff59', '#0066ff00']],
|
|
|
+ ['#1588F2'],
|
|
|
+ true
|
|
|
+ );
|
|
|
},
|
|
|
/**
|
|
|
* @description: 虫害折线图 切换虫害下拉框
|
|
|
@@ -281,12 +366,20 @@ export default {
|
|
|
let pestIndex = data[typeObj.type].pestName.indexOf(pest);
|
|
|
let xData = [];
|
|
|
let yData = [];
|
|
|
- data[typeObj.type].countInfo.forEach(pest => {
|
|
|
+ data[typeObj.type].countInfo.forEach((pest) => {
|
|
|
xData.push(pest.date);
|
|
|
- yData.push(pest.data[pestIndex])
|
|
|
- })
|
|
|
+ yData.push(pest.data[pestIndex]);
|
|
|
+ });
|
|
|
let char = echarts.init(document.getElementById(charId));
|
|
|
- this.setLineOption(char, [pest], xData, [yData], [['#0066ff59', '#0066ff00']], ['#1588F2'], true);
|
|
|
+ this.setLineOption(
|
|
|
+ char,
|
|
|
+ [pest],
|
|
|
+ xData,
|
|
|
+ [yData],
|
|
|
+ [['#0066ff59', '#0066ff00']],
|
|
|
+ ['#1588F2'],
|
|
|
+ true
|
|
|
+ );
|
|
|
},
|
|
|
// 获取有测报灯列表
|
|
|
getDeviceList(date) {
|
|
|
@@ -294,12 +387,12 @@ export default {
|
|
|
method: 'POST',
|
|
|
url: '/api/api_gateway?method=data_report.cbd_screen.device_screen_info',
|
|
|
data: this.qs.stringify({
|
|
|
- date
|
|
|
- })
|
|
|
- }).then(res => {
|
|
|
+ date,
|
|
|
+ }),
|
|
|
+ }).then((res) => {
|
|
|
if (!res.data.data) {
|
|
|
this.$message.error('网络连接出错或服务报错，请刷新页面重试');
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
// console.log(res.data.data);
|
|
|
this.deviceList = res.data.data;
|
|
|
@@ -314,36 +407,32 @@ export default {
|
|
|
this.getNowList(item.id);
|
|
|
this.getLineDate(item.id, index);
|
|
|
item.jk_addr = item.jk_addr ? eval('(' + item.jk_addr + ')') : {};
|
|
|
- if (item.jk_addr == '') return
|
|
|
- // // 视频
|
|
|
- this.$nextTick(() => {
|
|
|
- let playHtml = `<video id="play${item.id}" autoplay muted poster='' controls playsInline webkit-playsinline src="${item.jk_addr.hlsHd}" style="width:100%; height:100%;"></video>`;
|
|
|
- document.getElementById(
|
|
|
- 'playBox' + item.id
|
|
|
- ).innerHTML = playHtml;
|
|
|
- let playerObj = new EZUIKit.EZUIPlayer({
|
|
|
- id: `play${item.id}`
|
|
|
- });
|
|
|
- console.log(playerObj, 'playerObj')
|
|
|
- this.videoList.push(playerObj)
|
|
|
- })
|
|
|
+ // if (item.jk_addr == '') return;
|
|
|
// this.$nextTick(() => {
|
|
|
// let char = echarts.init(document.getElementById(`temChar${item.id}`));
|
|
|
// this.setLineOption(char, ['温度（℃）', '湿度（%）'], item.ath.addtime, [item.ath.tem, item.ath.hum], [['#90ff0366', '#8fff0010'], ['#0066ff59', '#0066ff00']], ['#19E4A6', '#1588F2'])
|
|
|
// })
|
|
|
// console.log(this.pestTypeList, 'pestTypeList');
|
|
|
- })
|
|
|
+ });
|
|
|
this.$nextTick(() => {
|
|
|
// 默认渲染第一页
|
|
|
this.initCharByIndex(this.activeIndex, 'tem');
|
|
|
- })
|
|
|
- // this.timmer = setInterval(() => {
|
|
|
- // this.$router.push('/newHome/home');
|
|
|
- // }, this.deviceList.length * 10000)
|
|
|
- })
|
|
|
+ });
|
|
|
+ this.timmer = setInterval(() => {
|
|
|
+ this.$router.push('/newHome/home');
|
|
|
+ }, this.deviceList.length * 1200000)
|
|
|
+ });
|
|
|
},
|
|
|
// 折线图带渐变配置
|
|
|
- setLineOption(char, name, xData, yData, color, lineColor, showAxisLabel = false) {
|
|
|
+ setLineOption(
|
|
|
+ char,
|
|
|
+ name,
|
|
|
+ xData,
|
|
|
+ yData,
|
|
|
+ color,
|
|
|
+ lineColor,
|
|
|
+ showAxisLabel = false
|
|
|
+ ) {
|
|
|
let series = [];
|
|
|
yData.forEach((item, index) => {
|
|
|
let pre = {
|
|
|
@@ -359,21 +448,24 @@ export default {
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
- colorStops: [{
|
|
|
- offset: 0,
|
|
|
- color: color[index][0] // 0% 处的颜色
|
|
|
- }, {
|
|
|
- offset: 0.8,
|
|
|
- color: color[index][1] // 100% 处的颜色
|
|
|
- }],
|
|
|
- global: false // 缺省为 false
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: color[index][0], // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: color[index][1], // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false, // 缺省为 false
|
|
|
},
|
|
|
- shadowColor: "rgba(0, 0, 0, 0.1)"
|
|
|
- }
|
|
|
- }
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
- series.push(pre)
|
|
|
- })
|
|
|
+ series.push(pre);
|
|
|
+ });
|
|
|
let optionsPestLine = {
|
|
|
// 设置全局文本样式
|
|
|
textStyle: {
|
|
|
@@ -384,49 +476,49 @@ export default {
|
|
|
left: '5%',
|
|
|
bottom: '5%',
|
|
|
right: '0%',
|
|
|
- containLabel: true
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
+ trigger: 'axis',
|
|
|
},
|
|
|
color: lineColor,
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
- color: '#ffffff' // 设置 x 轴轴线颜色为白色
|
|
|
- }
|
|
|
+ color: '#ffffff', // 设置 x 轴轴线颜色为白色
|
|
|
+ },
|
|
|
},
|
|
|
axisLabel: {
|
|
|
- show: showAxisLabel
|
|
|
+ show: showAxisLabel,
|
|
|
},
|
|
|
splitLine: {
|
|
|
- show: false // 不显示 x 轴分隔线
|
|
|
+ show: false, // 不显示 x 轴分隔线
|
|
|
},
|
|
|
- data: xData
|
|
|
+ data: xData,
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
nameTextStyle: {
|
|
|
- color: '#fff'
|
|
|
+ color: '#fff',
|
|
|
},
|
|
|
axisLine: {
|
|
|
- show: false // 不显示 y 轴轴线
|
|
|
+ show: false, // 不显示 y 轴轴线
|
|
|
},
|
|
|
axisLabel: {
|
|
|
- color: '#ffffff' // 设置 y 轴标签字体颜色为白色
|
|
|
+ color: '#ffffff', // 设置 y 轴标签字体颜色为白色
|
|
|
},
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
- type: 'dotted', // 设置分隔线为点线
|
|
|
- color: '#ffffff88'
|
|
|
- }
|
|
|
- }
|
|
|
+ type: 'dotted', // 设置分隔线为点线
|
|
|
+ color: '#ffffff88',
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
- series: series
|
|
|
+ series: series,
|
|
|
}; // 有害生物发生趋势 折线图
|
|
|
|
|
|
- char.setOption(optionsPestLine)
|
|
|
+ char.setOption(optionsPestLine);
|
|
|
},
|
|
|
// 柱状图配置
|
|
|
setBarOption(char, xData, yData) {
|
|
|
@@ -440,54 +532,54 @@ export default {
|
|
|
left: '0',
|
|
|
bottom: '5%',
|
|
|
right: '0%',
|
|
|
- containLabel: true
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
+ trigger: 'axis',
|
|
|
},
|
|
|
color: ['#24D3BE'],
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
- color: '#ffffff' // 设置 x 轴轴线颜色为白色
|
|
|
- }
|
|
|
+ color: '#ffffff', // 设置 x 轴轴线颜色为白色
|
|
|
+ },
|
|
|
},
|
|
|
axisLabel: {
|
|
|
- show: true
|
|
|
+ show: true,
|
|
|
},
|
|
|
splitLine: {
|
|
|
- show: false // 不显示 x 轴分隔线
|
|
|
+ show: false, // 不显示 x 轴分隔线
|
|
|
},
|
|
|
- data: xData
|
|
|
+ data: xData,
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
nameTextStyle: {
|
|
|
- color: '#fff'
|
|
|
+ color: '#fff',
|
|
|
},
|
|
|
axisLine: {
|
|
|
- show: false // 不显示 y 轴轴线
|
|
|
+ show: false, // 不显示 y 轴轴线
|
|
|
},
|
|
|
axisLabel: {
|
|
|
- color: '#ffffff' // 设置 y 轴标签字体颜色为白色
|
|
|
+ color: '#ffffff', // 设置 y 轴标签字体颜色为白色
|
|
|
},
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
- type: 'dotted', // 设置分隔线为点线
|
|
|
- color: '#ffffff88'
|
|
|
- }
|
|
|
- }
|
|
|
+ type: 'dotted', // 设置分隔线为点线
|
|
|
+ color: '#ffffff88',
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
data: yData,
|
|
|
- type: 'bar'
|
|
|
+ type: 'bar',
|
|
|
},
|
|
|
- ]
|
|
|
+ ],
|
|
|
}; // 有害生物发生趋势 折线图
|
|
|
|
|
|
- char.setOption(optionsPestLine)
|
|
|
+ char.setOption(optionsPestLine);
|
|
|
},
|
|
|
// 获取虫害分类数据
|
|
|
getTypeList(id, index) {
|
|
|
@@ -495,32 +587,32 @@ export default {
|
|
|
method: 'POST',
|
|
|
url: '/api/api_gateway?method=data_report.cbd_screen.cbd_pest_info',
|
|
|
data: this.qs.stringify({
|
|
|
- id
|
|
|
- })
|
|
|
- }).then(res => {
|
|
|
+ id,
|
|
|
+ }),
|
|
|
+ }).then((res) => {
|
|
|
if (!res.data.data) {
|
|
|
this.$message.error('网络连接出错或服务报错，请刷新页面重试');
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
- let newArray = []
|
|
|
+ let newArray = [];
|
|
|
res.data.data.name.forEach((item, index) => {
|
|
|
let preObj = {
|
|
|
name: item,
|
|
|
num: res.data.data.count[index],
|
|
|
- value: res.data.data.count[index]
|
|
|
- }
|
|
|
- newArray.push(preObj)
|
|
|
+ value: res.data.data.count[index],
|
|
|
+ };
|
|
|
+ newArray.push(preObj);
|
|
|
});
|
|
|
- console.log(id)
|
|
|
+ console.log(id);
|
|
|
// let char = echarts.init(document.getElementById(`countChar${id}`));
|
|
|
// this.setBarOption(char, res.data.data.name, res.data.data.count);
|
|
|
this.pestTypeList.push(newArray);
|
|
|
this.pestTypeBar.push(res.data.data);
|
|
|
- if (index != this.activeIndex) return
|
|
|
+ if (index != this.activeIndex) return;
|
|
|
if (this.pestTypeBar.length > this.activeIndex) {
|
|
|
this.initCharByIndex(this.activeIndex, 'count');
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
// 获取虫害图片数据
|
|
|
getPhotoList(id) {
|
|
|
@@ -528,15 +620,15 @@ export default {
|
|
|
method: 'POST',
|
|
|
url: '/api/api_gateway?method=data_report.cbd_screen.recent_photo_count',
|
|
|
data: this.qs.stringify({
|
|
|
- id
|
|
|
- })
|
|
|
- }).then(res => {
|
|
|
+ id,
|
|
|
+ }),
|
|
|
+ }).then((res) => {
|
|
|
if (!res.data.data) {
|
|
|
this.$message.error('网络连接出错或服务报错，请刷新页面重试');
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
- this.pestImgList.push(res.data.data)
|
|
|
- })
|
|
|
+ this.pestImgList.push(res.data.data);
|
|
|
+ });
|
|
|
},
|
|
|
// 获取虫害实时数据
|
|
|
getNowList(id) {
|
|
|
@@ -544,34 +636,34 @@ export default {
|
|
|
method: 'POST',
|
|
|
url: '/api/api_gateway?method=data_report.cbd_screen.recent_pest_count',
|
|
|
data: this.qs.stringify({
|
|
|
- id
|
|
|
- })
|
|
|
- }).then(res => {
|
|
|
+ id,
|
|
|
+ }),
|
|
|
+ }).then((res) => {
|
|
|
if (!res.data.data) {
|
|
|
this.$message.error('网络连接出错或服务报错，请刷新页面重试');
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
- this.pestNowList.push(res.data.data)
|
|
|
- })
|
|
|
+ this.pestNowList.push(res.data.data);
|
|
|
+ });
|
|
|
},
|
|
|
getLineDate(id, index) {
|
|
|
this.$axios({
|
|
|
method: 'POST',
|
|
|
url: '/api/api_gateway?method=data_report.cbd_screen.cbd_pest_count',
|
|
|
data: this.qs.stringify({
|
|
|
- id
|
|
|
- })
|
|
|
- }).then(res => {
|
|
|
+ id,
|
|
|
+ }),
|
|
|
+ }).then((res) => {
|
|
|
if (!res.data.data) {
|
|
|
this.$message.error('网络连接出错或服务报错，请刷新页面重试');
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
this.pestLineDate.push(res.data.data);
|
|
|
this.pestLineCheck.push({
|
|
|
type: 'day',
|
|
|
- value: res.data.data.day.pestName[0]
|
|
|
+ value: res.data.data.day.pestName[0],
|
|
|
});
|
|
|
- if (index != this.activeIndex) return
|
|
|
+ if (index != this.activeIndex) return;
|
|
|
|
|
|
if (this.pestLineDate.length > this.activeIndex) {
|
|
|
this.initCharByIndex(this.activeIndex, 'pestDate');
|
|
|
@@ -585,13 +677,13 @@ export default {
|
|
|
// let char = echarts.init(document.getElementById(`pestDateChar${id}`));
|
|
|
// this.setLineOption(char, [res.data.data.day.pestName[0]], xData, [yData], [['#0066ff59', '#0066ff00']], ['#1588F2'], true)
|
|
|
// console.log(this.pestLineDate)
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
},
|
|
|
components: {
|
|
|
Title,
|
|
|
PestType,
|
|
|
- PestInfo
|
|
|
+ PestInfo,
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -601,7 +693,7 @@ export default {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
- background: #02112F;
|
|
|
+ background: #02112f;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
box-sizing: border-box;
|
|
|
@@ -644,7 +736,7 @@ export default {
|
|
|
display: flex;
|
|
|
color: #ffffff80;
|
|
|
font-size: 1.6rem;
|
|
|
- margin-left: .5rem;
|
|
|
+ margin-left: 0.5rem;
|
|
|
|
|
|
div {
|
|
|
width: 2.4rem;
|
|
|
@@ -654,7 +746,7 @@ export default {
|
|
|
|
|
|
.active {
|
|
|
color: #ffffff;
|
|
|
- text-shadow: 0 0 2.5px #FFF;
|
|
|
+ text-shadow: 0 0 2.5px #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -665,14 +757,14 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
width: 21.2vw;
|
|
|
height: 23vh;
|
|
|
- background: url('../../../assets/images/newHome/smallChar.png') center center no-repeat;
|
|
|
+ background: url('../../../assets/images/newHome/smallChar.png') center center
|
|
|
+ no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
.charBox {
|
|
|
width: 100%;
|
|
|
height: 17.3vh;
|
|
|
overflow: hidden;
|
|
|
-
|
|
|
/deep/ .el-carousel__container {
|
|
|
width: 100% !important;
|
|
|
height: 100% !important;
|
|
|
@@ -730,13 +822,18 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
width: 44vw;
|
|
|
height: 48vh;
|
|
|
- background: url('../../../assets/images/newHome/smallChar.png') center center no-repeat;
|
|
|
+ background: url('../../../assets/images/newHome/smallChar.png') center center
|
|
|
+ no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
.charBox {
|
|
|
width: 100%;
|
|
|
height: 38.7vh;
|
|
|
overflow: hidden;
|
|
|
+ img {
|
|
|
+ margin-top: 1rem;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -797,7 +894,7 @@ export default {
|
|
|
color: #ffffffe6;
|
|
|
font-size: 2rem;
|
|
|
font-weight: 600;
|
|
|
- margin-bottom: .4rem;
|
|
|
+ margin-bottom: 0.4rem;
|
|
|
}
|
|
|
}
|
|
|
}
|
