2415 lines
75 KiB
Vue
2415 lines
75 KiB
Vue
<template>
|
||
<ScaleBox
|
||
:width="1920"
|
||
:height="1080"
|
||
bgc="transparent"
|
||
:delay="100"
|
||
:isFlat="true"
|
||
@scaleChange="scaleChange"
|
||
>
|
||
<div
|
||
class="main"
|
||
v-loading="loading"
|
||
element-loading-text="加载中"
|
||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||
>
|
||
<div class="nav">
|
||
<span class="nav_ti nav_mag">武乡县黄河流域农业面源污染平台</span>
|
||
<span class="nav_tit">治理效果评价和监测一张图</span>
|
||
</div>
|
||
<div class="nav_btn">
|
||
<div class="btn_left">
|
||
<span class="btn_left_time"> {{ nowTime }}</span> <span class="btn_left_tianq" style="z-index: 9999;"></span>
|
||
</div>
|
||
<div class="btn_right">
|
||
<hefentianqi/>
|
||
<img src="@/assets/image/quanping.png" class="quanping" v-if="fullscreen==false" @click="screen" alt="">
|
||
<img src="@/assets/image/quanpingtui.png" class="quanping" @click="screen" alt="" v-else>
|
||
<span class="btn_right_time"><img src="@/assets/image/header.png" @click="dialogVisible = true" class="peoimg"
|
||
alt=""></span>
|
||
</div>
|
||
</div>
|
||
<!-- 退出登录弹窗 -->
|
||
<div class="login logintc">
|
||
<el-dialog
|
||
title="退出登录"
|
||
:visible.sync="dialogVisible"
|
||
width="10%"
|
||
>
|
||
<span class="infornameclas">欢迎您，{{ inforname }}！</span>
|
||
<el-button type="primary" @click="handleClosetuichu" class="logintc_tc">
|
||
<img src="@/assets/image/tuichu.png" @click="dialogVisible = true" class="tuichu" alt="">
|
||
退出登录
|
||
</el-button>
|
||
<img src="@/assets/image/sanjiao.png" class="sanjiao" alt="">
|
||
</el-dialog>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<img src="@/assets/image/qiehuan2.png" @click="mapTypeSwitch"
|
||
style="position: fixed;top:5.2vw;right:26%;z-index: 999;width:12vw;cursor: pointer;" alt=""
|
||
v-if="mapTypeFlag==true">
|
||
<img src="@/assets/image/qiehuan.png" @click="mapTypeSwitch"
|
||
style="position: fixed;top:5.2vw;right:3%;z-index: 999;width:12vw;cursor: pointer;" alt="" v-else>
|
||
<div id="container"
|
||
style="width:98%;height:100%;resize:both; position: absolute;z-index:0;top:0px;left: 1%;"></div>
|
||
|
||
<!-- 左上头部 -->
|
||
<transition enter-active-class="animate__animated animate__backInLeft"
|
||
leave-active-class="animate__animated animate__backOutLeft">
|
||
<template v-if="mapTypeFlag">
|
||
<div class="baseBoxLeft left baseBoxHjleft">
|
||
<img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
|
||
<img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
|
||
<img src="@/assets/image/kuang_zuoxia.png" class="in2con_zzx" alt="">
|
||
<img src="@/assets/image/kuang_youxia.png" class="in2con_zyx" alt="">
|
||
<img src="@/assets/image/sanguang.png" class="sanguang" alt="">
|
||
<img src="@/assets/image/sanguang.png" class="sanguangbt" alt="">
|
||
<div>
|
||
<div class="in1con_lf_tit ">
|
||
<span class="in1con_lf_titshow1" >{{ briefconCode }}</span>
|
||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||
</div>
|
||
<div class="home_lcgk" style="width: 88%;">
|
||
<vue-seamless-scroll :data="briefconValue" class="wp-1 hp-1" :class-option="showOption">
|
||
<p v-for="item in briefconValue" :key="item.id">{{ item.detailValue }}</p>
|
||
</vue-seamless-scroll>
|
||
</div>
|
||
<div class="in1con_lf_img">
|
||
<div
|
||
class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
|
||
<img src="@/assets/image/xmgk01.png" class="in1con_lf_imgone" alt="">
|
||
<span class="in1con_lf_imglf_tit">农田污染监测站</span>
|
||
<span class="in1con_lf_imglf_num">
|
||
<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
|
||
:to="Number(stationCount0)" :key="stationCount0" duration="3000"></animate-number>个
|
||
</span>
|
||
</div>
|
||
<div
|
||
class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
|
||
<img src="@/assets/image/xmgk02.png" class="in1con_lf_imgone" alt="">
|
||
<span class="in1con_lf_imglf_tit">畜禽污染监测站</span>
|
||
<span class="in1con_lf_imglf_num">
|
||
<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
|
||
:to="Number(stationCount0)" :key="stationCount0" duration="3000"></animate-number>个
|
||
</span>
|
||
</div>
|
||
<div
|
||
class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
|
||
<img src="@/assets/image/xmgk04.png" class="in1con_lf_imgone" alt="">
|
||
<span class="in1con_lf_imglf_tit">小流域污染监测站</span>
|
||
<span class="in1con_lf_imglf_num">
|
||
<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
|
||
:to="Number(stationCount0)" :key="stationCount0" duration="3000"></animate-number>个
|
||
</span>
|
||
</div>
|
||
<div
|
||
class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
|
||
<img src="@/assets/image/xmgk03.png" class="in1con_lf_imgone" alt="">
|
||
<span class="in1con_lf_imglf_tit">长期定位监测点位</span>
|
||
<span class="in1con_lf_imglf_num">
|
||
<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
|
||
:to="Number(stationCount0)" :key="stationCount0" duration="3000"></animate-number>个
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
|
||
<div>
|
||
<div class="in1con_lf_tit ">
|
||
<span class="in1con_lf_titshow1">气候环境</span>
|
||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||
</div>
|
||
<div class="qhhjcov">
|
||
<div style="width:96%;margin:0 auto;margin-top:12px;">
|
||
<div class="qhhjcov_lf" v-for="item in climate_env" :key="item.id">
|
||
<img :src="urlimg+item.detailPics" class="qhhjcov_lfimg" alt="">
|
||
<span class="qhhjcov_lf_tit">{{ item.detailCode }}</span>
|
||
<span class="qhhjcov_time"> <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
|
||
:to="Number(item.detailValue)" :key="item.detailValue"
|
||
duration="3000"></animate-number>{{ item.detailValue2 }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
|
||
<div>
|
||
<div class="in1con_lf_tit ">
|
||
<span class="in1con_lf_titshow1">水利情况</span>
|
||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||
</div>
|
||
<div class="in1con_lf_img">
|
||
<div
|
||
class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse"
|
||
v-for="legth in water_conser" :key="legth.id">
|
||
<img :src="urlimg+legth.detailPics" class="in1con_lf_imgone" alt="">
|
||
<span class="in1con_lf_imglf_tit">{{ legth.detailCode }}</span>
|
||
<span class="in1con_lf_imglf_num"> <animate-number class="in1con_lf_imglf_num_jix" ref="reNum"
|
||
from="0" :to="Number(legth.detailValue)"
|
||
:key="legth.detailValue"
|
||
duration="3000"></animate-number>{{ legth.detailValue2 }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="home_dlhj">
|
||
<el-carousel arrow="never" height="150px" style=" bottom: 20px;">
|
||
<el-carousel-item v-for="value in roll_info" :key="value.id">
|
||
<div class="sx_cov">
|
||
<span class="sx_covtit">
|
||
{{ value.infoName }}
|
||
</span>
|
||
<ul v-for="ite in value.detailList" :key="ite.id">
|
||
<li class="sx_cov_lt">
|
||
<span class="sx_cov_lt_tit">{{ ite.detailCode }}</span>
|
||
<span class="sx_cov_lt_num">
|
||
<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="ite.detailValue"
|
||
:key="ite.detailValue" duration="3000"></animate-number>
|
||
{{ ite.detailValue2 }}
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</transition>
|
||
|
||
<!-- 地图左下图例 -->
|
||
<div v-if="mapTypeFlag==true" class="mapTuLi">
|
||
<div class="scdlist" @click="switchIcon('livestock')">
|
||
<img src="@/assets/image/icon-blue.png" class="xcdimg" alt="">
|
||
<span class="scdlist_tit">畜禽污染监测站</span>
|
||
</div>
|
||
<div class="scdlist" @click="switchIcon('orient')">
|
||
<img src="@/assets/image/icon-yellow.png" class="xcdimg" alt="">
|
||
<span class="scdlist_tit">农田污染监测站</span>
|
||
</div>
|
||
<div class="scdlist" @click="switchIcon('watershed')">
|
||
<img src="@/assets/image/waterlive.png" class="xcdimg" alt="">
|
||
<span class="scdlist_tit">小流域监测站</span>
|
||
</div>
|
||
<div class="scdlist" @click="switchIcon('soil')">
|
||
<img src="@/assets/image/soil.png" class="xcdimg" alt="">
|
||
<span class="scdlist_tit">长期定位监测站</span>
|
||
</div>
|
||
<div class="scdlist" @click="switchIcon('flowmeter')">
|
||
<img src="@/assets/image/liuliang.png" class="xcdimg" alt="">
|
||
<span class="scdlist_tit">微功率雷达监测</span>
|
||
</div>
|
||
<div class="scdlist" @click="switchIcon('vehicle')">
|
||
<img src="@/assets/image/vehicle.png" class="xcdimg" alt="">
|
||
<span class="scdlist_tit">危废车辆信息</span>
|
||
</div>
|
||
</div>
|
||
|
||
<transition enter-active-class="animate__animated animate__backInUp"
|
||
leave-active-class="animate__animated animate__backOutDown">
|
||
<template v-if="mapTypeFlag">
|
||
<div class="zlxg_btm">
|
||
<img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
|
||
<img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
|
||
<img src="@/assets/image/kuang_zuoxia.png" class="in2con_zzx" alt="">
|
||
<img src="@/assets/image/kuang_youxia.png" class="in2con_zyx" alt="">
|
||
<img src="@/assets/image/sanguang.png" class="sanguang2" alt="">
|
||
<img src="@/assets/image/sanguang.png" class="sanguangbt2" alt="">
|
||
<div v-loading="tabsLoading" element-loading-text=" "
|
||
element-loading-background="rgba(0, 0, 0, 0.8)">
|
||
<span class="zywr_titshow">治理效果分析</span>
|
||
<el-tooltip class="item" effect="dark"
|
||
:content="dataTypeEchart?'监测值为正常历史监测数据。':'对比值为下游监测站数据减去上游监测站数据。'"
|
||
placement="top-start">
|
||
</el-tooltip>
|
||
<el-select class="dataTypeEchart2" v-model="dateType" placeholder="请选择" @change="changeDateType">
|
||
<el-option
|
||
v-for="item in dateTypeOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
<el-tabs type="card" @tab-click="doGetIndexSummry" v-show="dataTypeEchart">
|
||
<el-tab-pane v-for="(item,index) in stationInfoList" :label="item.stationShortName?item.stationShortName:item.stationName" lazy>
|
||
<template>
|
||
<div :id="`myChartDiv${index}`" style="height:12vw;width:100%;"></div>
|
||
</template>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<el-tabs type="card" @tab-click="doGetIndexSummry" v-show="!dataTypeEchart">
|
||
<el-tab-pane v-for="(item,index) in riverList" :label="(item.stationShortName?item.stationShortName:item.stationName).split('-')[0]" lazy>
|
||
<template>
|
||
<div :id="`myChartDiv2${index}`" style="height:12vw;width:100%;"></div>
|
||
</template>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</transition>
|
||
|
||
<!-- 右侧展示栏 -->
|
||
<transition enter-active-class="animate__animated animate__backInRight"
|
||
leave-active-class="animate__animated animate__backOutRight">
|
||
<template v-if="mapTypeFlag">
|
||
<div class="leftBox right baseBoxHjleft" style="width:22.5%;overflow: hidden;">
|
||
<img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
|
||
<img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
|
||
<img src="@/assets/image/kuang_zuoxia.png" class="in2con_zzx" alt="">
|
||
<img src="@/assets/image/kuang_youxia.png" class="in2con_zyx" alt="">
|
||
<img src="@/assets/image/sanguang.png" class="sanguang" alt="">
|
||
<img src="@/assets/image/sanguang.png" class="sanguangbt" alt="">
|
||
<div>
|
||
<div class="home_dlhj">
|
||
<span class="in1con_lf_titshow12" >监测指标统计</span>
|
||
<el-carousel :autoplay="false" indicator-position="none" arrow="always" height="320px">
|
||
<el-carousel-item v-for="item in stationInfoList" :key="item.id">
|
||
<div class="in1con_lf_tit " >
|
||
<span class="in1con_lf_titshow1 in1con_lf_titshow13" style="cursor: pointer"
|
||
@click="jumpStationPage(item)">{{ item.stationName }}</span>
|
||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||
</div>
|
||
<div class="jczcov">
|
||
<viewer :images="item.deviceList" v-for="value in item.deviceList" :key="value.id">
|
||
<div class="jczcov_lf" v-for="(imglist,index) in item.stationPic" :key="index">
|
||
<img :src="urlimg+imglist" class="jczimg" alt="">
|
||
</div>
|
||
</viewer>
|
||
</div>
|
||
<div class="jczbtm" @click="showEchartDialog($event, 1)" >
|
||
<vue-seamless-scroll :data="item.wrwcode" class="wp-1 hp-1" :class-option="classWrwcod">
|
||
<div class="jczbtm_lf" v-for="(valist,index) in item.wrwcode" :key="valist.index"
|
||
:data-item="JSON.stringify(item)" :data-survItem="valist.tylename" >
|
||
<img :src="urlimg + valist.icon" class="tpimg" alt="">
|
||
<div class="jczbtm_lf_rt">
|
||
<span class="jczbtm_lf_rttit">{{ valist.name }}</span>
|
||
<span class="jczbtm_lf_rtnum">
|
||
<span class="in1con_lf_imglf_num_jix">{{valist.code?parseFloat((valist.code-0).toFixed(2)):'--'}}</span>
|
||
{{ valist.unit }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</vue-seamless-scroll>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
</div>
|
||
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
|
||
<div>
|
||
<div class="in1con_lf_tit " style="cursor: pointer;" @click="taizhangDialogShowFlag=true">
|
||
<span class="in1con_lf_titshow1">核算与评估</span>
|
||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||
</div>
|
||
<div class="mywrcov">
|
||
<div class="mywrcov_one mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterTp')">
|
||
<span class="mywrcov_onetit">{{ effect_assess0.detailCode }}</span>
|
||
<span class="mywrcov_onenum">
|
||
<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess0.detailValue }}</span>
|
||
</span>
|
||
</div>
|
||
<div class="mywrcov_two mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterTn')">
|
||
<span class="mywrcov_onetit">{{ effect_assess1.detailCode }}</span>
|
||
<span class="mywrcov_onenum">
|
||
<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess1.detailValue }}</span>
|
||
</span>
|
||
</div>
|
||
<div class="mywrcov_three mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterCod')">
|
||
<span class="mywrcov_onenum" style="margin-top: 1vw;">
|
||
<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess2.detailValue }}</span>
|
||
</span>
|
||
<span class="mywrcov_onetit">{{ effect_assess2.detailCode }}</span>
|
||
</div>
|
||
<div class="mywrcov_four mywrcov_onehover" @click="taizhangDialogShowFlag=true">
|
||
<span class="mywrcov_onenum" style="margin-top: 1vw; cursor: pointer">
|
||
<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess3.detailValue }}</span>
|
||
</span>
|
||
<span class="mywrcov_onetit">{{ effect_assess3.detailCode }}</span>
|
||
</div>
|
||
<div class="mywrcovcen">
|
||
<span class="mywrcovcen_tit" v-if="effect_assess4.detailValue=='成功'">优</span>
|
||
<span class="mywrcovcen_tit" v-else>{{ effect_assess4.detailValue }}</span>
|
||
<span class="mywrcovcen_con">{{ effect_assess4.detailCode }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
|
||
<div>
|
||
<div class="in1con_lf_tit ">
|
||
<span class="in1con_lf_titshow1">实时数据展示</span>
|
||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||
</div>
|
||
<div style="height:280px;overflow: hidden" @click="showEchartDialog($event, 1)">
|
||
<vue-seamless-scroll :data="listData" class="wp-1 hp-1" :class-option="classOption" :step="1">
|
||
<div class="jcsssj" v-for="(item, index) in listData" :key="index" :data-item="JSON.stringify(item)" :data-survItem="item.survItem" >
|
||
<img src="@/assets/image/xian.png" class="jcsssj_xian" alt="">
|
||
<div class="jcsssj_rt">
|
||
<div style="float: left;width: 70%;">
|
||
<span class="jcsssj_rt_tit">{{ item.stationName?item.stationName:item.deployRemark?item.deployRemark:'土壤监测站' }}</span>
|
||
<span class="jcsssj_rtbiao" :style="{background:(item.color)}">{{ item.name }}</span>
|
||
<span class="jcsssj_rt_numsy">
|
||
<animate-number class="in1con_lf_imglf_num_jix" ref="myNum" from="0" :to="Number(item.value)"
|
||
:key="item.value" duration="3000" :formatter="formatter"></animate-number>
|
||
{{ item.unit }}
|
||
</span>
|
||
</div>
|
||
<span class="jcsssj_rt_time">{{ item.dataDateTime?item.dataDateTime.substring(0,16):'--' }}</span>
|
||
</div>
|
||
</div>
|
||
</vue-seamless-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</transition>
|
||
</div>
|
||
|
||
<!-- 监测站弹窗 -->
|
||
<el-dialog :visible.sync="qcdtdialogTableVisible">
|
||
<div class="jctc" id="modal1123123">
|
||
<div class="in1con_lf_tit ">
|
||
<img src="@/assets/image/tctiimg.png" class="tctiimg" alt="">
|
||
<span class="in1con_lf_titshow">{{ qcdtinfor.stationName }}</span>
|
||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||
</div>
|
||
<div class="jctcvban1">
|
||
<img src="@/assets/image/jctctiao.png" class="jctctiao" alt="">
|
||
</div>
|
||
<div class="jctc_add">
|
||
<img src="@/assets/image/jctcicon1.png" class="jctcicon1" alt="">
|
||
<span class="jctcvban_tit">站点位置：{{ qcdtinfor.stationLocation }}</span>
|
||
</div>
|
||
<div class="jctc_add">
|
||
<img src="@/assets/image/jctcicon2.png" class="jctcicon1" alt="">
|
||
<span class="jctcvban_tit">建站时间：{{ qcdtinfor.buildTime }}</span>
|
||
</div>
|
||
<div class="jctc_add">
|
||
<img src="@/assets/image/jctcicon3.png" class="jctcicon1" alt="">
|
||
<span class="jctcvban_tit">设备数量：<span style="color: #f1ff0d;">{{ qcdtinfor.deviceCount }}</span> </span>
|
||
</div>
|
||
<div class="jctc_add">
|
||
<img src="@/assets/image/jctcicon3.png" class="jctcicon1" alt="">
|
||
<span class="jctcvban_tit">运行状态：<span style="color: #f1ff0d;">正常</span> </span>
|
||
</div>
|
||
<div class="jctc_add">
|
||
<img src="@/assets/image/jctcicon4.png" class="jctcicon1" alt="">
|
||
<span class="jctcvban_tit">监测指标</span>
|
||
</div>
|
||
<div style="margin-left: 3%;">
|
||
<span class="jctc_text" v-for="(item,index) in qcdtinfor.survColorItems" :key="index"
|
||
:style="{background:(item.color)}">{{ item.name }}</span>
|
||
</div>
|
||
<img src="@/assets/image/ljjr.png" class="ljjr" @click="jumpStationPage(qcdtinfor)" alt="">
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 企业弹窗 -->
|
||
<el-dialog :visible.sync="qyinfordtdialogTableVisible">
|
||
<div class="tz_cov" style="height:25vw;">
|
||
<img src="@/assets/image/guanbi.png" class="guanbiann" @click="qcguanbi" alt="">
|
||
<div class="tz_cov_top">
|
||
<span class="tz_cov_top_tit">企业简介</span>
|
||
</div>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<div class="grid-content bg-purple" style="width:80%;margin-left:10%;">
|
||
<el-carousel indicator-position="outside">
|
||
<el-carousel-item v-for="(item,index) in qyinformation.extPics" :key="index">
|
||
<viewer :images="qyinformation.extPics">
|
||
<img :src="urlimg + item" alt="" style="width:100%;height:100%;">
|
||
</viewer>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="grid-content bg-purple-light">
|
||
<span class="tctit">{{ qyinformation.name }}</span>
|
||
<span class="tcgldw">{{ qyinformation.notes }}</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 危废车辆菜单 - 自定义点击伸缩 -->
|
||
<div class="vehicle-dropdown-wrapper">
|
||
<div class="vehicle-dropdown-btn-dark" @click.stop="toggleVehicleDropdown">
|
||
<span>危废车辆 ({{ vehicleList.length }})</span>
|
||
<i :class="isVehicleDropdownOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" class="el-icon--right"></i>
|
||
</div>
|
||
|
||
<div v-show="isVehicleDropdownOpen" class="vehicle-dropdown-menu-dark">
|
||
<!-- 全部点位选项 -->
|
||
<div class="vehicle-dropdown-item-dark" @click="showAllVehiclePoints">
|
||
<span class="vehicle-dot-dark all-dot">●</span>
|
||
<span style="flex:1; color: #FFD700;">📍 全部点位</span>
|
||
<span style="font-size:12px;color:#4a8ba8;">({{ vehicleList.length }})</span>
|
||
</div>
|
||
|
||
<!-- 关闭点位选项 -->
|
||
<div class="vehicle-dropdown-item-dark" @click="hideAllVehiclePoints">
|
||
<span class="vehicle-dot-dark close-dot">●</span>
|
||
<span style="flex:1; color: #ff6b6b;">✕ 关闭点位</span>
|
||
</div>
|
||
|
||
<div class="vehicle-dropdown-divider"></div>
|
||
|
||
<!-- 车辆列表 -->
|
||
<div
|
||
v-for="(item, index) in vehicleList"
|
||
:key="index"
|
||
class="vehicle-dropdown-item-dark"
|
||
@click="handleVehicleSelect(item)"
|
||
>
|
||
<span class="vehicle-dot-dark">●</span>
|
||
<span style="flex:1;">{{ item.veNotes || '未知车辆' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<SoilDialog v-if="soidShowFlag" :soilDataId="soilDataId" @close="soidShowFlag=false"/>
|
||
<LiulDialog v-if="liulShowFlag" :liulDataId="liulDataId" @close="liulShowFlag=false"/>
|
||
<SingleEchartDialog v-if="singleEchartDialogShowFlag" :item="singleEchartData" @close="singleEchartDialogShowFlag=false"/>
|
||
<TaizhangDialog v-if="taizhangDialogShowFlag" :resourcedirect="resourcedirect" @close="taizhangDialogShowFlag=false"/>
|
||
<!-- 轨迹弹窗组件 -->
|
||
<zhnjCov
|
||
ref="trajectoryComponent"
|
||
:vehicle-data="selectedVehicle"
|
||
:visible.sync="trajectoryDialogVisible"
|
||
@close="trajectoryDialogVisible = false"
|
||
/>
|
||
</ScaleBox>
|
||
</template>
|
||
|
||
<script>
|
||
import ScaleBox from 'vue2-scale-box'
|
||
import {
|
||
displayInfo,
|
||
getAllstationAndPestLight,
|
||
getIndexSummry,
|
||
getNewestData,
|
||
getPollutionDict,
|
||
stationInfo,
|
||
vehicleList,
|
||
gpsRecordPage,
|
||
} from '@/api';
|
||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||
import hefentianqi from '@/pages/weather/weather.vue'
|
||
import SoilDialog from '@/components/SoilDialog.vue'
|
||
import LiulDialog from '@/components/LiulDialog.vue'
|
||
import zhnjCov from '@/components/zhnjCov.vue';
|
||
import {_colors} from '@/utils/color.js'
|
||
import SingleEchartDialog from "@/components/SingleEchartDialog.vue";
|
||
import TaizhangDialog from "@/components/TaizhangDialog.vue";
|
||
|
||
export default {
|
||
name: 'mainHome',
|
||
components: {
|
||
TaizhangDialog,
|
||
SingleEchartDialog,
|
||
vueSeamlessScroll,
|
||
hefentianqi,
|
||
ScaleBox,
|
||
SoilDialog,
|
||
LiulDialog,
|
||
zhnjCov,
|
||
},
|
||
data() {
|
||
return {
|
||
taizhangDialogShowFlag: false,
|
||
singleEchartDialogShowFlag: false,
|
||
singleEchartData: null,
|
||
aMap: null,
|
||
dataTypeEchart: true,
|
||
markersOrient: [],
|
||
markersSoil: [],
|
||
markersOther: [],
|
||
markersFlowmeter: [],
|
||
markersVehicle: [],
|
||
vehicleMarkerMap: new Map(), // 存储车辆id和marker的映射
|
||
lastClickIcon: '',
|
||
urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
|
||
mapTypeFlag: true,
|
||
nowTime: '',
|
||
briefconCode: "",
|
||
briefconValue: [],
|
||
climate_env: [],
|
||
water_conser: [],
|
||
roll_info: [],
|
||
stationInfoList: [],
|
||
wrwcode: [],
|
||
getPollutionDictCover: [],
|
||
effect_assess0: '',
|
||
effect_assess0Value: 0,
|
||
effect_assess1: '',
|
||
effect_assess2: '',
|
||
effect_assess3: '',
|
||
effect_assess4: '',
|
||
pestLightCount: 0,
|
||
stationCount0: 0,
|
||
stationCount1: 0,
|
||
dialogTableVisible: false,
|
||
qcdialogTableVisible: false,
|
||
qcdtdialogTableVisible: false,
|
||
qyinfordtdialogTableVisible: false,
|
||
shipdialogTableVisible: false,
|
||
qyinformation: '',
|
||
listData: [],
|
||
summryAllData: null,
|
||
echartInit: {},
|
||
riverList: [],
|
||
qcdtinfor: '',
|
||
resourcedirect: [],
|
||
dialogVisible: false,
|
||
inforname: '',
|
||
loading: true,
|
||
zoomData: 14,
|
||
isShowLightNumber: '1',
|
||
switchValue: true,
|
||
fullscreen: false,
|
||
echartIndex: 0,
|
||
dateType: 'monthDays',
|
||
dateTypeOptions: [{
|
||
value: 'dayhours',
|
||
label: '24小时'
|
||
}, {
|
||
value: 'monthDays',
|
||
label: '30天'
|
||
}, {
|
||
value: 'yearMonth',
|
||
label: '12个月'
|
||
}],
|
||
soidShowFlag: false,
|
||
liulShowFlag:false,
|
||
soilDataId: '',
|
||
liulDataId:'',
|
||
tabsLoading: false,
|
||
lastZIndex: 1,
|
||
vehicleList: [],
|
||
// 车辆位置相关
|
||
vehicleMarkers: [],
|
||
currentVehicleInfo: null,
|
||
vehicleLocationMarker: null,
|
||
vehicleInfoWindow: null,
|
||
// 轨迹弹窗相关
|
||
selectedVehicle: null,
|
||
trajectoryDialogVisible: false,
|
||
// 下拉菜单控制
|
||
isVehicleDropdownOpen: false,
|
||
};
|
||
},
|
||
created() {
|
||
},
|
||
|
||
computed: {
|
||
classOption() {
|
||
return {
|
||
step: 0.6,
|
||
limitMoveNum: 3,
|
||
hoverStop: true,
|
||
direction: 1,
|
||
openWatch: true,
|
||
singleHeight: 0,
|
||
singleWidth: 0,
|
||
waitTime: 1000,
|
||
};
|
||
},
|
||
classWrwcod() {
|
||
return {
|
||
step: 0.2,
|
||
limitMoveNum: 6,
|
||
hoverStop: true,
|
||
direction: 1,
|
||
openWatch: true,
|
||
singleHeight: 0,
|
||
singleWidth: 0,
|
||
waitTime: 1000,
|
||
};
|
||
},
|
||
showOption() {
|
||
return {
|
||
step: 0.5,
|
||
limitMoveNum: 0,
|
||
hoverStop: true,
|
||
direction: 1,
|
||
openWatch: true,
|
||
singleHeight: 0,
|
||
singleWidth: 0,
|
||
waitTime: 1000,
|
||
};
|
||
},
|
||
},
|
||
mounted() {
|
||
setTimeout(() => {
|
||
this.$nextTick(() => {
|
||
this.initMap(this.zoomData, this.isShowLightNumber);
|
||
})
|
||
}, 2000)
|
||
this.getNowTime();
|
||
this.indexleft();
|
||
this.getNewestDataList();
|
||
this.getPollutionDictList();
|
||
this.infor();
|
||
this.indexinfor();
|
||
this.doGetIndexSummry({index: this.echartIndex});
|
||
this.vehicleListData();
|
||
},
|
||
methods: {
|
||
// ==================== 危废车辆下拉菜单方法 ====================
|
||
|
||
// 切换下拉菜单
|
||
toggleVehicleDropdown() {
|
||
this.isVehicleDropdownOpen = !this.isVehicleDropdownOpen;
|
||
},
|
||
|
||
// 显示全部点位 - 使用veLat和veLong
|
||
showAllVehiclePoints() {
|
||
// 先清除之前的所有车辆标记
|
||
this.markersVehicle.forEach(marker => {
|
||
marker.setMap(null);
|
||
});
|
||
this.markersVehicle = [];
|
||
this.vehicleMarkerMap.clear();
|
||
|
||
// 重新从vehicleList添加所有车辆点位
|
||
let addedCount = 0;
|
||
this.vehicleList.forEach(item => {
|
||
const lat = parseFloat(item.veLat);
|
||
const lng = parseFloat(item.veLong);
|
||
|
||
if (!isNaN(lat) && !isNaN(lng) && lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
|
||
const marker = new AMap.Marker({
|
||
position: [lng, lat],
|
||
icon: new AMap.Icon({
|
||
size: new AMap.Size(30, 42),
|
||
image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
|
||
imageSize: new AMap.Size(30, 42)
|
||
}),
|
||
offset: new AMap.Pixel(-15, -42),
|
||
zIndex: 1002,
|
||
extData: { vehicleInfo: item }
|
||
});
|
||
|
||
// 点击标记弹出信息窗口
|
||
marker.on('click', (e) => {
|
||
const data = e.target.getExtData();
|
||
if (data && data.vehicleInfo) {
|
||
// 先获取车辆位置点
|
||
const point = {
|
||
jingdu: data.vehicleInfo.veLong,
|
||
weidu: data.vehicleInfo.veLat,
|
||
createTime: data.vehicleInfo.updateTime || new Date().toISOString()
|
||
};
|
||
this.showVehicleInfoWindow(point, data.vehicleInfo);
|
||
}
|
||
});
|
||
|
||
marker.setMap(this.aMap);
|
||
this.markersVehicle.push(marker);
|
||
this.vehicleMarkerMap.set(item.id, marker);
|
||
addedCount++;
|
||
}
|
||
});
|
||
|
||
if (addedCount > 0) {
|
||
this.aMap.setFitView(this.markersVehicle, false, [200, 500, 360, 360], 16);
|
||
this.$message.success(`显示全部 ${addedCount} 个危废车辆点位`);
|
||
} else {
|
||
this.$message.warning('暂无有效的危废车辆点位数据');
|
||
}
|
||
this.isVehicleDropdownOpen = false;
|
||
},
|
||
|
||
// 关闭点位显示
|
||
hideAllVehiclePoints() {
|
||
this.markersVehicle.forEach(marker => {
|
||
marker.setMap(null);
|
||
});
|
||
this.markersVehicle = [];
|
||
this.vehicleMarkerMap.clear();
|
||
// 同时清除车辆位置标记
|
||
this.clearVehicleMarker();
|
||
this.$message.info('已关闭危废车辆点位显示');
|
||
this.isVehicleDropdownOpen = false;
|
||
},
|
||
|
||
// ==================== 危废车辆位置相关方法 ====================
|
||
|
||
// 危化车辆点击 - 从下拉列表选择
|
||
handleVehicleSelect(item) {
|
||
this.currentVehicleInfo = item;
|
||
|
||
// 清除之前的标记
|
||
this.clearVehicleMarker();
|
||
|
||
const vehicleName = item.vePlate || item.plateNumber || '车辆';
|
||
|
||
// 如果有经纬度直接定位
|
||
if (item.veLat && item.veLong) {
|
||
const lat = parseFloat(item.veLat);
|
||
const lng = parseFloat(item.veLong);
|
||
if (!isNaN(lat) && !isNaN(lng)) {
|
||
const point = {
|
||
jingdu: item.veLong,
|
||
weidu: item.veLat,
|
||
createTime: item.updateTime || new Date().toISOString()
|
||
};
|
||
this.locateToVehicle(point, item);
|
||
this.$message({
|
||
message: `定位到 ${vehicleName}`,
|
||
type: 'success'
|
||
});
|
||
this.isVehicleDropdownOpen = false;
|
||
return;
|
||
}
|
||
}
|
||
|
||
// 如果没有经纬度，尝试通过gpsRecordPage获取
|
||
if (item.gpsId) {
|
||
gpsRecordPage({
|
||
pageNo: 1,
|
||
pageSize: 1000,
|
||
gpsId: item.gpsId,
|
||
}).then(res => {
|
||
if (res.result && res.result.records && res.result.records.length > 0) {
|
||
let trackData = res.result.records;
|
||
|
||
trackData = trackData.filter(record => {
|
||
const lng = parseFloat(record.jingdu || record.longitude || record.lng || record.lon);
|
||
const lat = parseFloat(record.weidu || record.latitude || record.lat);
|
||
return !isNaN(lng) && !isNaN(lat) &&
|
||
lng >= -180 && lng <= 180 &&
|
||
lat >= -90 && lat <= 90;
|
||
});
|
||
|
||
if (trackData.length === 0) {
|
||
this.$message.warning(`${vehicleName} 的位置数据无效，请检查数据`);
|
||
return;
|
||
}
|
||
|
||
trackData.sort((a, b) => {
|
||
const timeA = a.createTime || a.server_time || a.updateTime || 0;
|
||
const timeB = b.createTime || b.server_time || b.updateTime || 0;
|
||
return new Date(timeA) - new Date(timeB);
|
||
});
|
||
|
||
const latestPoint = trackData[trackData.length - 1];
|
||
this.locateToVehicle(latestPoint, item);
|
||
|
||
this.$message({
|
||
message: `成功加载 ${vehicleName} 的最新位置`,
|
||
type: 'success'
|
||
});
|
||
} else {
|
||
this.$message({
|
||
message: `${vehicleName} 暂无位置数据`,
|
||
type: 'warning'
|
||
});
|
||
}
|
||
}).catch(err => {
|
||
console.error('获取位置数据失败:', err);
|
||
this.$message({
|
||
message: '获取位置数据失败，请稍后重试',
|
||
type: 'error'
|
||
});
|
||
});
|
||
} else {
|
||
this.$message.warning(`${vehicleName} 没有GPS设备ID和位置信息`);
|
||
}
|
||
this.isVehicleDropdownOpen = false;
|
||
},
|
||
|
||
// 定位到车辆位置
|
||
locateToVehicle(point, vehicleInfo) {
|
||
if (!this.aMap) {
|
||
console.error('地图未初始化');
|
||
return;
|
||
}
|
||
|
||
const lng = parseFloat(point.jingdu || point.longitude || point.lng || point.lon);
|
||
const lat = parseFloat(point.weidu || point.latitude || point.lat);
|
||
|
||
if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
|
||
console.error('无效的经纬度:', lng, lat);
|
||
this.$message.warning('车辆位置数据无效');
|
||
return;
|
||
}
|
||
|
||
this.addVehicleLocationMarker(lng, lat, point, vehicleInfo);
|
||
|
||
this.aMap.panTo([lng, lat]);
|
||
setTimeout(() => {
|
||
this.aMap.setZoomAndCenter(16, [lng, lat]);
|
||
}, 300);
|
||
|
||
console.log(`定位到车辆位置: ${lng}, ${lat}`);
|
||
},
|
||
|
||
// 添加车辆位置标记
|
||
addVehicleLocationMarker(lng, lat, point, vehicleInfo) {
|
||
if (isNaN(lng) || isNaN(lat)) {
|
||
console.error('无效的经纬度:', lng, lat);
|
||
return;
|
||
}
|
||
|
||
this.removeLocationMarker();
|
||
this.closeVehicleInfoWindow();
|
||
|
||
const locationMarker = new AMap.Marker({
|
||
position: [lng, lat],
|
||
icon: new AMap.Icon({
|
||
size: new AMap.Size(30, 42),
|
||
image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
|
||
imageSize: new AMap.Size(30, 42)
|
||
}),
|
||
offset: new AMap.Pixel(-15, -42),
|
||
zIndex: 1002,
|
||
extData: { point: point, vehicleInfo: vehicleInfo }
|
||
});
|
||
|
||
locationMarker.on('click', (e) => {
|
||
const data = e.target.getExtData();
|
||
this.showVehicleInfoWindow(data.point, data.vehicleInfo);
|
||
});
|
||
|
||
locationMarker.setMap(this.aMap);
|
||
this.vehicleLocationMarker = locationMarker;
|
||
this.vehicleMarkers.push(locationMarker);
|
||
},
|
||
|
||
// 显示车辆信息窗口
|
||
showVehicleInfoWindow(point, vehicleInfo) {
|
||
this.closeVehicleInfoWindow();
|
||
|
||
const lng = parseFloat(point.jingdu || point.longitude || point.lng || point.lon);
|
||
const lat = parseFloat(point.weidu || point.latitude || point.lat);
|
||
|
||
const vehicleName = vehicleInfo.veNotes || vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆';
|
||
|
||
const infoContent = `
|
||
<div style="
|
||
padding: 16px 20px;
|
||
max-width: 360px;
|
||
min-width: 250px;
|
||
background: rgba(0, 20, 40, 0.95) !important;
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(0, 212, 255, 0.3);
|
||
box-shadow: 0 0 40px rgba(0, 212, 255, 0.15);
|
||
backdrop-filter: blur(10px);
|
||
color: #8bb4d0;
|
||
cursor: pointer;
|
||
" class="vehicle-info-window">
|
||
<div style="display: flex; align-items: center; margin-bottom: 12px; border-bottom: 1px solid rgba(0, 212, 255, 0.15); padding-bottom: 10px;">
|
||
<span style="font-size: 28px; margin-right: 12px;">🚛</span>
|
||
<span style="font-size: 18px; font-weight: bold; color: #FFD700;">${vehicleName}</span>
|
||
</div>
|
||
<div style="font-size: 13px; line-height: 2.2;">
|
||
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
|
||
<span style="color: #4a8ba8;">设备ID：</span>
|
||
<span style="font-weight: 500; color: #ffffff;">${vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '--'}</span>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
|
||
<span style="color: #4a8ba8;">车牌号：</span>
|
||
<span style="font-weight: 500; color: #ffffff;">${vehicleInfo.vePlate || vehicleInfo.plateNumber || '--'}</span>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
|
||
<span style="color: #4a8ba8;">最新时间：</span>
|
||
<span style="font-weight: 500; color: #ffffff;">${point.createTime || point.server_time || point.updateTime || '--'}</span>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
|
||
<span style="color: #4a8ba8;">经度：</span>
|
||
<span style="font-weight: 500; color: #00d4ff;">${lng.toFixed(6)}</span>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between; padding: 3px 0;">
|
||
<span style="color: #4a8ba8;">纬度：</span>
|
||
<span style="font-weight: 500; color: #00d4ff;">${lat.toFixed(6)}</span>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top: 10px; text-align: center; font-size: 12px; color: #00d4ff; border-top: 1px solid rgba(0, 212, 255, 0.1); padding-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px;">
|
||
<span>📍 点击查看车辆轨迹</span>
|
||
<span style="font-size: 16px;">→</span>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
this.vehicleInfoWindow = new AMap.InfoWindow({
|
||
content: infoContent,
|
||
offset: new AMap.Pixel(0, -35),
|
||
autoMove: true,
|
||
closeWhenClickMap: true,
|
||
isCustom: true,
|
||
});
|
||
|
||
if (!isNaN(lng) && !isNaN(lat)) {
|
||
this.vehicleInfoWindow.open(this.aMap, [lng, lat]);
|
||
this.vehicleMarkers.push(this.vehicleInfoWindow);
|
||
|
||
setTimeout(() => {
|
||
const infoWindowEl = document.querySelector('.vehicle-info-window');
|
||
if (infoWindowEl) {
|
||
infoWindowEl.addEventListener('click', (e) => {
|
||
if (e.target.closest('.vehicle-info-window')) {
|
||
// 获取车辆GPS数据
|
||
this.getVehicleGpsData(vehicleInfo);
|
||
}
|
||
});
|
||
}
|
||
|
||
const infoWindowContent = document.querySelector('.amap-info-content');
|
||
if (infoWindowContent) {
|
||
infoWindowContent.style.background = 'transparent !important';
|
||
infoWindowContent.style.padding = '0 !important';
|
||
}
|
||
}, 50);
|
||
}
|
||
},
|
||
|
||
// 获取车辆GPS数据并打开轨迹
|
||
getVehicleGpsData(vehicleInfo) {
|
||
if (!vehicleInfo.gpsId) {
|
||
this.$message.warning('该车辆没有GPS设备ID');
|
||
return;
|
||
}
|
||
|
||
// 构建车辆数据
|
||
const vehicleData = {
|
||
gpsId: vehicleInfo.gpsId,
|
||
veNotes: vehicleInfo.veNotes || vehicleInfo.vePlate || '车辆',
|
||
vePlate: vehicleInfo.vePlate || vehicleInfo.plateNumber || '--',
|
||
veDriver: vehicleInfo.veDriver || vehicleInfo.driverName || '--',
|
||
vehicleName: vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆',
|
||
deviceId: vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '',
|
||
};
|
||
|
||
this.closeVehicleInfoWindow();
|
||
this.qcdtdialogTableVisible = false;
|
||
|
||
this.selectedVehicle = vehicleData;
|
||
this.trajectoryDialogVisible = true;
|
||
},
|
||
|
||
// 打开轨迹弹窗
|
||
openTrajectoryDialog(vehicleInfo, point) {
|
||
const vehicleData = {
|
||
gpsId: vehicleInfo.gpsId || vehicleInfo.gpsDeviceId,
|
||
veNotes: vehicleInfo.veNotes || vehicleInfo.vePlate || '车辆',
|
||
vePlate: vehicleInfo.vePlate || vehicleInfo.plateNumber || '--',
|
||
veDriver: vehicleInfo.veDriver || vehicleInfo.driverName || '--',
|
||
vehicleName: vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆',
|
||
deviceId: vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '',
|
||
latitude: point.weidu || point.latitude || point.lat || 0,
|
||
longitude: point.jingdu || point.longitude || point.lng || point.lon || 0
|
||
};
|
||
|
||
this.closeVehicleInfoWindow();
|
||
this.qcdtdialogTableVisible = false;
|
||
|
||
this.selectedVehicle = vehicleData;
|
||
this.trajectoryDialogVisible = true;
|
||
|
||
console.log('打开轨迹弹窗，车辆数据:', vehicleData);
|
||
},
|
||
|
||
// 关闭信息窗口
|
||
closeVehicleInfoWindow() {
|
||
if (this.vehicleInfoWindow) {
|
||
this.vehicleInfoWindow.close();
|
||
this.vehicleInfoWindow = null;
|
||
}
|
||
},
|
||
|
||
// 移除位置标记
|
||
removeLocationMarker() {
|
||
if (this.vehicleLocationMarker) {
|
||
this.vehicleLocationMarker.setMap(null);
|
||
this.vehicleLocationMarker = null;
|
||
}
|
||
},
|
||
|
||
// 清除车辆标记
|
||
clearVehicleMarker() {
|
||
this.vehicleMarkers.forEach(marker => {
|
||
if (marker.setMap) {
|
||
marker.setMap(null);
|
||
} else if (marker.close) {
|
||
marker.close();
|
||
}
|
||
});
|
||
this.vehicleMarkers = [];
|
||
|
||
this.removeLocationMarker();
|
||
this.closeVehicleInfoWindow();
|
||
},
|
||
|
||
// 危化车辆列表
|
||
vehicleListData() {
|
||
vehicleList({
|
||
pageNo: 1,
|
||
pageSize: 100,
|
||
}).then(res => {
|
||
if (res.code === 200 && res.result) {
|
||
this.vehicleList = res.result.records || [];
|
||
// 默认显示全部点位
|
||
this.$nextTick(() => {
|
||
this.showAllVehiclePoints();
|
||
});
|
||
} else {
|
||
this.vehicleList = [];
|
||
}
|
||
}).catch(err => {
|
||
this.vehicleList = [];
|
||
});
|
||
},
|
||
|
||
formatter: function (num) {
|
||
return num.toFixed(3)
|
||
},
|
||
sbdscdBtn() {
|
||
var url = 'https://wlw.zklsfk.com/admin/index?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiLmsrPmtKXluILlhpzkuJrlhpzmnZHlsYAiLCJleHAiOjE2ODk2MjU0ODUsImlhdCI6MTY4ODEzMDI1NiwianRpIjoiNTcxMTY5MTAtODczZC00ZjI1LWFkNzItZjA2NWU3NmFkNDIwIn0.52iF21xidGFllgfcsSgN-cLlysI0W7Ad8ie48LsV9x4'
|
||
window.open(url, "_blank");
|
||
},
|
||
mapTypeSwitch() {
|
||
this.mapTypeFlag = !this.mapTypeFlag
|
||
if (this.mapTypeFlag == true) {
|
||
this.zoomData = 14
|
||
if (this.isShowLight == undefined) {
|
||
let isShowLight = '1'
|
||
this.initMap(this.zoomData, isShowLight);
|
||
} else {
|
||
let isShowLight = this.isShowLight
|
||
this.initMap(this.zoomData, isShowLight);
|
||
}
|
||
setTimeout(() => {
|
||
this.$nextTick(() => {
|
||
this.doGetIndexSummry({index: 0});
|
||
})
|
||
}, 1000)
|
||
} else {
|
||
this.zoomData = 15
|
||
if (this.isShowLight == undefined) {
|
||
this.initMap(this.zoomData, '1');
|
||
} else {
|
||
this.initMap(this.zoomData, this.isShowLight);
|
||
}
|
||
}
|
||
},
|
||
indexleft() {
|
||
displayInfo().then(res => {
|
||
setTimeout(() => {
|
||
this.loading = false
|
||
}, 1000)
|
||
this.resourcedirect = res.result.resource_direct
|
||
this.briefconCode = res.result.project_brief.detailList[0].detailCode
|
||
this.briefconValue = res.result.project_brief.detailList
|
||
this.pestLightCount = res.result.pestLightCount
|
||
this.stationCount0 = res.result.stationCount[0].stationCount
|
||
this.climate_env = res.result.climate_env.detailList
|
||
this.water_conser = res.result.water_conser.detailList
|
||
this.roll_info = res.result.roll_info
|
||
this.effect_assess0 = res.result.effect_assess.detailList[0]
|
||
this.effect_assess0Value = res.result.effect_assess.detailList[0].detailValue
|
||
this.effect_assess1 = res.result.effect_assess.detailList[1]
|
||
this.effect_assess2 = res.result.effect_assess.detailList[2]
|
||
this.effect_assess3 = res.result.effect_assess.detailList[3]
|
||
this.effect_assess4 = res.result.effect_assess.detailList[4]
|
||
})
|
||
},
|
||
indexinfor() {
|
||
stationInfo().then(res => {
|
||
this.stationInfoList = res.result
|
||
if (this.stationInfoList) {
|
||
for (var i = 0; i < this.stationInfoList.length; i++) {
|
||
let objlist = this.stationInfoList[i].newestData
|
||
this.stationInfoList[i].wrwcode = []
|
||
objlist.map(item => {
|
||
this.stationInfoList[i].wrwcode.push({
|
||
name: item.name,
|
||
icon: item.icon,
|
||
unit: item.unit,
|
||
color: item.color,
|
||
code: item.value,
|
||
tylename: item.survItem
|
||
})
|
||
});
|
||
}
|
||
}
|
||
})
|
||
},
|
||
switchBtn(value) {
|
||
console.log("value++++++++", value)
|
||
if (value == true) {
|
||
let isShowLight = '1'
|
||
this.isShowLight = isShowLight
|
||
this.initMap(this.zoomData, isShowLight)
|
||
} else {
|
||
let isShowLight = ''
|
||
this.isShowLight = isShowLight
|
||
this.initMap(this.zoomData, isShowLight)
|
||
}
|
||
},
|
||
scaleChange(e) {
|
||
console.log("ee", e)
|
||
},
|
||
showEchartDialog(item, survItem) {
|
||
if(survItem === 1){
|
||
let dom = item.target.closest(".jczbtm_lf");
|
||
if(!dom){
|
||
dom = item.target.closest(".jcsssj");
|
||
}
|
||
if (dom) {
|
||
let item2 = dom.dataset.item
|
||
survItem = dom.dataset.survitem
|
||
if(item2){
|
||
item2=JSON.parse(item2)
|
||
}else{
|
||
item2 = null;
|
||
}
|
||
if(item2 && survItem){
|
||
this.showEchartDialog(item2, survItem)
|
||
}
|
||
}
|
||
return;
|
||
}
|
||
this.singleEchartData = {
|
||
stationCode: item.stationCode,
|
||
deployId: item.deployId,
|
||
survItem: survItem
|
||
}
|
||
setTimeout(() => {
|
||
this.singleEchartDialogShowFlag = true;
|
||
}, 200)
|
||
},
|
||
initMap(zoomnum, isShowLight) {
|
||
let that = this;
|
||
getAllstationAndPestLight(isShowLight).then(res => {
|
||
that.aMap = new AMap.Map('container', {
|
||
viewMode: '3D',
|
||
resizeEnable: true,
|
||
zoom: zoomnum,
|
||
center: [112.83100231396601, 36.872032399813556],
|
||
mapStyle: 'amap://styles/blue',
|
||
dragEnable: true,
|
||
jogEnable: true,
|
||
keyboardEnable: true,
|
||
animateEnable: true,
|
||
defaultCursor: 'pointer',
|
||
turboMode: false,
|
||
showBuildingBlock: true,
|
||
showIndoorMap: false,
|
||
expandZoomRange: true,
|
||
forceVector: true,
|
||
scale: (2 , 2.5)
|
||
});
|
||
that.aMap.on('complete', (e) => {
|
||
var markerData = res.result;
|
||
let Marker = markerData.filter(ele => ele.type != 'light').sort((a,b) => {
|
||
if (b.type=='soil') return 1;
|
||
if (b.type!='soil') return -1;
|
||
return 0;
|
||
});
|
||
console.log(Marker,'Marker')
|
||
Marker.map(item => {
|
||
let marker = new AMap.Marker({
|
||
zIndex: item.type == 'soil' ? that.lastZIndex : (that.lastZIndex+1),
|
||
icon: this.urlimg + item.picUrl,
|
||
position: [item.longitude, item.latitude],
|
||
offset: new AMap.Pixel(item.width, item.height),
|
||
title: item.name,
|
||
extData: {
|
||
ids: item.ids,
|
||
extPics: item.extPics,
|
||
notes: item.notes,
|
||
name: item.name,
|
||
item: item,
|
||
stationType: item.type
|
||
}
|
||
});
|
||
if (item.type == 'orient' || item.type == 'livestock' || item.type == 'watershed') {
|
||
marker.on('click', e => {
|
||
let indexnumb = e.target.getExtData().ids.slice(-1);
|
||
this.qcdtinfor = this.stationInfoList[indexnumb]
|
||
this.qcdtdialogTableVisible = true
|
||
})
|
||
this.markersOrient.push(marker)
|
||
} else if(item.type == 'soil'){
|
||
marker.on('click', e => {
|
||
this.soilDataId = e.target.getExtData()
|
||
this.soidShowFlag = true
|
||
})
|
||
this.markersSoil.push(marker);
|
||
} else if(item.type == '10_flowmeter'){
|
||
marker.on('click', e => {
|
||
this.liulDataId = e.target.getExtData()
|
||
this.liulShowFlag = true
|
||
})
|
||
this.markersFlowmeter.push(marker);
|
||
this.markersSoil.push(marker);
|
||
} else {
|
||
this.markersOther.push(marker)
|
||
}
|
||
marker.setMap(that.aMap);
|
||
})
|
||
this.$forceUpdate();
|
||
that.aMap.setFitView();
|
||
setTimeout(() => {
|
||
that.aMap.setFitView(null, false, [130, 380, 480, 480], 16);
|
||
}, 2000)
|
||
});
|
||
})
|
||
},
|
||
getNewestDataList() {
|
||
getNewestData().then(res => {
|
||
let tempArray = [];
|
||
Object.keys(res.result).map(key => {
|
||
console.log(key)
|
||
tempArray = tempArray.concat(res.result[key])
|
||
})
|
||
tempArray.map(item => {
|
||
if(!item.value){item.value = '0';}
|
||
})
|
||
this.listData = tempArray
|
||
console.log(this.listData)
|
||
})
|
||
},
|
||
getPollutionDictList() {
|
||
getPollutionDict().then(res => {
|
||
this.getPollutionDictCover = res.result
|
||
})
|
||
},
|
||
changeDateType() {
|
||
this.summryAllData = null;
|
||
for (let key in this.echartInit) {
|
||
this.echartInit[key].dispose();
|
||
}
|
||
this.echartInit = {};
|
||
this.doGetIndexSummry({index: this.echartIndex});
|
||
},
|
||
switchEchartType() {
|
||
this.dataTypeEchart = (!this.dataTypeEchart);
|
||
this.echartInit = {};
|
||
setTimeout(() => {
|
||
this.doGetIndexSummry({index: 0});
|
||
}, 300);
|
||
},
|
||
doGetIndexSummry(tab, event) {
|
||
this.tabsLoading = true;
|
||
this.echartIndex = tab.index - 0;
|
||
if (this.summryAllData) {
|
||
this.$nextTick(() => {
|
||
this.initEchartData(this.echartIndex)
|
||
})
|
||
} else {
|
||
getIndexSummry({summrayMode: this.dateType}).then(res => {
|
||
if (res.code === 200) {
|
||
this.summryAllData = res.result;
|
||
let len = this.summryAllData.length;
|
||
this.riverList = [];
|
||
setTimeout(() => {
|
||
this.$nextTick(() => {
|
||
this.initEchartData(this.echartIndex)
|
||
})
|
||
}, 1000);
|
||
}
|
||
})
|
||
}
|
||
},
|
||
initEchartData(index, times) {
|
||
this.$nextTick(() => {
|
||
let domKey = `myChartDiv${index}`;
|
||
let data = this.summryAllData[index];
|
||
if (!this.dataTypeEchart) {
|
||
domKey = `myChartDiv2${index}`;
|
||
data = this.riverList[index];
|
||
}
|
||
if (this.echartInit[domKey]) {
|
||
this.echartInit[domKey].dispose()
|
||
}
|
||
let divDom = document.getElementById(domKey);
|
||
if (!divDom) {
|
||
console.log('没找到dom,两秒后重试：', domKey, divDom)
|
||
if(times!==2){
|
||
setTimeout(()=>{this.initEchartData(index,2)}, 1500);
|
||
}
|
||
return;
|
||
}
|
||
console.log('开始初始化echart：')
|
||
let dataObj = [];
|
||
let i = 0;
|
||
for (let key in data['datas']) {
|
||
if (data['datas'][key] instanceof Array) {
|
||
dataObj[i++] = {
|
||
name: key,
|
||
color: _colors[i],
|
||
value: data['datas'][key]
|
||
}
|
||
}
|
||
}
|
||
this.echartInit[domKey] = this.$echarts.init(divDom);
|
||
let legendData = dataObj.map(item => item.name);
|
||
let xAxisData = data['dateStr']
|
||
let seriesData = dataObj.map(item => {
|
||
return {
|
||
name: item.name,
|
||
data: item.value,
|
||
type: 'line',
|
||
stack: '',
|
||
lineStyle: {
|
||
color: item.color
|
||
},
|
||
itemStyle: {
|
||
color: item.color
|
||
},
|
||
smooth: true,
|
||
}
|
||
});
|
||
var optionLine = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
enterable: true,
|
||
confine: true,
|
||
},
|
||
grid: {
|
||
top: '14%',
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '9%',
|
||
containLabel: true
|
||
},
|
||
toolbox: {},
|
||
legend: {
|
||
padding: [10, 50, 0, 0],
|
||
x: 'right',
|
||
y: 'top',
|
||
data: legendData,
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: '#ffffff'
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: xAxisData,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#2295ee',
|
||
width: 1,
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#2295ee'
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#2295ee',
|
||
width: 1,
|
||
},
|
||
},
|
||
},
|
||
series: seriesData,
|
||
};
|
||
this.echartInit[domKey].setOption(optionLine);
|
||
})
|
||
this.tabsLoading = false;
|
||
},
|
||
getNowTime() {
|
||
let speed = 1000
|
||
let that = this
|
||
let theNowTime = function () {
|
||
that.nowTime = that.timeNumber()
|
||
}
|
||
setInterval(theNowTime, speed)
|
||
},
|
||
timeNumber() {
|
||
let today = new Date()
|
||
let date = today.getFullYear() + '年' + this.twoDigits(today.getMonth() + 1) + '月' + this.twoDigits(today.getDate()) + '日'
|
||
let time = this.twoDigits(today.getHours()) + ':' + this.twoDigits(today.getMinutes()) + ':' + this.twoDigits(today.getSeconds())
|
||
let wk = new Date().getDay()
|
||
let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||
let week = weeks[wk]
|
||
return date + ' ' + week + ' ' + time
|
||
},
|
||
twoDigits(val) {
|
||
if (val < 10) return '0' + val
|
||
return val
|
||
},
|
||
jumpStationPage(e) {
|
||
let stationCode = e.stationCode
|
||
this.$router.push({path: '/MywrList', query: {stationCode: stationCode}})
|
||
},
|
||
handleClosetuichu(done) {
|
||
this.dialogVisible = false
|
||
localStorage.clear()
|
||
this.$router.push({path: '/Login'})
|
||
},
|
||
infor() {
|
||
var onformation = JSON.parse(window.sessionStorage.getItem('password'));
|
||
if (onformation) {
|
||
this.inforname = onformation.realname
|
||
}
|
||
},
|
||
qcguanbi() {
|
||
this.qcdialogTableVisible = false
|
||
this.qyinfordtdialogTableVisible = false
|
||
this.dialogTableVisible = false
|
||
this.singleEchartDialogShowFlag = false
|
||
this.clearVehicleMarker();
|
||
},
|
||
screen() {
|
||
let element = document.documentElement;
|
||
if (this.fullscreen) {
|
||
if (document.exitFullscreen) {
|
||
document.exitFullscreen();
|
||
} else if (document.webkitCancelFullScreen) {
|
||
document.webkitCancelFullScreen();
|
||
} else if (document.mozCancelFullScreen) {
|
||
document.mozCancelFullScreen();
|
||
} else if (document.msExitFullscreen) {
|
||
document.msExitFullscreen();
|
||
}
|
||
} else {
|
||
if (element.requestFullscreen) {
|
||
element.requestFullscreen();
|
||
} else if (element.webkitRequestFullScreen) {
|
||
element.webkitRequestFullScreen();
|
||
} else if (element.mozRequestFullScreen) {
|
||
element.mozRequestFullScreen();
|
||
} else if (element.msRequestFullscreen) {
|
||
element.msRequestFullscreen();
|
||
}
|
||
}
|
||
this.fullscreen = !this.fullscreen;
|
||
},
|
||
switchIcon(flag) {
|
||
let that = this;
|
||
let arr = [];
|
||
if (this.lastClickIcon == flag) {
|
||
this.lastClickIcon = ''
|
||
// 取消选中，恢复视图
|
||
that.aMap.setFitView(null, false, [100, 400, 360, 360], 16);
|
||
return;
|
||
} else {
|
||
this.lastClickIcon = flag;
|
||
if (flag == 'livestock') {
|
||
arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("livestock") != -1);
|
||
} else if (flag == 'orient') {
|
||
arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("orient") != -1);
|
||
} else if (flag == 'watershed') {
|
||
arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("watershed") != -1);
|
||
} else if (flag == 'soil') {
|
||
arr = this.markersSoil;
|
||
} else if (flag == 'flowmeter') {
|
||
arr = this.markersFlowmeter;
|
||
} else if (flag == 'vehicle') {
|
||
arr = this.markersVehicle;
|
||
}
|
||
}
|
||
if (arr && arr.length > 0) {
|
||
arr.map(item => {
|
||
item.setzIndex((that.lastZIndex+=2));
|
||
});
|
||
that.aMap.setFitView(arr, false, [200, 500, 360, 360], 16);
|
||
const typeNames = {
|
||
'livestock': '畜禽污染监测站',
|
||
'orient': '农田污染监测站',
|
||
'watershed': '小流域监测站',
|
||
'soil': '长期定位监测站',
|
||
'flowmeter': '微功率雷达监测点',
|
||
'vehicle': '危废车辆'
|
||
};
|
||
this.$message.success(`找到 ${arr.length} 个${typeNames[flag] || '标记点'}`);
|
||
} else {
|
||
that.aMap.setFitView(null, false, [100, 400, 360, 360], 16);
|
||
const typeNames = {
|
||
'livestock': '畜禽污染监测站',
|
||
'orient': '农田污染监测站',
|
||
'watershed': '小流域监测站',
|
||
'soil': '长期定位监测站',
|
||
'flowmeter': '微功率雷达监测点',
|
||
'vehicle': '危废车辆'
|
||
};
|
||
this.$message.warning(`暂无${typeNames[flag] || '标记点'}数据`);
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import '@/assets/css/index.css';
|
||
|
||
.quanping {
|
||
width: 1.6vw;
|
||
margin-right: 3%;
|
||
margin-top: 0.2vw;
|
||
position: absolute;
|
||
right: 1%;
|
||
z-index: 999;
|
||
}
|
||
|
||
/* 台账弹窗 */
|
||
.tzsanguang {
|
||
position: absolute;
|
||
top: -1.5vw;
|
||
right: 38%;
|
||
}
|
||
|
||
.tzsanguangbt {
|
||
position: absolute;
|
||
bottom: -1.5vw;
|
||
right: 38%;
|
||
}
|
||
|
||
.tz_cov_top {
|
||
width: 40%;
|
||
height: 3vw;
|
||
margin: 0 auto;
|
||
background: url(../../assets/image/tz_tltle_bg.png) no-repeat;
|
||
background-size: cover;
|
||
text-align: center;
|
||
line-height: 3vw;
|
||
margin-bottom: 2vw;
|
||
}
|
||
|
||
.tz_cov_top_tit {
|
||
font-size: 1vw;
|
||
color: #fff;
|
||
text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
|
||
font-family: douyuFont;
|
||
}
|
||
|
||
.mywrcov_onehover {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.centerMainBox2 img {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.boxLis {
|
||
width: 70%;
|
||
height: 1.5vw;
|
||
margin-left: 3vw;
|
||
margin-top: 1vw;
|
||
border-bottom: .02vw solid rgb(40, 229, 233);
|
||
}
|
||
|
||
.boxLis > li {
|
||
width: 4vw;
|
||
height: 1.4vw;
|
||
display: block;
|
||
background: rgba(40, 229, 233, .5);
|
||
margin-right: .5vw;
|
||
color: #fff;
|
||
line-height: 1.4vw;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active {
|
||
border-bottom: .02vw solid #040A18;
|
||
border-top: .02vw solid rgb(40, 229, 233);
|
||
border-right: .02vw solid rgb(40, 229, 233);
|
||
border-left: .02vw solid rgb(40, 229, 233);
|
||
}
|
||
|
||
.contList {
|
||
position: relative;
|
||
width: 70%;
|
||
height: 7vw;
|
||
margin: 1vw auto 0;
|
||
}
|
||
|
||
.content1 li {
|
||
display: none;
|
||
}
|
||
|
||
.baseBox {
|
||
width: 100%;
|
||
border: none;
|
||
background: none;
|
||
}
|
||
|
||
.boxTitle {
|
||
font-size: .8vw;
|
||
width: 38%;
|
||
margin-top: 1vw;
|
||
text-align: center;
|
||
}
|
||
|
||
.right {
|
||
float: right;
|
||
}
|
||
|
||
.baseBoxLeft {
|
||
width: 22.5%;
|
||
height: 100%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.baseBoxRight {
|
||
width: 68%;
|
||
height: 100%;
|
||
}
|
||
|
||
.maps {
|
||
width: 100%;
|
||
height: 95%;
|
||
margin-top: 2%;
|
||
background: pink;
|
||
}
|
||
|
||
.baseBox1,
|
||
.baseBox2,
|
||
.baseBox3 {
|
||
position: relative;
|
||
}
|
||
|
||
.baseBox1 img,
|
||
.baseBox2 img,
|
||
.baseBox3 img {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.csbaseBox1 {
|
||
position: relative;
|
||
z-index: 999;
|
||
}
|
||
|
||
.liSpan {
|
||
width: 100%;
|
||
margin-top: 3.2%;
|
||
text-align: center;
|
||
color: rgb(40, 229, 233);
|
||
}
|
||
|
||
.liP {
|
||
width: 66%;
|
||
margin: .3vw auto 0;
|
||
text-align: left;
|
||
font-size: .5vw;
|
||
color: rgb(40, 229, 233);
|
||
}
|
||
|
||
a:hover {
|
||
text-decoration: none
|
||
}
|
||
|
||
.titleName {
|
||
color: #0EFCFF;
|
||
}
|
||
|
||
.plant {
|
||
width: 90%;
|
||
height: 5.5vw;
|
||
margin: 2% auto 0;
|
||
display: -webkit-flex;
|
||
display: -moz-flex;
|
||
}
|
||
|
||
.plant > li {
|
||
width: 15%;
|
||
height: 100%;
|
||
}
|
||
|
||
.jumps {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 235, 255, .08);
|
||
display: -webkit-flex;
|
||
display: -moz-flex;
|
||
}
|
||
|
||
.jumps > div > img {
|
||
width: .88vw;
|
||
height: .88vw;
|
||
float: right;
|
||
}
|
||
|
||
.jumps > p {
|
||
width: 90%;
|
||
font-size: 1.3vw;
|
||
color: #fff;
|
||
margin: auto;
|
||
}
|
||
|
||
.jumps > div {
|
||
width: 90%;
|
||
margin: 5% auto 0;
|
||
}
|
||
|
||
.jumps > div > span {
|
||
font-size: .6vw;
|
||
color: #0efcff;
|
||
float: left;
|
||
}
|
||
|
||
.spans0 {
|
||
width: 80%;
|
||
height: 5%;
|
||
background: #03DA8D;
|
||
}
|
||
|
||
.spans1 {
|
||
width: 80%;
|
||
height: 5%;
|
||
background: #0efcff;
|
||
}
|
||
|
||
.spans2 {
|
||
width: 80%;
|
||
height: 5%;
|
||
background: #FE0000;
|
||
}
|
||
|
||
.spans3 {
|
||
width: 80%;
|
||
height: 5%;
|
||
background: #F78001;
|
||
}
|
||
|
||
.boxVideo {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.boxVideo video {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.baseDatas {
|
||
width: 70%;
|
||
height: 2vw;
|
||
display: -webkit-flex;
|
||
margin: 1vw 0 0 5vw;
|
||
}
|
||
|
||
.baseDatas li {
|
||
width: 10%;
|
||
}
|
||
|
||
.baseDatas li a {
|
||
color: #fff;
|
||
font-size: .8vw;
|
||
}
|
||
|
||
.active2 a > span {
|
||
color: rgb(40, 229, 233);
|
||
}
|
||
|
||
.baseDatas li a:hover > span {
|
||
color: rgb(40, 229, 233);
|
||
}
|
||
|
||
.baseDatas li a:hover > .borderRight {
|
||
border-left-color: rgb(40, 229, 233);
|
||
}
|
||
|
||
.tableDetalis {
|
||
width: 92%;
|
||
color: #fff;
|
||
margin-left: 2vw;
|
||
}
|
||
|
||
.tableDetalis tr {
|
||
height: 1.3vw;
|
||
font-size: .8vw;
|
||
}
|
||
|
||
.tableDetalis tr > td {
|
||
text-align: center;
|
||
}
|
||
|
||
.tableDetalis tr > td:nth-child(7) {
|
||
text-align: right;
|
||
}
|
||
|
||
.borderRight {
|
||
width: 0;
|
||
height: 0;
|
||
float: left;
|
||
border: .4vw solid transparent;
|
||
border-left-color: #fff;
|
||
margin-top: .2vw;
|
||
}
|
||
|
||
.borderActive {
|
||
border-left-color: rgb(40, 229, 233);
|
||
}
|
||
|
||
.equipment_table {
|
||
width: 85%;
|
||
height: 25%;
|
||
margin: auto;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: .5vw;
|
||
}
|
||
|
||
.equipment_table tr:nth-child(1) {
|
||
color: #0EFCFF;
|
||
}
|
||
|
||
.equipment_table tr {
|
||
border: 1px solid #0EFCFF;
|
||
}
|
||
|
||
.equipment_table tr:nth-child(1) {
|
||
font-size: .8vw;
|
||
}
|
||
|
||
.equipment_table img {
|
||
width: 1vw;
|
||
}
|
||
|
||
.env_table {
|
||
height: 35%;
|
||
margin-top: 5%;
|
||
}
|
||
|
||
.env_table td {
|
||
border: 1px solid #0EFCFF;
|
||
}
|
||
|
||
.env_table tr:nth-child(1) {
|
||
background: rgba(14, 252, 255, .3);
|
||
}
|
||
|
||
.map img {
|
||
width: 80%;
|
||
margin-left: 10%;
|
||
}
|
||
|
||
.map img {
|
||
width: 80%;
|
||
margin-left: 10%;
|
||
}
|
||
|
||
.mapActived1 {
|
||
position: absolute;
|
||
top: 41.5%;
|
||
left: 61%;
|
||
width: 3.5vw;
|
||
height: 5.5vw;
|
||
border-radius: 90px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mapActived2 {
|
||
position: absolute;
|
||
top: 60%;
|
||
right: 16%;
|
||
width: 4.5vw;
|
||
height: 2.5vw;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mapActived3 {
|
||
position: absolute;
|
||
top: 57%;
|
||
right: 9%;
|
||
width: 2.5vw;
|
||
height: 7vw;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mapContent1 {
|
||
position: absolute;
|
||
height: 6vw;
|
||
width: 8vw;
|
||
left: 65%;
|
||
top: 33%;
|
||
background: rgba(255, 255, 255, .2);
|
||
}
|
||
|
||
.mapContent2 {
|
||
position: absolute;
|
||
height: 6vw;
|
||
width: 8vw;
|
||
left: 70%;
|
||
top: 35%;
|
||
background: rgba(255, 255, 255, .2);
|
||
display: none;
|
||
}
|
||
|
||
.mapContent3 {
|
||
position: absolute;
|
||
height: 6vw;
|
||
width: 8vw;
|
||
right: 1%;
|
||
top: 35%;
|
||
background: rgba(255, 255, 255, .2);
|
||
display: none;
|
||
}
|
||
|
||
.mapContentFont {
|
||
width: 85%;
|
||
margin-left: 12%;
|
||
font-size: .6vw;
|
||
color: #0efcff;
|
||
letter-spacing: .05vw;
|
||
margin-bottom: .3vw;
|
||
}
|
||
|
||
.mapContentFont:nth-child(1) {
|
||
margin-top: .6vw;
|
||
}
|
||
|
||
.mapContentFont span {
|
||
color: white;
|
||
}
|
||
|
||
.video-js {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.video-js:hover .vjs-big-play-button {
|
||
background: none;
|
||
}
|
||
|
||
.video-js .vjs-big-play-button:hover {
|
||
background: none;
|
||
}
|
||
|
||
.video-js .vjs-big-play-button {
|
||
border: none;
|
||
background: none;
|
||
}
|
||
.in1con_lf_titshow12 {
|
||
font-size: 1vw;
|
||
color: #fff;
|
||
text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
|
||
font-family: douyuFont;
|
||
top: 1vw;
|
||
left: 0%;
|
||
display: block;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin: 0;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.in1con_lf_titshow1 {
|
||
font-size: 1vw;
|
||
color: #fff;
|
||
text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
|
||
font-family: douyuFont;
|
||
position: absolute;
|
||
top: 0.9vw;
|
||
left: 0%;
|
||
display: block;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
.in1con_lf_titshow13{
|
||
color: #ffa;
|
||
}
|
||
.in1con_lf_titshow2 {
|
||
font-size: 11px;
|
||
color: #fff;
|
||
text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
|
||
position: absolute;
|
||
top: 1.3vw;
|
||
right: 18px;
|
||
display: block;
|
||
width: 100%;
|
||
text-align: right;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* ========== 危废车辆下拉菜单样式 ========== */
|
||
.vehicle-dropdown-wrapper {
|
||
position: fixed;
|
||
bottom: 2vw;
|
||
right: 2vw;
|
||
z-index: 999;
|
||
width: 220px;
|
||
}
|
||
|
||
.vehicle-dropdown-btn-dark {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 16px;
|
||
background: rgba(0, 20, 40, 0.9);
|
||
border: 1px solid rgba(0, 212, 255, 0.3);
|
||
border-radius: 8px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
backdrop-filter: blur(10px);
|
||
box-shadow: 0 0 30px rgba(0, 212, 255, 0.1);
|
||
}
|
||
|
||
.vehicle-dropdown-btn-dark:hover {
|
||
border-color: rgba(0, 212, 255, 0.6);
|
||
box-shadow: 0 0 40px rgba(0, 212, 255, 0.2);
|
||
}
|
||
|
||
.vehicle-dropdown-btn-dark .el-icon--right {
|
||
margin-left: 8px;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.vehicle-dropdown-menu-dark {
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
margin-bottom: 4px;
|
||
background: rgba(0, 20, 40, 0.95);
|
||
border: 1px solid rgba(0, 212, 255, 0.2);
|
||
border-radius: 8px;
|
||
padding: 6px 0;
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
backdrop-filter: blur(10px);
|
||
box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.vehicle-dropdown-menu-dark::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
|
||
.vehicle-dropdown-menu-dark::-webkit-scrollbar-track {
|
||
background: rgba(0, 212, 255, 0.05);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.vehicle-dropdown-menu-dark::-webkit-scrollbar-thumb {
|
||
background: rgba(0, 212, 255, 0.3);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.vehicle-dropdown-item-dark {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8px 16px;
|
||
color: #8bb4d0;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
gap: 8px;
|
||
}
|
||
|
||
.vehicle-dropdown-item-dark:hover {
|
||
background: rgba(0, 212, 255, 0.1);
|
||
color: #fff;
|
||
}
|
||
|
||
.vehicle-dropdown-item-dark .vehicle-dot-dark {
|
||
color: #00d4ff;
|
||
font-size: 10px;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.vehicle-dropdown-item-dark .all-dot {
|
||
color: #FFD700;
|
||
}
|
||
|
||
.vehicle-dropdown-item-dark .close-dot {
|
||
color: #ff6b6b;
|
||
}
|
||
|
||
.vehicle-dropdown-divider {
|
||
height: 1px;
|
||
margin: 4px 12px;
|
||
background: rgba(0, 212, 255, 0.1);
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
.login .el-dialog {
|
||
position: relative;
|
||
margin: 0 auto;
|
||
background: #fff;
|
||
border-radius: 2px;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
|
||
box-sizing: border-box;
|
||
width: 50%;
|
||
}
|
||
|
||
.el-dialog {
|
||
position: relative;
|
||
margin: 0 auto;
|
||
background: none;
|
||
border-radius: 2px;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
|
||
box-sizing: border-box;
|
||
width: 50%;
|
||
}
|
||
|
||
.el-dialog__header {
|
||
display: none;
|
||
}
|
||
|
||
.home_dlhj .el-carousel__arrow {
|
||
top: 9%;
|
||
font-size: 1vw;
|
||
}
|
||
|
||
.home_dlhj .el-carousel__arrow--left {
|
||
left: 0;
|
||
}
|
||
|
||
.home_dlhj .el-carousel__arrow--right {
|
||
right: 0;
|
||
}
|
||
|
||
.el-tabs--card > .el-tabs__header {
|
||
border: none;
|
||
}
|
||
|
||
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
|
||
text-align: center;
|
||
height: 1.7vw;
|
||
line-height: 1.7vw;
|
||
margin-left: 1% !important;
|
||
border-radius: 0.4vw;
|
||
background: #0e2c3f;
|
||
color: #fff !important;
|
||
border: 1px solid #2fbdff;
|
||
box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
|
||
margin-top: 8px;
|
||
text-align: center;
|
||
font-size: 12px !important;
|
||
}
|
||
|
||
.el-tabs--card > .el-tabs__header .el-tabs__item {
|
||
text-align: center;
|
||
height: 1.7vw;
|
||
line-height: 1.7vw;
|
||
margin-left: 1% !important;
|
||
border-radius: 0.4vw;
|
||
background: #0e2c3f;
|
||
color: #fff !important;
|
||
font-size: 8px !important;
|
||
border: 1px solid #0e2c3f;
|
||
font-size: 12px !important;
|
||
}
|
||
|
||
.el-tabs--card > .el-tabs__header .el-tabs__nav {
|
||
border: none;
|
||
float: right;
|
||
margin-right: 6%;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.zlxg_btm .el-tabs__item:hover {
|
||
text-align: center;
|
||
height: 1.7vw;
|
||
line-height: 1.7vw;
|
||
margin-left: 1% !important;
|
||
border-radius: 0.4vw;
|
||
background: #0e2c3f;
|
||
color: #fff !important;
|
||
border: 1px solid #2fbdff;
|
||
box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
|
||
font-size: 12px !important;
|
||
}
|
||
|
||
.v-modal {
|
||
display: none;
|
||
}
|
||
|
||
.jcsssj_rt_num {
|
||
display: inline-block;
|
||
font-size: 0.8vw;
|
||
margin-left: 20%;
|
||
text-align: right;
|
||
margin-top: 0.4vw;
|
||
}
|
||
|
||
|
||
/* 企业弹窗样式 */
|
||
.tctit {
|
||
font-size: 1.2vw;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
display: block;
|
||
margin-bottom: 1.6vw;
|
||
}
|
||
|
||
.tcgldw {
|
||
font-size: 1vw;
|
||
color: #fff;
|
||
line-height: 2vw;
|
||
display: block;
|
||
padding-right: 3%;
|
||
height: 15vw;
|
||
overflow: auto;
|
||
}
|
||
|
||
/* 定义滚动条样式 */
|
||
.tcgldw::-webkit-scrollbar {
|
||
width: 2px;
|
||
height: 2px;
|
||
background-color: rgba(240, 240, 240, 0.1);
|
||
}
|
||
|
||
.tcgldw::-webkit-scrollbar-track {
|
||
box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
|
||
border-radius: 10px;
|
||
background-color: rgba(240, 240, 240, .5);
|
||
}
|
||
|
||
.tcgldw::-webkit-scrollbar-thumb {
|
||
border-radius: 10px;
|
||
box-shadow: inset 0 0 0px rgba(87, 146, 255, .8);
|
||
background-color: rgba(87, 146, 255, .8);
|
||
}
|
||
|
||
/* 曲线弹窗 */
|
||
.jgdhei {
|
||
margin-top: 2vw;
|
||
}
|
||
|
||
.trwdcov {
|
||
width: 94%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.trwdcov_top {
|
||
width: 100%;
|
||
height: 5vh;
|
||
line-height: 5vh;
|
||
text-align: left;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.trwdcov_top_tit {
|
||
color: #fff;
|
||
font-size: 0.8vw;
|
||
margin-right: 1%;
|
||
}
|
||
|
||
.trwdcov_top_zcz {
|
||
color: #fff;
|
||
font-size: 0.8vw;
|
||
float: right;
|
||
margin-right: 3%;
|
||
}
|
||
|
||
.trwdcov_top .el-radio__input.is-checked .el-radio__inner {
|
||
border-color: #00ffcd;
|
||
background: #00ffcd;
|
||
}
|
||
|
||
.trwdcov_top .el-radio__input.is-checked + .el-radio__label {
|
||
color: #00ffcd;
|
||
}
|
||
|
||
.trwdcov_top .el-radio {
|
||
color: #fff;
|
||
}
|
||
|
||
.trwdcov_top .el-input__inner {
|
||
background: none;
|
||
}
|
||
|
||
.trwdcov_top .el-date-editor .el-range-input {
|
||
background: none;
|
||
color: #c9c9c9;
|
||
border-color: #c9c9c9;
|
||
}
|
||
|
||
.trwdcov_top .el-date-editor .el-range-separator {
|
||
color: #fff;
|
||
}
|
||
|
||
.trwdcov .el-table__body, .el-table__footer, .el-table__header {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.trwdcov .el-table__body, .el-table__footer, .el-table__header {
|
||
width: 100% !important;
|
||
text-align: center;
|
||
}
|
||
|
||
.trwdcov .el-table tr {
|
||
background: none;
|
||
}
|
||
|
||
.trwdcov .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
|
||
background: none;
|
||
color: #00ffcd;
|
||
border-bottom: 1px solid #747474;
|
||
text-align: center;
|
||
}
|
||
|
||
.trwdcov .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
|
||
border-right: 1px solid #747474;
|
||
}
|
||
|
||
.trwdcov .el-table--enable-row-transition .el-table__body td.el-table__cell {
|
||
color: #c9c9c9 !important;
|
||
}
|
||
|
||
.trwdcov .el-table--border, .el-table--group {
|
||
border: 1px solid #747474;
|
||
}
|
||
|
||
.trwdcov .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.trwdcov_top_time {
|
||
margin-right: 3%;
|
||
}
|
||
|
||
.tz_cov_right .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.el-table .el-table__cell.gutter {
|
||
background: var(--tableHeadBg);
|
||
width: 2px;
|
||
}
|
||
|
||
.el-table__body-wrapper::-webkit-scrollbar {
|
||
width: 2px;
|
||
height: 2px;
|
||
background-color: rgba(240, 240, 240, 0.1);
|
||
}
|
||
|
||
.el-table th.gutter {
|
||
display: none;
|
||
width: 0;
|
||
}
|
||
|
||
.el-table colgroup col[name='gutter'] {
|
||
display: none;
|
||
width: 0;
|
||
}
|
||
|
||
.in1con_lf_img {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.mapTuLi {
|
||
position: absolute;
|
||
bottom: 334px;
|
||
left: 456px;
|
||
}
|
||
|
||
.mywrcov_onenumjx{
|
||
font-size: 1.2vw;
|
||
}
|
||
</style> |