第一屏完成

This commit is contained in:
wgx 2026-08-17 19:26:48 +08:00
parent 5c28f8d61b
commit 005c3947ff
11 changed files with 78 additions and 21579 deletions

6
.gitignore vendored
View File

@ -1,8 +1,8 @@
.DS_Store
node_modules
/dist
/node_modules/
/dist/
/unpackage
/unpackage/
# local env files
.env.local

12974
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -6,7 +6,8 @@
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"preinstall": "pnpm i"
"preinstallpnpm": "pnpm i",
"preinstallnpm": "npm i"
},
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",

File diff suppressed because it is too large Load Diff

View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>稷山重点流域农业面源污染平台</title>
<title>河津市农业面源污染在线监测平台</title>
<link rel="stylesheet" href="<%= BASE_URL %>reset.css">
<!-- <link rel="stylesheet" href="<%= BASE_URL %>layui/dist/css/layui.css">-->
<!-- <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>-->

View File

@ -8,7 +8,7 @@ const requests = axios.create({
// 请求拦截器
requests.interceptors.request.use((config)=>{
config.headers['X-Access-Token'] = localStorage.getItem("token") // 请求头带上token
config.headers['X-Tenant-Id'] = '1003'
config.headers['X-Tenant-Id'] = '1004'
return config
},(error)=>{
return Promise.reject(new Error('faile'));

View File

@ -651,7 +651,7 @@
}
#chart1{height:12vw;}
.scdlist{
width: 7vw;
width: 8.5vw;
height: 2vw;
margin-top: 0.4vw;
line-height: 2vw;

View File

@ -582,7 +582,7 @@
}
#chart1{height:12vw;}
.scdlist{
width: 9vw;
width: 10vw;
height: 2vw;
line-height: 2vw;
background: rgba(0,0,0,0.6);

View File

@ -14,7 +14,7 @@
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<div class="nav">
<span class="nav_ti nav_mag">稷山县重点流域农业面源污染综合治理平台</span>
<span class="nav_ti nav_mag">河津市农业面源污染在线监测平台</span>
<span class="nav_tit">治理效果评价和监测一张图</span>
</div>
<div class="nav_btn">
@ -77,22 +77,22 @@
</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="1" :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/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="2" :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_tit">畜禽养殖污染监测站</span>
<span class="in1con_lf_imglf_num">
<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
:to="1" :key="stationCount0" duration="3000"></animate-number>
:to="2" :key="stationCount0" duration="3000"></animate-number>
</span>
</div>
<!-- <div-->
@ -113,15 +113,15 @@
<!-- :to="7" :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/xmgk05.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="1" :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/xmgk05.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="2974" :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>
@ -187,14 +187,18 @@
</transition>
<!-- 地图左下图例-->
<div v-if="mapTypeFlag==true" class="mapTuLi">
<div class="scdlist" @click="switchIcon('ent')">
<img src="@/assets/image/enticon.png" class="xcdimg" alt="">
<span class="scdlist_tit">企业站点</span>
</div>
<div class="scdlist" @click="switchIcon('livestock')">
<img src="@/assets/image/icon-blue.png" class="xcdimg" alt="">
<span class="scdlist_tit">畜禽污染监测站</span>
<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('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>-->
@ -203,10 +207,10 @@
<!-- <img src="@/assets/image/soil.png" class="xcdimg" alt="">-->
<!-- <span class="scdlist_tit">长期定位监测站</span>-->
<!-- </div>-->
<div class="scdlist" @click="switchIcon('ent')">
<img src="@/assets/image/enticon.png" class="xcdimg" alt="">
<span class="scdlist_tit">企业信息</span>
</div>
<div class="scdlist" @click="switchIcon('light')">
<img src="@/assets/image/address4.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">
@ -220,15 +224,15 @@
<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-select class="dataTypeEchart2" style="width:90px;" 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>
<span class="zywr_titshow">重要污染物治理效果</span>
<!-- <el-select class="dataTypeEchart2" style="width:90px;" 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-tooltip class=" " effect="dark" style="position: absolute;left: 300px;"-->
<!-- :content="dataTypeEchart?'当前:监测值为正常历史监测数据。':'当前对比值为1#监测站数据减去2#监测站数据。'"-->
<!-- placement="top-start">-->
@ -268,7 +272,7 @@
<img src="@/assets/image/sanguang.png" class="sanguangbt" alt="">
<div>
<div class="home_dlhj">
<span class="in1con_lf_titshow12" >监测指标统计</span>
<!-- <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 " >
@ -319,7 +323,7 @@
<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;" @click1="taizhangDialogShowFlag=true">
<span class="in1con_lf_titshow1">治理效果分析</span>
<span class="in1con_lf_titshow1">面源污染治理效果评价</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
<!-- <span class="in1con_lf_titshow2 " style="">台账>></span>-->
</div>
@ -367,7 +371,7 @@
<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>
<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)">
@ -567,7 +571,7 @@ export default {
switchValue: true,
fullscreen: false, //
echartIndex: 0,
dateType: 'monthDays',
dateType: 'yearMonth',
dateTypeOptions: [{
value: 'dayhours',
label: '24小时'
@ -814,7 +818,7 @@ export default {
viewMode: '3D',
resizeEnable: true,
zoom: zoomnum,
center: [110.867954, 35.631413],//
center: [110.6560, 35.5772],//
mapStyle: 'amap://styles/blue',
dragEnable: true,//truesetStatus/getStatus
jogEnable: true,//使truesetStatus/getStatus
@ -829,25 +833,32 @@ export default {
scale: (2, 2.5)
});
that.aMap.on('complete', (e) => {
let Marker = res.result.filter(ele => ele.type != 'light').sort((a,b) => {
let Marker = res.result.filter(ele => {
return ele.type != 'light' && ele.type != 'air' && ele.type != 'soil'
}
).sort((a,b) => {
if (b.type=='soil') return 1;
if (b.type!='soil') return -1;
return 0;
});//
// console.log(Marker,'Marker')
Marker.push(...this.entList);
console.log("初始化地图。2", Marker)
// Marker.push(...this.entList);//
// console.log("2", Marker)
Marker.map(item => {
if(!item.longitude && !item.latitude){
console.log("item = ", item)
return;
}
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),//
offset: new AMap.Pixel(item.width||0, item.height||0),//
title: item.name,
label: {
content: item.type == "ent"? item.name : '',
direction: 'top'
},
// label: {
// content: item.type == "ent"? item.name : '',
// direction: 'top'
// },
extData: {
ids: item.ids,
extPics: item.extPics,
@ -857,6 +868,7 @@ export default {
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);
@ -868,7 +880,6 @@ export default {
marker.on('click', e => {
this.soilDataId = e.target.getExtData()
this.soidShowFlag = true
// console.log('soil click', )
})
this.markersSoil.push(marker);
} else if(item.type == "ent"){//
@ -879,7 +890,6 @@ export default {
}else {
this.qyinformation.extPics = []
}
console.log("this.qyinformation",this.qyinformation)
this.qyinfordtdialogTableVisible = true
})
this.markersOrient.push(marker);
@ -1695,7 +1705,7 @@ a:hover {
text-align: center;
}
.in1con_lf_titshow13{
color: #ffa;
//color: #ffa;
}
.in1con_lf_titshow2 {
font-size: 11px;

View File

@ -7,7 +7,7 @@
<!-- <source src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/v/loginback.mp4">-->
<source src="https://fxnsp.sxcooh.com/lh-api/sys/common/static/v/loginback.mp4">
</video>
<div class="maintitle">稷山县农业面源污染综合治理平台</div>
<div class="maintitle">河津市农业面源污染在线监测平台</div>
<!-- <img src="@/assets/image/logintltle3.png" alt="" class="logintltle">-->
<el-form
class="loginipt demo-ruleForm"
@ -180,6 +180,8 @@ export default {
background: url(../../assets/image/login_bg_img.png)no-repeat;
background-size: 100% 100%;
overflow: hidden;
position: relative;
z-index: 1;
}
.login_title_img{
display: block;

View File

@ -6,7 +6,7 @@
<!-- src="https://i.tianqi.com?c=code&amp;id=10&amp;color=%23FFFFFF&amp;icon=1&amp;py=fenxi&amp;site=12"-->
<!-- style="pointer-events: none;"></iframe>-->
<!-- <iframe width="300" height="40" src="https://i.tianqi.com/?c=code&a=getcode&id=11&icon=1&color=%23FFFFFF" frameborder="0"></iframe>-->
<iframe width="300" height="40" src="https://i.tianqi.com/?c=code&a=getcode&id=34&icon=1&color=%23FFFFFF&py=jishan" frameborder="0"></iframe>
<iframe width="300" height="40" src="https://i.tianqi.com/?c=code&a=getcode&id=34&icon=1&color=%23FFFFFF&py=hejin" frameborder="0"></iframe>
</div>
</template>