From b77f3d0be83a7265b9cc16e234f78b4faeeb3a29 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Sat, 20 Aug 2022 14:39:38 +0800
Subject: [PATCH] 首页点击图标事件
---
src/views/home/index.vue | 421 ++++++++++++++++++++++++++++++++++++++++++++++++++++
src/components/map/index.vue | 4
2 files changed, 420 insertions(+), 5 deletions(-)
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 9da1967..b5b8fae 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -359,7 +359,7 @@
})
label.on(global.DC.MouseEventType.CLICK, (e) => {
- if (item.dictTypeNum == 0) {
+ if (!item.dictTypeNum) {
that.$parent.goToJkDetail(e.overlay.attrParams)
} else {
that.$parent.goToDetail(e.overlay.attrParams)
@@ -371,7 +371,7 @@
billboard.attrParams = item
billboard.on(global.DC.MouseEventType.CLICK, (e) => {
- if (item.dictTypeNum == 0) {
+ if (!item.dictTypeNum) {
that.$parent.goToJkDetail(e.overlay.attrParams)
} else {
that.$parent.goToDetail(e.overlay.attrParams)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 791e664..523a9a4 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -538,6 +538,170 @@
</div>
</template>
</public-box>
+ <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 controls width="100%" height="100%"></video>
+ </div>
+ </template>
+ </public-box>
</div>
</template>
@@ -557,12 +721,16 @@
selectMarketDistrict,
getFarmList,
getLandList,
- getFarmingRecordList
+ getFarmingRecordList,
+
+
} from '@/api/farm/farmingrecord'
// eslint-disable-next-line no-unused-vars
import { selectXCount } from '@/api/land/land'
-
import chinaJSON from '@/assets/china.json'
+import dateUtils from '@/utils/dateUtils'
+import { getStationDateByStcd } from '@/api/equipment/equipment'
+import flvjs from 'flv.js'
export default {
data () {
@@ -615,6 +783,19 @@
showIconTR: true,
showIconQX: true,
showIconSZ: true,
+ staionDetail: false,
+ JkDetail: false,
+ // 视频数据
+ vidInfo: {},
+ // 监测数据
+ staInfo: {},
+ // 监测详细数据
+ stationData: {},
+ // 监测设备echart展示
+ echartIsShow: false,
+ // 监测列表index
+ jcIndex: 0,
+ flvPlayer: null,
}
},
created () {
@@ -1420,7 +1601,241 @@
} else {
this.$refs.modalForm.showSZLayer()
}
- }
+ },
+ // 跳转 监控 设备详情窗口
+ goToJkDetail (item) {
+ this.vidInfo = item
+ this.JkDetail = true
+ this.$nextTick(() => {
+ console.log('gggggggg55555', item)
+ this.playFlvVideo(item.wssFlv)
+ })
+ },
+ // 跳转 监测 设备详情窗口
+ goToDetail (item) {
+ this.staInfo = item
+ this.getStationDateByStcd(item.stcd)
+ this.staionDetail = true
+ },
+ // 根据设备号获取监测数据
+ 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
+ })
+ },
+ // 点击展示监测设备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)
+ }
+ },
+ // 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)
+ },
+ // 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()
+ }
+ },
}
}
--
Gitblit v1.9.3