Administrator
/
FenXiNspBigScreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

第一屏完成

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.gitignore vendored
View File

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

12974
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

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

8540
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

2
public/index.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <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 %>reset.css">
<!-- <link rel="stylesheet" href="<%= BASE_URL %>layui/dist/css/layui.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"/>--> <!-- <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>-->

2
src/api/request.js
View File

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

2
src/assets/css/index.css
View File

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

2
src/assets/css/index2.css
View File

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

118
src/pages/Home/index.vue
View File

@ -14,7 +14,7 @@
element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-background="rgba(0, 0, 0, 0.8)"
> >
<div class="nav"> <div class="nav">
<span class="nav_ti nav_mag">稷山县重点流域农业面源污染综合治理平台</span> <span class="nav_ti nav_mag">河津市农业面源污染在线监测平台</span>
<span class="nav_tit">治理效果评价和监测一张图</span> <span class="nav_tit">治理效果评价和监测一张图</span>
</div> </div>
<div class="nav_btn"> <div class="nav_btn">
@ -77,22 +77,22 @@
</vue-seamless-scroll> </vue-seamless-scroll>
</div> </div>
<div class="in1con_lf_img"> <div class="in1con_lf_img">
<!-- <div--> <div
<!-- class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">--> 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="">--> <img src="@/assets/image/xmgk01.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">--> <span class="in1con_lf_imglf_num">
<!-- <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"--> <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>--> </span>
<!-- </div>--> </div>
<div <div
class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse"> 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=""> <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"> <span class="in1con_lf_imglf_num">
<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" <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> </span>
</div> </div>
<!-- <div--> <!-- <div-->
@ -113,15 +113,15 @@
<!-- :to="7" :key="stationCount0" duration="3000"></animate-number>个--> <!-- :to="7" :key="stationCount0" duration="3000"></animate-number>个-->
<!-- </span>--> <!-- </span>-->
<!-- </div>--> <!-- </div>-->
<!-- <div--> <div
<!-- class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">--> 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="">--> <img src="@/assets/image/xmgk05.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">--> <span class="in1con_lf_imglf_num">
<!-- <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"--> <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
<!-- :to="1" :key="stationCount0" duration="3000"></animate-number>个--> :to="2974" :key="stationCount0" duration="3000"></animate-number>个
<!-- </span>--> </span>
<!-- </div>--> </div>
</div> </div>
</div> </div>
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div> <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
@ -187,14 +187,18 @@
</transition> </transition>
<!-- 地图左下图例--> <!-- 地图左下图例-->
<div v-if="mapTypeFlag==true" class="mapTuLi"> <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')"> <div class="scdlist" @click="switchIcon('livestock')">
<img src="@/assets/image/icon-blue.png" class="xcdimg" alt=""> <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>
<!-- <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')">--> <!-- <div class="scdlist" @click="switchIcon('watershed')">-->
<!-- <img src="@/assets/image/waterlive.png" class="xcdimg" alt="">--> <!-- <img src="@/assets/image/waterlive.png" class="xcdimg" alt="">-->
<!-- <span class="scdlist_tit">小流域监测站</span>--> <!-- <span class="scdlist_tit">小流域监测站</span>-->
@ -203,9 +207,9 @@
<!-- <img src="@/assets/image/soil.png" class="xcdimg" alt="">--> <!-- <img src="@/assets/image/soil.png" class="xcdimg" alt="">-->
<!-- <span class="scdlist_tit">长期定位监测站</span>--> <!-- <span class="scdlist_tit">长期定位监测站</span>-->
<!-- </div>--> <!-- </div>-->
<div class="scdlist" @click="switchIcon('ent')"> <div class="scdlist" @click="switchIcon('light')">
<img src="@/assets/image/enticon.png" class="xcdimg" alt=""> <img src="@/assets/image/address4.png" class="xcdimg" alt="">
<span class="scdlist_tit">企业信息</span> <span class="scdlist_tit">联网式太阳能杀虫灯</span>
</div> </div>
</div> </div>
<transition enter-active-class="animate__animated animate__backInUp" <transition enter-active-class="animate__animated animate__backInUp"
@ -220,15 +224,15 @@
<img src="@/assets/image/sanguang.png" class="sanguangbt2" alt=""> <img src="@/assets/image/sanguang.png" class="sanguangbt2" alt="">
<div v-loading="tabsLoading" element-loading-text=" " <div v-loading="tabsLoading" element-loading-text=" "
element-loading-background="rgba(0, 0, 0, 0.8)"> element-loading-background="rgba(0, 0, 0, 0.8)">
<span class="zywr_titshow">治理效果分析</span> <span class="zywr_titshow">重要污染物治理效果</span>
<el-select class="dataTypeEchart2" style="width:90px;" v-model="dateType" placeholder="请选择" @change="changeDateType"> <!-- <el-select class="dataTypeEchart2" style="width:90px;" v-model="dateType" placeholder="请选择" @change="changeDateType">-->
<el-option <!-- <el-option-->
v-for="item in dateTypeOptions" <!-- v-for="item in dateTypeOptions"-->
:key="item.value" <!-- :key="item.value"-->
:label="item.label" <!-- :label="item.label"-->
:value="item.value"> <!-- :value="item.value">-->
</el-option> <!-- </el-option>-->
</el-select> <!-- </el-select>-->
<!-- <el-tooltip class=" " effect="dark" style="position: absolute;left: 300px;"--> <!-- <el-tooltip class=" " effect="dark" style="position: absolute;left: 300px;"-->
<!-- :content="dataTypeEchart?'当前：监测值为正常历史监测数据。':'当前：对比值为1#监测站数据减去2#监测站数据。'"--> <!-- :content="dataTypeEchart?'当前：监测值为正常历史监测数据。':'当前：对比值为1#监测站数据减去2#监测站数据。'"-->
<!-- placement="top-start">--> <!-- placement="top-start">-->
@ -268,7 +272,7 @@
<img src="@/assets/image/sanguang.png" class="sanguangbt" alt=""> <img src="@/assets/image/sanguang.png" class="sanguangbt" alt="">
<div> <div>
<div class="home_dlhj"> <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 :autoplay="false" indicator-position="none" arrow="always" height="320px">
<el-carousel-item v-for="item in stationInfoList" :key="item.id"> <el-carousel-item v-for="item in stationInfoList" :key="item.id">
<div class="in1con_lf_tit " > <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 style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
<div> <div>
<div class="in1con_lf_tit " style="cursor: pointer;" @click1="taizhangDialogShowFlag=true"> <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=""> <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
<!-- <span class="in1con_lf_titshow2 " style="">台账>></span>--> <!-- <span class="in1con_lf_titshow2 " style="">台账>></span>-->
</div> </div>
@ -367,7 +371,7 @@
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div> <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
<div> <div>
<div class="in1con_lf_tit "> <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=""> <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div> </div>
<div style="height:280px;overflow: hidden" @click="showEchartDialog($event, 1)"> <div style="height:280px;overflow: hidden" @click="showEchartDialog($event, 1)">
@ -567,7 +571,7 @@ export default {
switchValue: true, switchValue: true,
fullscreen: false, //全屏 fullscreen: false, //全屏
echartIndex: 0, echartIndex: 0,
dateType: 'monthDays', dateType: 'yearMonth',
dateTypeOptions: [{ dateTypeOptions: [{
value: 'dayhours', value: 'dayhours',
label: '24小时' label: '24小时'
@ -814,7 +818,7 @@ export default {
viewMode: '3D', viewMode: '3D',
resizeEnable: true, resizeEnable: true,
zoom: zoomnum, zoom: zoomnum,
center: [110.867954, 35.631413],//默认的地图中心经纬度 center: [110.6560, 35.5772],//默认的地图中心经纬度
mapStyle: 'amap://styles/blue', mapStyle: 'amap://styles/blue',
dragEnable: true,//地图是否可通过鼠标拖拽平移，默认为true。此属性可被setStatus/getStatus 方法控制 dragEnable: true,//地图是否可通过鼠标拖拽平移，默认为true。此属性可被setStatus/getStatus 方法控制
jogEnable: true,//地图是否使用缓动效果，默认值为true。此属性可被setStatus/getStatus 方法控制 jogEnable: true,//地图是否使用缓动效果，默认值为true。此属性可被setStatus/getStatus 方法控制
@ -829,25 +833,32 @@ export default {
scale: (2, 2.5) scale: (2, 2.5)
}); });
that.aMap.on('complete', (e) => { 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;
if (b.type!='soil') return -1; if (b.type!='soil') return -1;
return 0; return 0;
});//其他类型 });//其他类型
// console.log(Marker,'Marker') // console.log(Marker,'Marker')
Marker.push(...this.entList); // Marker.push(...this.entList);//加入企业点位数组
console.log("初始化地图。2", Marker) // console.log("初始化地图。2", Marker)
Marker.map(item => { Marker.map(item => {
if(!item.longitude && !item.latitude){
console.log("item = ", item)
return;
}
let marker = new AMap.Marker({ let marker = new AMap.Marker({
zIndex: item.type == 'soil' ? that.lastZIndex : (that.lastZIndex+1), zIndex: item.type == 'soil' ? that.lastZIndex : (that.lastZIndex+1),
icon: this.urlimg + item.picUrl, icon: this.urlimg + item.picUrl,
position: [item.longitude, item.latitude], 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, title: item.name,
label: { // label: {
content: item.type == "ent"? item.name : '', // content: item.type == "ent"? item.name : '',
direction: 'top' // direction: 'top'
}, // },
extData: { extData: {
ids: item.ids, ids: item.ids,
extPics: item.extPics, extPics: item.extPics,
@ -857,6 +868,7 @@ export default {
stationType: item.type stationType: item.type
} }
}); });
//点位添加事件
if (item.type == 'orient' || item.type == 'livestock' || item.type == 'watershed') {//监测站弹窗 if (item.type == 'orient' || item.type == 'livestock' || item.type == 'watershed') {//监测站弹窗
marker.on('click', e => { marker.on('click', e => {
let indexnumb = e.target.getExtData().ids.slice(-1); let indexnumb = e.target.getExtData().ids.slice(-1);
@ -868,7 +880,6 @@ export default {
marker.on('click', e => { marker.on('click', e => {
this.soilDataId = e.target.getExtData() this.soilDataId = e.target.getExtData()
this.soidShowFlag = true this.soidShowFlag = true
// console.log('soil click', )
}) })
this.markersSoil.push(marker); this.markersSoil.push(marker);
} else if(item.type == "ent"){//企业类型 } else if(item.type == "ent"){//企业类型
@ -879,7 +890,6 @@ export default {
}else { }else {
this.qyinformation.extPics = [] this.qyinformation.extPics = []
} }
console.log("this.qyinformation",this.qyinformation)
this.qyinfordtdialogTableVisible = true this.qyinfordtdialogTableVisible = true
}) })
this.markersOrient.push(marker); this.markersOrient.push(marker);
@ -1695,7 +1705,7 @@ a:hover {
text-align: center; text-align: center;
} }
.in1con_lf_titshow13{ .in1con_lf_titshow13{
color: #ffa; //color: #ffa;
} }
.in1con_lf_titshow2 { .in1con_lf_titshow2 {
font-size: 11px; font-size: 11px;

4
src/pages/Login/index.vue
View File

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

2
src/pages/weather/weather.vue
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"--> <!-- 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>--> <!-- 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=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> </div>
</template> </template>