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

添加土壤数据弹窗50%

This commit is contained in:
wgx 2025-12-02 19:55:20 +08:00
parent 22fdef3237
commit feda83f227
5 changed files with 513 additions and 517 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -419,9 +419,6 @@
color:#cce21d ;
display: block;
}
.mywrcov_onenumjx{
font-size: 1.4vw;
}
.mywrcov_three{
width:33%;
height: 4.5vw;
@ -485,17 +482,6 @@
margin-left: 1%;
margin-bottom: 0.4vw;
}
.jcsssj_rt_time{
font-size: 0.8vw;
display: inline-block;
width: 28%;
overflow: hidden;
color: #fff;
margin-top: 0.2vw;
float: right;
margin-top: 0.4vw;
line-height: 1.5vw;
}
.jcsssj_rtbiao{
display: inline-block;
font-size: 0.8vw;
@ -505,28 +491,41 @@
padding: 0 0.2vw;
margin-left: 2%;
float: left;
/*width: 34%;*/
}
.jcsssj_rt_num{
display: inline-block;
font-size: 0.8vw;
color: #48c944;
margin-left: 10%;
margin-left: 5%;
text-align: right;
width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: right;
/*width: 74%;*/
}
.jcsssj_rt_time{
font-size: 0.6vw;
display: inline-block;
width: 28%;
overflow: hidden;
color: #fff;
float: right;
margin-top: 0.4vw;
line-height: 1.5vw;
}
.jcsssj_rt_numsy{
display: inline-block;
font-size: 0.8vw;
color: #48c944;
margin-left: 10%;
margin-left: 20px;
text-align: right;
width: 40%;
/*width: 40%;*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: right;
}
.zlxg{
position: relative;

4
src/components/SoilDialog.vue
View File

@ -17,7 +17,7 @@
alt=""
/>
<div class="tz_cov_topchanye">
<span class="tz_cov_top_tit">土壤环境监测</span>
<span class="tz_cov_top_tit">长期定位监测</span>
</div>
<el-row class="tz_cov_topyqjs">
<el-col :span="9">
@ -82,7 +82,7 @@
</div>
</div>
<div id="columnTrEchart" v-show="(echartOrTable=='1')" style="width: 100%; height: 480px;"></div>
<el-table v-if="allData" v-show="!(echartOrTable=='1')" :data="allData.tableData" default-sort="{ prop: 'dates', order: 'descending' }"
<el-table v-if="allData" v-show="!(echartOrTable=='1')" :data="allData.tableData" :default-sort="{ prop: 'dates', order: 'descending' }"
row-class-name="tableRowClassName" cell-class-name="tableRowClassName" header-row-class-name="tableRowClassName" header-cell-class-name="tableRowClassName"
height="580" border size="mini">
<el-table-column :prop="`dates`" label="日期" width="92" ></el-table-column>

413
src/components/TaizhangDialog.vue Normal file
View File

@ -0,0 +1,413 @@
<template>
<!-- 台账弹窗 -->
<el-dialog width="60%" :visible.sync="dialogTableVisible" @close="qcguanbi">
<div>
<div class="tz_cov" >
<img src="@/assets/image/guanbi.png" class="guanbiann" @click="qcguanbi" alt="">
<div class="tz_cov_top">
<span class="tz_cov_top_tit">农业废弃物治理台账</span>
</div>
<div class="tz_cov_left">
<div class="tz_cov_left_tit">
<span class="tz_cov_left_tit_text">关键指标</span>
</div>
<div class="tz_cov_left_bincov">
<!-- <div class="tz_cov_left_bin">-->
<!-- </div>-->
<div id="mainEchartDiv" class="tz_cov_left_echart"></div>
</div>
</div>
<div class="tz_cov_right">
<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="tzsanguang" alt="">
<img src="@/assets/image/sanguang.png" class="tzsanguangbt" alt="">
<div style="overflow:hidden;line-height:2vw;">
<div class="tz_cov_left_tit" @click="switchFlag(true)">
<span class="tz_cov_left_tit_text" :style="{color:(flag)?'#eddf0f':'#a39090'}">畜禽粪污治理台账</span>
</div>
<div class="tz_cov_left_tit" @click="switchFlag(false)">
<span class="tz_cov_left_tit_text" :style="{color:(!flag)?'#eddf0f':'#a39090'}">农田治理废弃物台账</span>
</div>
<span class="tz_cov_right_num">累计
<span class="tz_cov_right_num_big">{{ flag?ntfmnumbtotal:qcfmnumbtotal }}</span> 条
</span>
</div>
<table class="tz_cov_right_tab" v-if="!flag">
<tr class="tz_cov_right_tab_tit" style="width:100%;">
<th style="width:15%;">采样时间</th>
<th style="width:18%;">监测站</th>
<th style="width:15%;">作物</th>
<th style="width:15%;">农膜残留量(kg/h㎡)</th>
<th style="width:10%;">秸秆残留量(kg/h㎡)</th>
<th style="width:32%;">覆膜年份</th>
</tr>
<img src="@/assets/image/noneNumber.png" class="noneNumber" alt="" v-if="ntfmnumbtotal == 0">
<template v-else>
<tr class="tz_cov_right_tab_list" v-for="item in ntfmnumblist" :key="item.id">
<td>{{ item.sampTime }}</td>
<td>{{ item.stationName }}</td>
<td>{{ item.cropName }}</td>
<td>{{ item.mulchRemain }}</td>
<td>{{ item.strawRemain }}</td>
<td>{{ item.mulchYear }}</td>
</tr>
</template>
</table>
<table class="tz_cov_right_tab" v-if="flag">
<tr class="tz_cov_right_tab_tit" style="width:100%;">
<th style="width:10%;">年份</th>
<th style="width:20%;">养殖场名称</th>
<th style="width:10%;">养殖品种</th>
<th style="width:10%;">现有存栏（只）</th>
<th style="width:10%;">固体粪便（吨）</th>
<th style="width:10%;">液体粪污（m³）</th>
<th style="width:10%;">混合粪污（m³）</th>
<th style="width:10%;">收入金额(元)</th>
</tr>
<img src="@/assets/image/noneNumber.png" class="noneNumber" alt="" v-if="qcfmnumbtotal == 0">
<template v-else>
<tr class="tz_cov_right_tab_list" v-for="item in qcfmnumblist" :key="item.id">
<td style="width:10%;">{{ item.countYear }}</td>
<td style="width:20%;">{{ item.farmName }}</td>
<td style="width:10%;">{{ item.breedVariety }}</td>
<td style="width:10%;">{{ item.breedScale }}</td>
<td style="width:10%;">{{ item.fecesQuantity }}</td>
<td style="width:10%;">{{ item.urineQuantity }}</td>
<td style="width:10%;">{{ item.mixQuantity }}</td>
<td style="width:10%;">{{ item.chargeAmount }}</td>
</tr>
</template>
</table>
</div>
</div>
</div>
</el-dialog>
</template>
<script>
import {fwlist, ntfmlist} from "@/api";
export default {
props: {
resourcedirect: {
type: Array,
default: []
},
},
components: {},
data() {
return {
flag: true,
dialogTableVisible: true,
ntfmnumbtotal: 0,
ntfmnumblist: [],
qcfmnumblist: [],
qcfmnumbtotal: 0,
resourcedirect2:[],
resourcedirect3:[],
echartObj: null,
}
},
mounted() {
this.fwlistcover()
},
methods: {
switchFlag(v){
this.flag = v;
this.tzalin();
},
fwlistcover() {
ntfmlist().then(res => {
this.ntfmnumblist = res.result.records
this.ntfmnumbtotal = res.result.total
if(this.ntfmnumblist && this.ntfmnumblist.length > 0) {
//mulchRemain
let value1 = 0; //农膜残留量
let value2 = 0; //秸秆残留量
this.ntfmnumblist.map(item => {
value1 += (item.mulchRemain-0);
if(item.strawRemain){
value2 += (item.strawRemain-0);
}
})
this.resourcedirect3.push({
name: '农膜残留量',
value: value1
})
this.resourcedirect3.push({
name: '秸秆残留量',
value: value2
})
}
});
//粪污数据
fwlist().then(res => {
this.qcfmnumblist = res.result.records
this.qcfmnumbtotal = res.result.total
if(this.qcfmnumblist && this.qcfmnumblist.length > 0) {
let value1 = 0; //固体
let value2 = 0; //液体
let value3 = 0; //混合
this.qcfmnumblist.map(item => {
value1 += (item.fecesQuantity-0);
value2 += (item.urineQuantity-0);
value3 += (item.mixQuantity-0);
})
this.resourcedirect2.push({
name: '固体粪污',
value: value1
})
this.resourcedirect2.push({
name: '液体粪污',
value: value2
})
this.resourcedirect2.push({
name: '混合粪污',
value: value3
})
}
this.tzalin();
})
},
tzalin() {//echart init
let data = this.flag ? this.resourcedirect2 : this.resourcedirect3;
console.log(data)
this.$nextTick(() => {
if (this.echartObj) {
// this.echartObj.dispose();
} else {
this.echartObj = this.$echarts.init(document.getElementById('mainEchartDiv'));
}
//配置图表
var option = {
tooltip: {
trigger: 'item'
},
legend: {
bottom: '-2%',
left: 'center',
itemWidth: 20,
itemHeight: 10,
textStyle: {
color: '#fff' // 图例文字颜色
},
},
series: [
{
name: '',
type: 'pie',
radius: ['40%', '50%'],
avoidLabelOverlap: false,
emphasis: {
label: {
show: false,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
normal: {
show: true // show设置线是否显示，默认为true，可选值：true ¦ false
}
},
// 设置值域的标签
label: {
normal: {
position: 'outer',
formatter: '{b} : {c}个 '
},
textStyle: {
color: '#595959', // 提示文字颜色
fontSize: 18, // 提示文字大小
}
},
data: data,
}
]
};
this.echartObj.setOption(option);
});
},
qcguanbi (){
this.$emit('close')
}
}
}
</script>
<style scoped>
.tz_cov {
width: 1110px;
height: 600px;
margin: 0 auto;
/* margin-top: 4vw; */
border: 1px solid #0169d0;
position: relative;
background: rgba(16, 45, 80, 0.9);
box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
}
.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;
}
.tz_cov_left {
width: 35%;
float: left;
}
.tz_cov_right {
width: 65%;
float: right;
}
.tz_cov_left_tit {
width: 11vw;
height: 2vw;
text-align: left;
padding-left: 3%;
line-height: 2vw;
background: url(../assets/image/tz_title2_bg.png) no-repeat;
background-size: cover;
margin-left: 2vw;
float:left;
cursor:pointer;
}
.tz_cov_left_tit_text {
font-size: 0.9vw;
font-weight: 500;
color: #E5EEFA;
}
.tz_cov_left_bincov {
position: relative;
width: 100%;
height: 16vw;
}
.tz_cov_left_echart {
background: url(../assets/image/tz_binzhuangtu_bg.png) no-repeat;
background-repeat: no-repeat;
background-position: center;
background-size: 196px 210px; /* 放大到指定像素 */
width: 100%;
height: 13.5vw;
position: absolute;
z-index: 2;
left: 18px;
top: 66px;
}
.tz_cov_right_num {
font-size: 0.9vw;
float: right;
font-weight: 500;
color: #B3C1D1;
margin-right: 3%;
}
.tz_cov_right_num_big {
color: #FFF220;
font-size: 1.5vw;
font-family: HYChangLiSongKeBen;
}
.tz_cov_right_tab {
width: 92%;
height: 20vw;
overflow: auto;
display: block;
margin-left: 5%;
margin-top: 1vw;
}
/* 定义滚动条样式 */
.tz_cov_right_tab::-webkit-scrollbar {
width: 2px;
height: 2px;
background-color: rgba(240, 240, 240, 0.1);
}
/*定义滚动条轨道 内阴影+圆角*/
.tz_cov_right_tab::-webkit-scrollbar-track {
box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
border-radius: 10px;
background-color: rgba(240, 240, 240, .5);
}
/*定义滑块 内阴影+圆角*/
.tz_cov_right_tab::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 0px rgba(87, 146, 255, .8);
background-color: rgba(87, 146, 255, .8);
}
.tz_cov_right_tab_tit {
width: 100%;
height: 1.8vw;
background: rgba(27, 63, 112, 1);
font-size: 0.8vw;
font-weight: 400;
color: #5792FF;
position: sticky;
top: -3px; /* 固定表头位置 */
}
.tz_cov_right_tab_tit th {
width: 20%;
height: 1.8vw;
border: 1px solid #285A93;
}
.tz_cov_right_tab_list {
width: 100%;
height: 1.8vw;
background: rgba(80, 131, 246, 0);
font-size: 0.8vw;
font-weight: 400;
color: #5792FF;
}
.tz_cov_right_tab_list td {
width: 20%;
height: 1.8vw;
text-align: center;
border: 1px solid #285A93;
color: #fff;
}
.noneNumber {
width: 30%;
margin: 0 auto;
display: block;
margin-top: 60px;
}
</style>

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

