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

添加流量数据

This commit is contained in:
978184212@qq.com 2026-07-31 17:46:23 +08:00
parent f2ab33a2ce
commit 201369034a
2 changed files with 39 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

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

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

@ -83,7 +83,7 @@
<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>个
:to="Number(stationCount0)" :key="stationCount0" duration="3000"></animate-number>个
</span>
</div>
<div
@ -92,7 +92,7 @@
<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="Number(stationCount0)" :key="stationCount0" duration="3000"></animate-number>个
</span>
</div>
<div
@ -101,7 +101,7 @@
<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="Number(stationCount0)" :key="stationCount0" duration="3000"></animate-number>个
</span>
</div>
<div
@ -110,7 +110,7 @@
<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="7" :key="stationCount0" duration="3000"></animate-number>个
:to="Number(stationCount0)" :key="stationCount0" duration="3000"></animate-number>个
</span>
</div>
<!-- <div-->
@ -136,7 +136,7 @@
<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="item.detailValue" :key="item.detailValue"
:to="Number(item.detailValue)" :key="item.detailValue"
duration="3000"></animate-number>{{ item.detailValue2 }}</span>
</div>
</div>
@ -155,7 +155,7 @@
<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="legth.detailValue"
from="0" :to="Number(legth.detailValue)"
:key="legth.detailValue"
duration="3000"></animate-number>{{ legth.detailValue2 }}</span>
</div>
@ -203,6 +203,10 @@
<img src="@/assets/image/soil.png" class="xcdimg" alt="">
<span class="scdlist_tit">长期定位监测站</span>
</div>
<div class="scdlist" @click="switchIcon('soil')">
<img src="@/assets/image/liuliang.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">
@ -364,7 +368,7 @@
<span class="jcsssj_rtbiao" :style="{background:(item.color)}">{{ item.name }}</span>
<span class="jcsssj_rt_numsy">
<!-- <span class="in1con_lf_imglf_num_jix">{{item.value}}</span> -->
<animate-number class="in1con_lf_imglf_num_jix" ref="myNum" from="0" :to="item.value"
<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>
@ -457,8 +461,23 @@
</el-row>
</div>
</el-dialog>
<!-- 地图流量菜单 -->
<el-dropdown style="position:absolute;z-index: 9;top:100px;left:24%;">
<el-button type="primary">
危废车辆<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>危废车辆1</el-dropdown-item>
<el-dropdown-item>危废车辆2</el-dropdown-item>
<el-dropdown-item>危废车辆3</el-dropdown-item>
<el-dropdown-item>危废车辆4</el-dropdown-item>
<el-dropdown-item>危废车辆5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</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"/>
</ScaleBox>
@ -469,19 +488,16 @@
import ScaleBox from 'vue2-scale-box'
import {
displayInfo,
fwlist,
getAllstationAndPestLight,
getIndexSummry,
getNewestData,
getPollutionDict,
getSoilSummry,
ntfmlist,
stationInfo,
survItemSummary
} 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 {_colors} from '@/utils/color.js'
import SingleEchartDialog from "@/components/SingleEchartDialog.vue";
import TaizhangDialog from "@/components/TaizhangDialog.vue";
@ -494,7 +510,8 @@ export default {
vueSeamlessScroll,
hefentianqi,
ScaleBox,
SoilDialog
SoilDialog,
LiulDialog
},
data() {
return {
@ -560,7 +577,9 @@ export default {
label: '12个月'
}],
soidShowFlag: false,
liulShowFlag:false,
soilDataId: '',
liulDataId:'',
tabsLoading: false,
lastZIndex: 1,
};
@ -607,12 +626,6 @@ export default {
},
},
mounted() {
console.log('开始初始化！！！！')
// setTimeout(() => {
// this.$nextTick(() => {
// this.indexinfor();
// })
// }, 2000)
// 实时时间
setTimeout(() => {
this.$nextTick(() => {
@ -627,14 +640,8 @@ export default {
this.infor();
this.indexinfor();
this.doGetIndexSummry({index: this.echartIndex});
this.initSoilData();
},
methods: {
initSoilData(){
// getSoilSummry({deployIds:['1679816733238575105'], "summrayMode":"dayhours"}).then(res=>{
// console.log(res)
// })
},
formatter: function (num) {
return num.toFixed(3)
},
@ -818,7 +825,12 @@ 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 == '10_flowmeter'){//土壤弹窗，长期监测站
marker.on('click', e => {
this.liulDataId = e.target.getExtData()
this.liulShowFlag = true
})
this.markersSoil.push(marker);
} else {
@ -868,7 +880,6 @@ export default {
switchEchartType() {
this.dataTypeEchart = (!this.dataTypeEchart);
this.echartInit = {};
// this.activeName2 = this.riverList[0].stationName
setTimeout(() => {
this.doGetIndexSummry({index: 0});
}, 300);
@ -886,30 +897,6 @@ export default {
this.summryAllData = res.result;
let len = this.summryAllData.length;
this.riverList = [];
//计算对比值，2号站数据减1号站
// this.summryAllData.map((item1, index) => {
// if (index % 2 === 0 && item1['datas'] && (index + 1) < len) {
// let data1 = item1['datas'];
// let keys = Object.keys(data1);
// let data2 = this.summryAllData[index + 1]['datas'];
// let data3 = {}
// let item3 = JSON.parse(JSON.stringify(item1));
// if (data2) {
// keys.map(key => {
// if (data1[key] instanceof Array) {
// data3[key] = []
// data1[key].map((itemSub, index) => {
// if (data2[key] && data2[key][index] && data1[key][index]){
// data3[key].push((data2[key][index] - data1[key][index]).toFixed(2))
// }
// })
// }
// })
// item3['datas'] = data3;
// this.riverList.push(item3);
// }
// }
// });
setTimeout(() => {
this.$nextTick(() => { // 加载echarts图
this.initEchartData(this.echartIndex)
@ -931,7 +918,6 @@ export default {
if (this.echartInit[domKey]) {
this.echartInit[domKey].dispose()
}
// console.log('初始化echart：', index, domKey, data, /^\d+$/.test(index) ,this.echartInit[domKey])
let divDom = document.getElementById(domKey);
if (!divDom) {
console.log('没找到dom,两秒后重试：', domKey, divDom)
@ -961,7 +947,6 @@ export default {
data: item.value,
type: 'line',
stack: '',
// areaStyle: { color: item.color },
lineStyle: {
color: item.color // 设置线的颜色为红色
},
@ -1053,20 +1038,11 @@ export default {
// 跳转页面3
jumpStationPage(e) {
let stationCode = e.stationCode
// if (e.stationType == 'livestock') {
// this.$router.push({path: '/CqyzList', query: {stationCode: stationCode}})
// // this.$message({
// // message: '站点正在建设中......',
// // showClose: true,
// // });
// } else {
this.$router.push({path: '/MywrList', query: {stationCode: stationCode}})
// }
},
// 弹窗退出登录
handleClosetuichu(done) {
this.dialogVisible = false
// window.sessionStorage.clear();
localStorage.clear()
this.$router.push({path: '/Login'})
},
@ -1131,10 +1107,6 @@ export default {
item.setzIndex((that.lastZIndex+=2));
});
that.aMap.setFitView(arr, false, [200, 500, 360, 360], 16);
// setTimeout(() => {
// let temp = that.aMap.getCenter();//矫正显示标点位置在正中心
// that.aMap.setZoomAndCenter(that.aMap.getZoom()-2, [temp.lng, temp.lat - 0.15]);
// },2000)
} else {
that.aMap.setFitView(null, false, [100, 400, 360, 360], 16);
}