添加土壤数据弹窗50%

src/assets/css/index.css

@@ -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;

src/components/SoilDialog.vue

@@ -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>

src/components/TaizhangDialog.vue

@@ -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>

src/pages/Home/index.vue

@@ -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 ">
+                <div class="in1con_lf_tit " style="cursor: pointer;"  @click="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>
                 <div class="mywrcov">
-<!--                  <div class="mywrcov_one mywrcov_onehover" @click="tzqcalin">-->
+                  <div class="mywrcov_one " >
-                  <div class="mywrcov_one mywrcov_onehover">
                     <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 ">
-                  <div class="mywrcov_three mywrcov_onehover" >
                     <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 ">
+                  <div class="mywrcov_four mywrcov_onehover" @click="taizhangDialogShowFlag=true">
-                    <span class="mywrcov_onenum" style="margin-top: 1vw;"><span
+                    <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(() => {
+    // setTimeout(() => {
-      this.$nextTick(() => {
+    //   this.$nextTick(() => {
-        this.indexinfor();
+    //     this.indexinfor();
-      })
+    //   })
-    }, 2000)
+    // }, 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>

src/pages/MywrList/index.vue

@@ -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
+                              <span class="jcsssj_rt_num">
-                                  class="in1con_lf_imglf_num_jix">{{ item.value }}</span>{{ item.unit }}</span>
+                                <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 @click="showEchartDialog(DetailList,'dataWaterTemp')">
-                  <div class="wucanshuDiv" @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 @click="showEchartDialog(DetailList,'dataWaterPh')">
-                  <div class="wucanshuDiv" @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 @click="showEchartDialog(DetailList,'dataWaterDo')">
-                  <div class="wucanshuDiv" @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 @click="showEchartDialog(DetailList,'dataWaterDdl')">
-                  <div class="wucanshuDiv" @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 @click="showEchartDialog(DetailList,'dataWaterNtu')">
-                  <div class="wucanshuDiv" @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;
+  //font-size: 0.8vw;
-  display: inline-block;
+  //display: inline-block;
-  width: 48%;
+  //width: 38%;
-  overflow: hidden;
+  //overflow: hidden;
-  color: #dbe8fb;
+  //color: #dbe8fb;
-  margin-right: 0.2vw;
+  //margin-right: 0.2vw;
   /* float:right; */
-  margin-top: 0.6vw;
+  //margin-top: 0.6vw;
-  text-align: right;
+  //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;