@ -98,7 +98,7 @@
<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_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>个
@ -179,7 +179,7 @@
</div>
<div class="scdlist" @click="switchIcon('soil')">
<img src="@/assets/image/soil.png" class="xcdimg" alt="">
<span class="scdlist_tit">土壤监测点</span>
<span class="scdlist_tit">长期定位监测</span>
</div>
</div>
<transition enter-active-class="animate__animated animate__backInUp"
@ -243,7 +243,7 @@
<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 mywrcov_onehover"
<span class="in1con_lf_titshow1 "
@click="addTask3(item)">{{ item.stationName }}</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div>
@ -277,13 +277,13 @@
</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>
<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="">
<!-- <span class="in1con_lf_titshow2 " style="">台账>></span>-->
</div>
<div class="mywrcov">
<!-- <div class="mywrcov_one mywrcov_onehover" @click="tzqcalin">-->
<div class="mywrcov_one mywrcov_onehover">
<div class="mywrcov_one " >
<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>
@ -294,14 +294,13 @@
<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="tzalin">-->
<div class="mywrcov_three mywrcov_onehover" >
<div class="mywrcov_three ">
<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 ">
<span class="mywrcov_onenum" style="margin-top: 1vw;"><span
<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>
@ -316,7 +315,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)">
@ -335,7 +334,7 @@
</span>
<!-- <img src="@/assets/image/up.png" class="jcsssj_rt_up" alt=""> -->
</div>
<span class="jcsssj_rt_time">{{ item.dataDateTime }}</span>
<span class="jcsssj_rt_time">{{ item.dataDateTime?item.dataDateTime.substring(0,16):'--' }}</span>
</div>
</div>
</vue-seamless-scroll>
@ -345,63 +344,6 @@
</template>
</transition>
</div>
<!-- 台账弹窗 -->
<el-dialog width="60%" :visible.sync="dialogTableVisible">
<div class="tz_cov">
<img src="@/assets/image/guanbi.png" class="guanbiann" @click="qcguanbi" alt="">
<div class="tz_cov_top">
<span class="tz_cov_top_tit">农业废弃物台账</span>
</div>
<div class="tz_cov_left">
<div class="tz_cov_left_tit">
<span class="tz_cov_left_tit_text">主要农业废弃物类型</span>
</div>
<div class="tz_cov_left_bincov">
<div class="tz_cov_left_bin">
</div>
<div id="main" class="tz_cov_left_bineca"></div>
</div>
</div>
<div class="tz_cov_right">
<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="tzsanguang" alt="">
<img src="@/assets/image/sanguang.png" class="tzsanguangbt" alt="">
<div style="overflow:hidden;line-height:2vw;">
<div class="tz_cov_left_tit" style="float:left;">
<span class="tz_cov_left_tit_text">废弃农膜采样信息</span>
</div>
<span class="tz_cov_right_num">累计 <span
class="tz_cov_right_num_big">{{ ntfmnumbtotal }}</span> 条 </span>
</div>
<table class="tz_cov_right_tab">
<tr class="tz_cov_right_tab_tit" style="width:100%;">
<th style="width:20%;">采样时间</th>
<th style="width:30%;">监测站</th>
<th style="width:10%;">作物</th>
<th style="width:30%;">农膜残留量(kg/h㎡)</th>
<th style="width:10%;">覆膜年份</th>
</tr>
<img src="@/assets/image/noneNumber.png" class="noneNumber" alt="" v-if="ntfmnumbtotal == 0">
<template v-else>
<tr class="tz_cov_right_tab_list" v-for="item in ntfmnumblist" :key="item.id">
<td>{{ item.sampTime }}</td>
<td>{{ item.stationName }}</td>
<td>{{ item.cropName }}</td>
<td>{{ item.mulchRemain }}</td>
<td>{{ item.mulchYear }}</td>
</tr>
</template>
</table>
</div>
</div>
</el-dialog>
<!-- 监测站弹窗 -->
<el-dialog :visible.sync="qcdtdialogTableVisible">
<div class="jctc" id="modal1123123">
@ -425,6 +367,10 @@
<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>
@ -447,68 +393,6 @@
<img src="@/assets/image/ljjr.png" class="ljjr" @click="addTask3(qcdtinfor)" alt="">
</div>
</el-dialog>
<!-- 台账禽畜弹窗 -->
<el-dialog width="60%" :visible.sync="qcdialogTableVisible">
<div class="tz_cov">
<img src="@/assets/image/guanbi.png" class="guanbiann" @click="qcguanbi" alt="">
<div class="tz_cov_top">
<span class="tz_cov_top_tit">畜禽粪污台账</span>
</div>
<div class="tz_cov_left">
<div class="tz_cov_left_tit">
<span class="tz_cov_left_tit_text">资源化利用方向</span>
</div>
<div class="tz_cov_left_bincov">
<div class="tz_cov_left_bin">
</div>
<div id="main" class="tz_cov_left_bineca"></div>
</div>
</div>
<div class="tz_cov_right">
<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="tzsanguang" alt="">
<img src="@/assets/image/sanguang.png" class="tzsanguangbt" alt="">
<div style="overflow:hidden;line-height:2vw;">
<div class="tz_cov_left_tit" style="float:left;">
<span class="tz_cov_left_tit_text">粪污台账</span>
</div>
<span class="tz_cov_right_num">累计 <span
class="tz_cov_right_num_big">{{ qcfmnumbtotal }}</span> 条 </span>
</div>
<table class="tz_cov_right_tab">
<tr class="tz_cov_right_tab_tit" style="width:100%;">
<th style="width:10%;">年份</th>
<th style="width:20%;">养殖场名称</th>
<th style="width:10%;">养殖品种</th>
<th style="width:10%;">现有存栏</th>
<th style="width:10%;">固体粪便</th>
<th style="width:10%;">液体粪污</th>
<th style="width:10%;">混合粪污</th>
<th style="width:10%;">收入金额</th>
</tr>
<img src="@/assets/image/noneNumber.png" class="noneNumber" alt="" v-if="qcfmnumbtotal == 0">
<template v-else>
<tr class="tz_cov_right_tab_list" v-for="item in qcfmnumblist" :key="item.id">
<td style="width:10%;">{{ item.countYear }}</td>
<td style="width:20%;">{{ item.farmName }}</td>
<td style="width:10%;">{{ item.breedVariety }}</td>
<td style="width:10%;">{{ item.breedScale }}</td>
<td style="width:10%;">{{ item.fecesQuantity }}</td>
<td style="width:10%;">{{ item.urineQuantity }}</td>
<td style="width:10%;">{{ item.mixQuantity }}</td>
<td style="width:10%;">{{ item.chargeAmount }}</td>
</tr>
</template>
</table>
</div>
</div>
</el-dialog>
<!-- 企业弹窗 -->
<el-dialog :visible.sync="qyinfordtdialogTableVisible">
<div class="tz_cov" style="height:25vw;">
@ -539,7 +423,8 @@
</el-dialog>
</div>
<SoilDialog v-if="soidShowFlag" :soilDataId="soilDataId" @close="soidShowFlag=false"/>
<SingleEchartDialog v-if="singleEchartDialogShowFlag" :item="singleEchartData" @close="singleEchartDialogShowFlag=false"/>
<SingleEchartDialog v-if="singleEchartDialogShowFlag" :item="singleEchartData" @close="singleEchartDialogShowFlag=false"/>
<TaizhangDialog v-if="taizhangDialogShowFlag" :resourcedirect="resourcedirect" @close="taizhangDialogShowFlag=false"/>
</ScaleBox>
</template>
@ -563,10 +448,12 @@ import hefentianqi from '@/pages/weather/weather.vue'
import SoilDialog from '@/components/SoilDialog.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,
@ -575,6 +462,7 @@ export default {
},
data() {
return {
taizhangDialogShowFlag: false,
singleEchartDialogShowFlag: false,
singleEchartData: null,
aMap: null,
@ -593,10 +481,6 @@ export default {
roll_info: [],
stationInfoList: [],
wrwcode: [],
ntfmnumblist: [],
ntfmnumbtotal: '',
qcfmnumblist: [],
qcfmnumbtotal: '',
getPollutionDictCover: [],
effect_assess0: '',
effect_assess0Value: 0,
@ -686,11 +570,11 @@ export default {
},
mounted() {
console.log('开始初始化！！！！')
setTimeout(() => {
this.$nextTick(() => {
this.indexinfor();
})
}, 2000)
// setTimeout(() => {
// this.$nextTick(() => {
// this.indexinfor();
// })
// }, 2000)
// 实时时间
setTimeout(() => {
this.$nextTick(() => {
@ -915,158 +799,6 @@ export default {
});
})
},
tzalin() {//农业台账
this.dialogTableVisible = true
this.fwlistcover()
this.$nextTick(() => {
var myChart = this.$echarts.init(document.getElementById('main'));
//配置图表
var option = {
tooltip: {
trigger: 'item'
},
legend: {
bottom: '-2%',
left: 'center',
itemWidth: 20,
itemHeight: 10,
textStyle: {
color: '#fff' // 图例文字颜色
},
},
series: [
{
name: '',
type: 'pie',
radius: ['40%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
// borderRadius: 10,
// borderColor: '#fff',
// borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: true
},
labelLine: {
normal: {
show: true // show设置线是否显示，默认为true，可选值：true ¦ false
}
},
// 设置值域的标签
label: {
normal: {
position: 'outer', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
// formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ，默认显示{b}
// {a}指series.name {b}指series.data的name
// {c}指series.data的value {d}%指这一部分占总数的百分比
formatter: '{b} : {c}个 '
},
textStyle: {
color: '#595959', // 提示文字颜色
fontSize: 18, // 提示文字大小
}
},
data: this.resourcedirect,
}
]
};
myChart.setOption(option);
});
},
tzqcalin() {//台账禽畜弹窗
this.qcdialogTableVisible = true
this.qclistcover()
this.$nextTick(() => {
var myChart = this.$echarts.init(document.getElementById('main'));
//配置图表
var option = {
tooltip: {
trigger: 'item'
},
legend: {
bottom: '-2%',
left: 'center',
itemWidth: 20,
itemHeight: 10,
textStyle: {
color: '#fff' // 图例文字颜色
},
},
series: [
{
name: '',
type: 'pie',
radius: ['40%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
// borderRadius: 10,
// borderColor: '#fff',
// borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: true
},
labelLine: {
normal: {
show: true // show设置线是否显示，默认为true，可选值：true ¦ false
}
},
// 设置值域的标签
label: {
normal: {
position: 'outer', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
// formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ，默认显示{b}
// {a}指series.name {b}指series.data的name
// {c}指series.data的value {d}%指这一部分占总数的百分比
formatter: '{b} : {c}个 '
},
textStyle: {
color: '#595959', // 提示文字颜色
fontSize: 18, // 提示文字大小
}
},
data: this.resourcedirect,
}
]
};
myChart.setOption(option);
});
},
fwlistcover() {
ntfmlist().then(res => {
this.ntfmnumblist = res.result.records
this.ntfmnumbtotal = res.result.total
})
},
qclistcover() {
fwlist().then(res => {
this.qcfmnumblist = res.result.records
this.qcfmnumbtotal = res.result.total
})
},
getNewestDataList() {
getNewestData().then(res => {
this.listData = res.result.soilHisSurvData
@ -1391,170 +1123,14 @@ export default {
font-family: douyuFont;
}
.tz_cov_left {
width: 35%;
float: left;
}
.tz_cov_right {
width: 65%;
float: right;
}
.tz_cov_left_tit {
width: 11vw;
height: 2vw;
text-align: left;
padding-left: 3%;
line-height: 2vw;
background: url(../../assets/image/tz_title2_bg.png) no-repeat;
background-size: cover;
margin-left: 2vw;
}
.tz_cov_left_tit_text {
font-size: 0.9vw;
font-weight: 500;
color: #E5EEFA;
}
.tz_cov_left_bincov {
position: relative;
width: 100%;
height: 16vw;
}
.tz_cov_left_bin {
width: 9vw;
height: 9vw;
background: url(../../assets/image/tz_binzhuangtu_bg.png) no-repeat;
background-size: cover;
position: absolute;
top: 42px;
left: 28.5%;
z-index: 1;
}
.tz_cov_left_bineca {
width: 100%;
height: 13.5vw;
position: absolute;
top: 0;
left: 0%;
z-index: 2;
}
.tz_cov_right_num {
font-size: 0.9vw;
float: right;
font-weight: 500;
color: #B3C1D1;
margin-right: 3%;
}
.tz_cov_right_num_big {
color: #FFF220;
font-size: 1.5vw;
font-family: HYChangLiSongKeBen;
}
.tz_cov_right_tab {
width: 92%;
height: 20vw;
overflow: auto;
display: block;
margin-left: 5%;
margin-top: 1vw;
}
/* 定义滚动条样式 */
.tz_cov_right_tab::-webkit-scrollbar {
width: 2px;
height: 2px;
background-color: rgba(240, 240, 240, 0.1);
}
/*定义滚动条轨道 内阴影+圆角*/
.tz_cov_right_tab::-webkit-scrollbar-track {
box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
border-radius: 10px;
background-color: rgba(240, 240, 240, .5);
}
/*定义滑块 内阴影+圆角*/
.tz_cov_right_tab::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 0px rgba(87, 146, 255, .8);
background-color: rgba(87, 146, 255, .8);
}
.tz_cov_right_tab_tit {
width: 100%;
height: 1.8vw;
background: rgba(27, 63, 112, 1);
font-size: 0.8vw;
font-weight: 400;
color: #5792FF;
position: sticky;
top: -3px; /* 固定表头位置 */
}
.tz_cov_right_tab_tit th {
width: 20%;
height: 1.8vw;
border: 1px solid #285A93;
}
.tz_cov_right_tab_list {
width: 100%;
height: 1.8vw;
background: rgba(80, 131, 246, 0);
font-size: 0.8vw;
font-weight: 400;
color: #5792FF;
}
.tz_cov_right_tab_list td {
width: 20%;
height: 1.8vw;
text-align: center;
border: 1px solid #285A93;
color: #fff;
}
.mywrcov_onehover {
cursor: pointer;
}
/* 台账弹窗结束 */
.boxRader {
position: relative;
width: 100%;
height: 80%;
}
.centerBox {
width: 76%;
margin-right: 15px;
background: transparent;
}
.boxFont {
font-size: 1.2vw;
}
.centerMainBox1 {
width: 100%;
height: 60.5%;
}
.centerMainBox2 {
width: 100%;
height: 38.5%;
position: relative;
margin-top: 15px;
}
.centerMainBox2 img {
position: absolute;
@ -1562,15 +1138,6 @@ export default {
height: 100%;
}
.boxTitle2 {
width: 100%;
height: 10%;
font-size: .6vw;
text-align: center;
line-height: 10%;
margin-top: 1vw;
color: #0efcff;
}
.boxLis {
width: 70%;
@ -1974,12 +1541,6 @@ a:hover {
background: none;
}
.noneNumber {
width: 30%;
margin: 0 auto;
display: block;
margin-top: 60px;
}
.in1con_lf_titshow1 {
font-size: 1vw;
@ -1993,6 +1554,19 @@ a:hover {
width: 100%;
text-align: center;
}
.in1con_lf_titshow2 {
font-size: 11px;
color: #fff;
text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
//font-family: douyuFont;
position: absolute;
top: 1.3vw;
right: 18px;
display: block;
width: 100%;
text-align: right;
cursor: pointer;
}
</style>
<style>
@ -2276,5 +1850,8 @@ a:hover {
left: 456px;
}
.mywrcov_onenumjx{
font-size: 1.2vw;
}
</style>

71
src/pages/MywrList/index.vue
View File

@ -74,19 +74,23 @@
<img src="@/assets/image/jctcicon1.png" class="jctcicon1" alt="">
<span class="jctcvban_tit">站点名称：{{ DetailList.stationName }}</span>
</div>
<div class="jctc_add">
<img src="@/assets/image/jctcicon2.png" class="jctcicon1" alt="">
<span class="jctcvban_tit">建站时间：{{ DetailList.buildTime }}</span>
</div>
<div class="jctc_add">
<img src="@/assets/image/jctcicon3.png" class="jctcicon1" alt="">
<span class="jctcvban_tit">站点位置：{{ DetailList.stationLocation }} </span>
</div>
<div class="jctc_add">
<img src="@/assets/image/jctcicon2.png" class="jctcicon1" alt="">
<span class="jctcvban_tit">建站时间：{{ DetailList.buildTime }}</span>
</div>
<!-- <div class="jctc_add">
<img src="@/assets/image/jctcicon2.png" class="jctcicon1" alt="">
<span class="jctcvban_tit">监测范围：{{DetailList.survRange}}</span>
</div> -->
<div class="jctc_add" style="height:6vw;margin-top:0vw;">
<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" style="height:2vw;">
<img src="@/assets/image/jctcicon4.png" class="jctcicon1" alt="">
<span class="jctcvban_tit">监测指标</span>
<span class="jctc_text" v-for="(item,index) in DetailList.survColorItems" :key="index"
@ -128,20 +132,21 @@
<span class="in1con_lf_titshow">重要污染实时监测</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div>
<ul class="liMarqueeUp" style="height:226px;overflow:hidden;" @click="showEchartDialog($event, 1)" >
<ul class="liMarqueeUp" style="height:206px;overflow:hidden;" @click="showEchartDialog($event, 1)" >
<vue-seamless-scroll :data="DetailList.latestData" class="wp-1 hp-1" :class-option="classOption">
<li class="jcsssj2" v-for="(item,index) in DetailList.latestData" :key="index"
:data-survItem="item.survItem" >
<img src="@/assets/image/xian2.png" class="jcsssj_xian2" alt="">
<div class="jcsssj_rt" style="display:block;">
<div class="jcsssj_rt" >
<!-- @click="showEchartDialog(item.survItem)" -->
<div style="float: left;width: 50%;">
<div style="float: left;width: 60%;">
<span class="jcsssj_rtbiao" :style="{background:(item.color)}">{{ item.name }}</span>
<span class="jcsssj_rt_num"><span
class="in1con_lf_imglf_num_jix">{{ item.value }}</span>{{ item.unit }}</span>
<span class="jcsssj_rt_num">
<span class="in1con_lf_imglf_num_jix">{{ item.value }}</span>{{ item.unit }}
</span>
<!-- <img src="@/assets/image/up.png" class="jcsssj_rt_up" alt=""> -->
</div>
<span class="jcsssj_rt_time">{{ item.dataDateTime }}</span>
<span class="jcsssj_rt_time" style="float: right;">{{ item.dataDateTime?item.dataDateTime.substring(0,16):'--' }}</span>
</div>
</li>
</vue-seamless-scroll>
@ -196,34 +201,34 @@
</div>
<div>
<div class="changguiwucanshu">
<div>
<div class="wucanshuDiv" @click="showEchartDialog(DetailList,'dataWaterTemp')">
<div @click="showEchartDialog(DetailList,'dataWaterTemp')">
<div class="wucanshuDiv">
<div class="wucanshuValueDiv">{{ DetailList.latestWaterData[0].dataWaterTemp }}<span class="typeStyle">℃</span></div>
</div>
<div class="wucanshuNameDiv">水温</div>
</div>
<div>
<div class="wucanshuDiv" @click="showEchartDialog(DetailList,'dataWaterPh')">
<div @click="showEchartDialog(DetailList,'dataWaterPh')">
<div class="wucanshuDiv">
<div class="wucanshuValueDiv">{{ DetailList.latestWaterData[0].dataWaterPh }}<span class="typeStyle"></span></div>
</div>
<div class="wucanshuNameDiv">PH值</div>
</div>
</div>
<div class="changguiwucanshu" >
<div>
<div class="wucanshuDiv" @click="showEchartDialog(DetailList,'dataWaterDo')">
<div @click="showEchartDialog(DetailList,'dataWaterDo')">
<div class="wucanshuDiv">
<div class="wucanshuValueDiv">{{ DetailList.latestWaterData[0].dataWaterDo }}<span class="typeStyle">mg/L</span></div>
</div>
<div class="wucanshuNameDiv">溶解氧</div>
</div>
<div>
<div class="wucanshuDiv" @click="showEchartDialog(DetailList,'dataWaterDdl')">
<div @click="showEchartDialog(DetailList,'dataWaterDdl')">
<div class="wucanshuDiv">
<div class="wucanshuValueDiv">{{ DetailList.latestWaterData[0].dataWaterDdl }}<span class="typeStyle">μS/cm</span></div>
</div>
<div class="wucanshuNameDiv">电导率</div>
</div>
<div>
<div class="wucanshuDiv" @click="showEchartDialog(DetailList,'dataWaterNtu')">
<div @click="showEchartDialog(DetailList,'dataWaterNtu')">
<div class="wucanshuDiv">
<div class="wucanshuValueDiv">{{ DetailList.latestWaterData[0].dataWaterNtu }}<span class="typeStyle">NTU</span></div>
</div>
<div class="wucanshuNameDiv">浊度</div>
@ -1271,6 +1276,7 @@ export default {
height: 2.4vw;
background: #0c2139;
float: right;
display:block;
}
.jcsssj_rt_tit {
@ -1285,15 +1291,15 @@ export default {
}
.jcsssj_rt_time {
font-size: 0.8vw;
display: inline-block;
width: 48%;
overflow: hidden;
color: #dbe8fb;
margin-right: 0.2vw;
//font-size: 0.8vw;
//display: inline-block;
//width: 38%;
//overflow: hidden;
//color: #dbe8fb;
//margin-right: 0.2vw;
/* float:right; */
margin-top: 0.6vw;
text-align: right;
//margin-top: 0.6vw;
//text-align: right;
}
.jcsssj_rtbiao {
@ -1311,7 +1317,7 @@ export default {
display: inline-block;
font-size: 0.8vw;
/* color: #fff; */
margin-left: 5%;
margin-left: 10px;
text-align: right;
margin-top: 0.4vw;
}
@ -1509,7 +1515,8 @@ export default {
border-radius: 0.2vw;
background: #46a385;
margin-left: 0.8vw;
margin-top: 0vw;
margin-top: 0vw !important;
margin-bottom: 10px !important;
color: #fff;
}
@ -2275,7 +2282,7 @@ a:hover {
.changguiwucanshu {
display: flex;
justify-content: center;
cursor: pointer;
.wucanshuDiv {
width: 144px;
height: 104px;