监测设备数据展示优化

guanqb

2022-09-01 781ffa7f5a2814b3b0a77c9759782d651c71fe79

监测设备数据展示优化

 src/styles/publicBox/equirment-station-details.css

@@ -41,6 +41,10 @@
}

.public-equirment-station-details .content {
  height: 330px;
}

.public-equirment-station-details .content .publicStaBox {
  overflow: scroll;
  height: 330px;
}

 src/styles/publicBox/equirment-station-details.min.css

@@ -1 +1 @@
.public-equirment-station-details{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:648px;height:401px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 3px 20px 1px #5BC3D1;opacity:1;border:1px solid #69E2ED;background:rgba(20,66,104,0.8);border-radius:10px;margin:0;padding:0}.public-equirment-station-details .header{position:relative;width:270px;height:24px;font-size:18px;font-family:Microsoft YaHei-Bold, Microsoft YaHei;font-weight:bold;color:#58BFCD;line-height:20px;margin:20px auto}.public-equirment-station-details .header div{text-align:center}.public-equirment-station-details .header .close{position:absolute;top:-20px;right:-260px;cursor:pointer}.public-equirment-station-details .content{overflow:scroll;height:330px}.public-equirment-station-details .content .itemTitle{box-sizing:border-box;width:607px;height:70px;background:#0D1E34;border-radius:0px 0px 0px 0px;opacity:1;margin-left:17px;margin-bottom:10px;padding:15px 20px;border:1px solid transparent}.public-equirment-station-details .content .itemTitle img{float:left;width:30px;height:30px}.public-equirment-station-details .content .itemTitle .type{float:left;margin-left:20px;width:150px}.public-equirment-station-details .content .itemTitle .type h1{font-size:16px;color:#58BFCD;margin-bottom:4px}.public-equirment-station-details .content .itemTitle .type span{font-size:13px;color:#FFFFFF;opacity:0.5}.public-equirment-station-details .content .itemTitle .data{float:left;margin-left:158px;width:80px;height:34px;font-size:34px;font-family:DS-Digital-Italic, DS-Digital;font-weight:normal;color:#58BFCD;line-height:32px}.public-equirment-station-details .content .itemTitle .openMenuIcon{margin-left:90px;margin-top:4px;cursor:pointer}.public-equirment-station-details .content .EchartsBox_div{width:607px;height:210px;background:#0D1E34;margin-left:17px;margin-top:-11px;margin-bottom:10px}
.public-equirment-station-details{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:648px;height:401px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 3px 20px 1px #5BC3D1;opacity:1;border:1px solid #69E2ED;background:rgba(20,66,104,0.8);border-radius:10px;margin:0;padding:0}.public-equirment-station-details .header{position:relative;width:270px;height:24px;font-size:18px;font-family:Microsoft YaHei-Bold, Microsoft YaHei;font-weight:bold;color:#58BFCD;line-height:20px;margin:20px auto}.public-equirment-station-details .header div{text-align:center}.public-equirment-station-details .header .close{position:absolute;top:-20px;right:-260px;cursor:pointer}.public-equirment-station-details .content{height:330px}.public-equirment-station-details .content .publicStaBox{overflow:scroll;height:330px}.public-equirment-station-details .content .itemTitle{box-sizing:border-box;width:607px;height:70px;background:#0D1E34;border-radius:0px 0px 0px 0px;opacity:1;margin-left:17px;margin-bottom:10px;padding:15px 20px;border:1px solid transparent}.public-equirment-station-details .content .itemTitle img{float:left;width:30px;height:30px}.public-equirment-station-details .content .itemTitle .type{float:left;margin-left:20px;width:150px}.public-equirment-station-details .content .itemTitle .type h1{font-size:16px;color:#58BFCD;margin-bottom:4px}.public-equirment-station-details .content .itemTitle .type span{font-size:13px;color:#FFFFFF;opacity:0.5}.public-equirment-station-details .content .itemTitle .data{float:left;margin-left:158px;width:80px;height:34px;font-size:34px;font-family:DS-Digital-Italic, DS-Digital;font-weight:normal;color:#58BFCD;line-height:32px}.public-equirment-station-details .content .itemTitle .openMenuIcon{margin-left:90px;margin-top:4px;cursor:pointer}.public-equirment-station-details .content .EchartsBox_div{width:607px;height:210px;background:#0D1E34;margin-left:17px;margin-top:-11px;margin-bottom:10px}

 src/styles/publicBox/equirment-station-details.scss

@@ -38,8 +38,11 @@
        }
    }
    .content {
        overflow: scroll;
        height: 330px;
         height: 330px;
        .publicStaBox {
            overflow: scroll;
            height: 330px;
        }
        .itemTitle {
            box-sizing: border-box;
            width: 607px;

 src/views/farm/index.vue

@@ -402,7 +402,7 @@
                />
            </template>
            <template slot="public-box-content">
                <div class="publicStaBox" v-show="isShowpublicStaBox">
                <div class="publicStaBox">
                    <!-- 气象监测 -->
                    <div
                        class="item"
@@ -1038,7 +1038,6 @@
            vidInfo: {}, // 视频数据
            staInfo: {}, // 监测数据
            stationData: {}, // 监测详细数据
            isShowpublicStaBox: false,
        }
    },
    created () {
@@ -1218,19 +1217,20 @@
        },
        // 跳转 监测 设备详情窗口
        goToDetail (item) {
            this.jcIndex = 0
            this.echartIsShow = false
            this.staInfo = item
            let loadingInstance = Loading.service({ fullscreen: false, target: '.publicStaBox', text: '正在加载数据...', background: '#091a2b' })
            this.getStationDateByStcd(item.stcd)
            this.stationData = {}
            this.staionDetail = true
            let loadingInstance = Loading.service({ fullscreen: false, target: '.publicStaBox', text: '正在加载数据...', background: 'rgba(25, 67, 94,0.5)' })
            this.$nextTick(() => {
                setTimeout(() => {
                    loadingInstance.close()
                }, 1000)
                }, 300)
            })
            this.staionDetail = true
            setTimeout(() => {
                this.isShowpublicStaBox = true
            }, 1000)

                this.getStationDateByStcd(item.stcd)
            }, 400)
        },
        // 跳转 监控 设备详情窗口
        goToJkDetail (item) {

 src/views/home/index.vue

@@ -336,7 +336,12 @@
            <template slot="public-box-header">
                <div class="logo"></div>
                <div class="title">市场流通</div>
                <img @click="cityShow = false" src="../../../public/img/icon/public-close.png" alt class="close" />
                <img
                    @click="cityShow = false"
                    src="../../../public/img/icon/public-close.png"
                    alt
                    class="close"
                />
            </template>
            <template slot="public-box-content">
                <div class="market-title">
@@ -564,132 +569,562 @@
                />
            </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 class="publicStaBox">
                    <!-- 气象监测 -->
                    <div
                        class="item"
                        v-for="(item, staListIndex) in stationData.weatherList"
                        :key="'weatherList' + staListIndex"
                    >
                        <div class="itemTitle">
                            <img
                                v-if="item.name == '水隔离子'"
                                src="../../../public/img/staListIcon/NH4.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '雨量'"
                                src="../../../public/img/staListIcon/rain.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '土壤电导率'"
                                src="../../../public/img/staListIcon/soli-ele.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '水电导率'"
                                src="../../../public/img/staListIcon/soli-ele.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '雨量累计'"
                                src="../../../public/img/staListIcon/rain.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '空气湿度'"
                                src="../../../public/img/staListIcon/soli-water.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '风向'"
                                src="../../../public/img/staListIcon/wind.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == 'EC'"
                                src="../../../public/img/staListIcon/EC.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '钾离子'"
                                src="../../../public/img/staListIcon/K.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '酸碱度'"
                                src="../../../public/img/staListIcon/PH.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '土壤温度'"
                                src="../../../public/img/staListIcon/soil-temperature.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '空气温度'"
                                src="../../../public/img/staListIcon/soil-temperature.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '硝酸银'"
                                src="../../../public/img/staListIcon/soil-temperature.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '水铜离子'"
                                src="../../../public/img/staListIcon/CU2.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '水铅离子'"
                                src="../../../public/img/staListIcon/PB2.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '水镉离子'"
                                src="../../../public/img/staListIcon/CD2.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == 'PM2.5'"
                                src="../../../public/img/staListIcon/PM25.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '气压'"
                                src="../../../public/img/staListIcon/pressure.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '光照度'"
                                src="../../../public/img/staListIcon/light.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '风速'"
                                src="../../../public/img/staListIcon/windSpeed.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == 'CO2'"
                                src="../../../public/img/staListIcon/CO2.png"
                                alt
                            />
                            <img v-else src="../../../public/img/icon/wd-icon.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="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 class="echart" v-show="echartIsShow && jcIndex == staListIndex">
                            <div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
                        </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
                        class="item"
                        v-for="(item, staListIndex) in stationData.soliList"
                        :key="'soliList' + staListIndex"
                    >
                        <div class="itemTitle">
                            <img
                                v-if="item.name == '水隔离子'"
                                src="../../../public/img/staListIcon/NH4.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '雨量'"
                                src="../../../public/img/staListIcon/rain.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '土壤电导率'"
                                src="../../../public/img/staListIcon/soli-ele.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '水电导率'"
                                src="../../../public/img/staListIcon/soli-ele.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '雨量累计'"
                                src="../../../public/img/staListIcon/rain.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '空气湿度'"
                                src="../../../public/img/staListIcon/soli-water.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '风向'"
                                src="../../../public/img/staListIcon/wind.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == 'EC'"
                                src="../../../public/img/staListIcon/EC.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '钾离子'"
                                src="../../../public/img/staListIcon/K.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '酸碱度'"
                                src="../../../public/img/staListIcon/PH.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '土壤温度'"
                                src="../../../public/img/staListIcon/soil-temperature.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '空气温度'"
                                src="../../../public/img/staListIcon/soil-temperature.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '硝酸银'"
                                src="../../../public/img/staListIcon/soil-temperature.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '水铜离子'"
                                src="../../../public/img/staListIcon/CU2.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '水铅离子'"
                                src="../../../public/img/staListIcon/PB2.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '水镉离子'"
                                src="../../../public/img/staListIcon/CD2.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == 'PM2.5'"
                                src="../../../public/img/staListIcon/PM25.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '气压'"
                                src="../../../public/img/staListIcon/pressure.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '光照度'"
                                src="../../../public/img/staListIcon/light.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '风速'"
                                src="../../../public/img/staListIcon/windSpeed.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == 'CO2'"
                                src="../../../public/img/staListIcon/CO2.png"
                                alt
                            />
                            <img v-else src="../../../public/img/icon/wd-icon.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="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 class="echart" v-show="echartIsShow && jcIndex == staListIndex">
                            <div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
                        </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
                        class="item"
                        v-for="(item, staListIndex) in stationData.airList"
                        :key="'airList' + staListIndex"
                    >
                        <div class="itemTitle">
                            <img
                                v-if="item.name == '水隔离子'"
                                src="../../../public/img/staListIcon/NH4.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '雨量'"
                                src="../../../public/img/staListIcon/rain.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '土壤电导率'"
                                src="../../../public/img/staListIcon/soli-ele.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '水电导率'"
                                src="../../../public/img/staListIcon/soli-ele.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '雨量累计'"
                                src="../../../public/img/staListIcon/rain.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '空气湿度'"
                                src="../../../public/img/staListIcon/soli-water.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '风向'"
                                src="../../../public/img/staListIcon/wind.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == 'EC'"
                                src="../../../public/img/staListIcon/EC.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '钾离子'"
                                src="../../../public/img/staListIcon/K.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '酸碱度'"
                                src="../../../public/img/staListIcon/PH.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '土壤温度'"
                                src="../../../public/img/staListIcon/soil-temperature.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '空气温度'"
                                src="../../../public/img/staListIcon/soil-temperature.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '硝酸银'"
                                src="../../../public/img/staListIcon/soil-temperature.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '水铜离子'"
                                src="../../../public/img/staListIcon/CU2.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '水铅离子'"
                                src="../../../public/img/staListIcon/PB2.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '水镉离子'"
                                src="../../../public/img/staListIcon/CD2.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == 'PM2.5'"
                                src="../../../public/img/staListIcon/PM25.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '气压'"
                                src="../../../public/img/staListIcon/pressure.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '光照度'"
                                src="../../../public/img/staListIcon/light.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '风速'"
                                src="../../../public/img/staListIcon/windSpeed.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == 'CO2'"
                                src="../../../public/img/staListIcon/CO2.png"
                                alt
                            />
                            <img v-else src="../../../public/img/icon/wd-icon.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
                                v-if="item.name == '水隔离子'"
                                src="../../../public/img/staListIcon/NH4.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '雨量'"
                                src="../../../public/img/staListIcon/rain.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '土壤电导率'"
                                src="../../../public/img/staListIcon/soli-ele.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '水电导率'"
                                src="../../../public/img/staListIcon/soli-ele.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '雨量累计'"
                                src="../../../public/img/staListIcon/rain.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '空气湿度'"
                                src="../../../public/img/staListIcon/soli-water.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '风向'"
                                src="../../../public/img/staListIcon/wind.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == 'EC'"
                                src="../../../public/img/staListIcon/EC.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '钾离子'"
                                src="../../../public/img/staListIcon/K.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '酸碱度'"
                                src="../../../public/img/staListIcon/PH.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '土壤温度'"
                                src="../../../public/img/staListIcon/soil-temperature.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '空气温度'"
                                src="../../../public/img/staListIcon/soil-temperature.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '硝酸银'"
                                src="../../../public/img/staListIcon/soil-temperature.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '水铜离子'"
                                src="../../../public/img/staListIcon/CU2.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '水铅离子'"
                                src="../../../public/img/staListIcon/PB2.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '水镉离子'"
                                src="../../../public/img/staListIcon/CD2.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == 'PM2.5'"
                                src="../../../public/img/staListIcon/PM25.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '气压'"
                                src="../../../public/img/staListIcon/pressure.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '光照度'"
                                src="../../../public/img/staListIcon/light.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == '风速'"
                                src="../../../public/img/staListIcon/windSpeed.png"
                                alt
                            />
                            <img
                                v-else-if="item.name == 'CO2'"
                                src="../../../public/img/staListIcon/CO2.png"
                                alt
                            />
                            <img v-else src="../../../public/img/icon/wd-icon.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>
            </template>
@@ -817,6 +1252,7 @@
import { getStationDateByStcd } from '@/api/equipment/equipment'
import flvjs from 'flv.js'
import dateUtilsJs from '@/utils/dateUtils'
import { Loading } from 'element-ui'

export default {
    data () {
@@ -839,7 +1275,7 @@
            marketDistrict: [],
            farm: {},
            scSelectTime: '',
            nsSelectTime: [dateUtilsJs.getSpecifyDayDate(30),dateUtilsJs.getToDay()],
            nsSelectTime: [dateUtilsJs.getSpecifyDayDate(30), dateUtilsJs.getToDay()],
            scStartTime: '',
            scEndTime: '',
            ncListShow: false,
@@ -1612,9 +2048,20 @@
        },
        // 跳转 监测 设备详情窗口
        goToDetail (item) {
            this.jcIndex = 0
            this.echartIsShow = false
            this.staInfo = item
            this.getStationDateByStcd(item.stcd)
            this.stationData = {}
            this.staionDetail = true
            let loadingInstance = Loading.service({ fullscreen: false, target: '.publicStaBox', text: '正在加载数据...', background: 'rgba(25, 67, 94,0.5)' })
            this.$nextTick(() => {
                setTimeout(() => {
                    loadingInstance.close()
                }, 300)
            })
            setTimeout(() => {
                this.getStationDateByStcd(item.stcd)
            }, 400)
        },
        // 根据设备号获取监测数据
        getStationDateByStcd (stcd) {
@@ -1972,6 +2419,7 @@




    }
}
</script>
@@ -2031,7 +2479,8 @@
                        .log {
                            left: auto;
                            right: 0;
                            background: url(../../../public/img/icon/nc-num.png) no-repeat;
                            background: url(../../../public/img/icon/nc-num.png)
                                no-repeat;
                        }

                        .t-l,
@@ -2065,7 +2514,8 @@
                        .log {
                            left: 0;
                            right: auto;
                            background: url(../../../public/img/icon/pel-num.png) no-repeat;
                            background: url(../../../public/img/icon/pel-num.png)
                                no-repeat;
                        }

                        .t-l,
@@ -2504,7 +2954,8 @@
                        margin-left: 16px;
                        width: 10px;
                        height: 14px;
                        background: url(../../../public/img/icon/l-icon.png) no-repeat;
                        background: url(../../../public/img/icon/l-icon.png)
                            no-repeat;
                        background-size: 100% 100%;
                    }

@@ -2518,7 +2969,8 @@
                        right: -54px;
                        width: 74px;
                        height: 19px;
                        background: url(../../../public/img/icon/r-icon.png) no-repeat;
                        background: url(../../../public/img/icon/r-icon.png)
                            no-repeat;
                        background-size: 100% 100%;
                    }

@@ -2528,7 +2980,8 @@
                        bottom: 0;
                        width: 378px;
                        height: 5px;
                        background: url(../../../public/img/icon/line.png) no-repeat;
                        background: url(../../../public/img/icon/line.png)
                            no-repeat;
                        background-size: 100% 100%;
                    }

@@ -2538,7 +2991,8 @@
                        bottom: 0;
                        width: 20px;
                        height: 3px;
                        background: url(../../../public/img/icon/r-line.png) no-repeat;
                        background: url(../../../public/img/icon/r-line.png)
                            no-repeat;
                        background-size: 100% 100%;
                    }
                }