首页点击图标事件

guanqb

2022-08-20 b77f3d0be83a7265b9cc16e234f78b4faeeb3a29

首页点击图标事件

 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)

 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()
            }
        },

    }
}