升级播放器版本、增加监控回放、总氮磷COD弹窗

src/pages/CqyzList/index.vue

@@ -439,10 +439,8 @@ export default {
   mounted(){
     // 实时时间
     this.getNowTime();
-	setTimeout(() =>{
+    setTimeout(() =>{this.drawChart();}, 1000)
-	 this.drawChart();
+    this.getliststation()
-	}, 1000)
-	this.getliststation()
   },
   beforeDestroy(){
     if(this.play)this.player.stop();

src/pages/Home/index.vue

@@ -286,22 +286,33 @@
                   <div class="mywrcov_one mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterTp')">
                     <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>
+											<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{  effect_assess0.detailValue }}</span>
+<!--                      <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"-->
+<!--                                      :to="effect_assess0.detailValue" />-->
 										</span>
                   </div>
                   <div class="mywrcov_two mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterTn')">
                     <span class="mywrcov_onetit">{{ effect_assess1.detailCode }}</span>
-                    <span class="mywrcov_onenum"><span
+                    <span class="mywrcov_onenum">
-                        class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess1.detailValue }}</span></span>
+                      <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess1.detailValue }}</span>
+<!--                      <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"-->
+<!--                                      :to="effect_assess0.detailValue" />-->
+                    </span>
                   </div>
                   <div class="mywrcov_three mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterCod')">
-                    <span class="mywrcov_onenum" style="margin-top: 1vw;"><span
+                    <span class="mywrcov_onenum" style="margin-top: 1vw;">
-                        class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess2.detailValue }}</span></span>
+                      <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess2.detailValue }}</span>
+<!--                      <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"-->
+<!--                                      :to="effect_assess0.detailValue" />-->
+                    </span>
                     <span class="mywrcov_onetit">{{ effect_assess2.detailCode }}</span>
                   </div>
                   <div class="mywrcov_four mywrcov_onehover" @click="taizhangDialogShowFlag=true">
-                    <span class="mywrcov_onenum" style="margin-top: 1vw; cursor: pointer"><span
+                    <span class="mywrcov_onenum" style="margin-top: 1vw; cursor: pointer">
-                        class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess3.detailValue }}</span></span>
+                      <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess3.detailValue }}</span>
+<!--                      <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"-->
+<!--                                      :to="effect_assess0.detailValue" />-->
+                    </span>
                     <span class="mywrcov_onetit">{{ effect_assess3.detailCode }}</span>
                   </div>
                   <div class="mywrcovcen">

src/pages/MywrList/index.vue

@@ -5,6 +5,7 @@
       bgc="transparent"
       :delay="100"
       :isFlat="true"
+
   >
     <div class="main2" v-if="stationDetail">
       <video class="fullscreenvideo" id="bgvid" playsinline="" autoplay="" muted="" loop="">
@@ -40,7 +41,7 @@
           </el-dialog>
         </div>
       </div>
-      <div class="content">
+      <div class="content"  v-loading="loading"  element-loading-background="rgba(0, 0, 0, 0.7)" element-loading-spinner="el-icon-loading">
         <div class="centerBox">
           <div class="baseBox centerMainBox1" style="height:100%">
             <div class="baseBoxLeft left baseBoxHjleft">
@@ -54,10 +55,10 @@
                   <span class="in1con_lf_titshow">站点信息</span>
                   <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
                   <!-- <img src="@/assets/image/moreinfor.png" class="in1con_lf_moreimg" alt="" @click="zdinfor"> -->
-                  <span class="in1con_lf_moreimg" @click="zdinfor">详情>></span>
+                  <span class="in1con_lf_moreimg" @click="zdinfor">介绍>></span>
                 </div>
                 <div class="jczcov">
-                  <div style="position: absolute; cursor:pointer; top: 68px;right: 16px;color: rgb(255, 255, 255);z-index: 500;">
+                  <div class="switchLive">
                     <span v-show="!currentPlayerLive" @click="switchLive(true)">录播</span>
                     <span v-show="currentPlayerLive"  @click="switchLive(false)">直播</span>
                   </div>
@@ -66,13 +67,6 @@
                       <div class="jczimg" :id="value.deployCode"></div>
                     </el-carousel-item>
                   </el-carousel>
-                  <!-- <div class="jczcov_lf" v-for="value in stationDetail.deviceList" :key="value.id">
-
-                    <div class="jczimg" :id="value.deployCode" >
-
-                    </div>
-                  </div> -->
-
                 </div>
                 <div class="jctc_add">
                   <img src="@/assets/image/jctcicon1.png" class="jctcicon1" alt="">
@@ -179,6 +173,11 @@
             </div>
           </div>
         </div>
+        <div class="switchStation">
+          <el-select v-model="stationCode" placeholder="切换站点" @change="switchStation" >
+            <el-option v-for="item in stationList" :key="item.stationCode" :label="item.stationName" :value="item.stationCode"></el-option>
+          </el-select>
+        </div>
         <div class="leftBox right baseBoxHjleft" style="width:22.5%">
           <img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
           <img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
@@ -203,17 +202,22 @@
               <span class="in1con_lf_titshow">常规五参数实时监测</span>
               <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
             </div>
-            <div>
+            <div v-if="waterData.dataWaterTemp">
               <div class="changguiwucanshu">
                 <div @click="showEchartDialog(stationDetail,'dataWaterTemp')">
                   <div class="wucanshuDiv">
-                    <div class="wucanshuValueDiv">{{ stationDetail.latestWaterData[0].dataWaterTemp }}<span class="typeStyle">℃</span></div>
+                    <div class="wucanshuValueDiv">
+                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
+                                       :to="waterData.dataWaterTemp" />
+                      <span class="typeStyle">℃</span></div>
                   </div>
                   <div class="wucanshuNameDiv">水温</div>
                 </div>
                 <div @click="showEchartDialog(stationDetail,'dataWaterPh')">
                   <div class="wucanshuDiv">
-                    <div class="wucanshuValueDiv">{{ stationDetail.latestWaterData[0].dataWaterPh }}<span class="typeStyle"></span></div>
+                    <div class="wucanshuValueDiv">
+                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"
+                                       :to="waterData.dataWaterPh" /> <span class="typeStyle"></span></div>
                   </div>
                   <div class="wucanshuNameDiv">PH值</div>
                 </div>
@@ -221,19 +225,30 @@
               <div class="changguiwucanshu" >
                 <div @click="showEchartDialog(stationDetail,'dataWaterDo')">
                   <div class="wucanshuDiv">
-                    <div class="wucanshuValueDiv">{{ stationDetail.latestWaterData[0].dataWaterDo }}<span class="typeStyle">mg/L</span></div>
+                    <div class="wucanshuValueDiv">
+                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"
+                                       :to="waterData.dataWaterDo" />
+                  <span class="typeStyle">mg/L</span></div>
                   </div>
                   <div class="wucanshuNameDiv">溶解氧</div>
                 </div>
                 <div @click="showEchartDialog(stationDetail,'dataWaterDdl')">
                   <div class="wucanshuDiv">
-                    <div class="wucanshuValueDiv">{{ stationDetail.latestWaterData[0].dataWaterDdl }}<span class="typeStyle">μS/cm</span></div>
+                    <div class="wucanshuValueDiv">
+                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"
+                                       :to="waterData.dataWaterDdl" />
+                       <span class="typeStyle">μS/cm</span>
+                    </div>
                   </div>
                   <div class="wucanshuNameDiv">电导率</div>
                 </div>
                 <div @click="showEchartDialog(stationDetail,'dataWaterNtu')">
                   <div class="wucanshuDiv">
-                    <div class="wucanshuValueDiv">{{ stationDetail.latestWaterData[0].dataWaterNtu }}<span class="typeStyle">NTU</span></div>
+                    <div class="wucanshuValueDiv">
+                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0" :to="waterData.dataWaterNtu" />
+                      <span class="typeStyle">NTU</span>
+                    </div>
+
                   </div>
                   <div class="wucanshuNameDiv">浊度</div>
                 </div>
@@ -263,7 +278,7 @@
         </div>
       </div>
 
-      <!-- 台账禽畜弹窗 -->
+      <!-- 站点介绍弹窗 -->
       <el-dialog width="60%"  :visible.sync="qczddialogTableVisible" >
         <div class="tz_cov">
           <img src="@/assets/image/guanbi.png" class="guanbiann" @click="qcguanbi" alt="">
@@ -300,7 +315,7 @@
 
 <script>
 import ScaleBox from 'vue2-scale-box'
-import {getStationDetail, getStationDisplay, getIndexSummry, survItemSummary, getMaintainLog} from '@/api';
+import {getStationDetail, getStationDisplay, getIndexSummry, survItemSummary, getMaintainLog, stationInfo} from '@/api';
 import vueSeamlessScroll from 'vue-seamless-scroll'
 import hefentianqi from '@/pages/weather/weather.vue'
 import SoilDialog from "@/components/SoilDialog.vue";
@@ -317,6 +332,8 @@ export default {
   name: "MywrList",
   data() {
     return {
+      loading: true,
+      stationList:[],
       currentPlayerLive: true,
       singleEchartDialogShowFlag: false,
       singleEchartData: null,
@@ -324,48 +341,19 @@ export default {
       urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
       player: {},
       timer: {},
-      enableZ: false, //默认关闭电子放大
+      interval: {},
       play: false, //默认停止播放
       nowTime: '',
-      stationDetail: '',
+      stationDetail: null,
       DetailListAirData: '',
-      DetailListSoilData: '',
+      // DetailListSoilData: '',
       DisplayList: '',
       DisplayListdetailList: '',
       inforname: '',
       dialogVisible: false,
-      rotation: {
-        x: 0,
-        y: 450,
-        z: 0
-      },
-      AirDataWind: 0,
-      AirDataFallout: 0,
-      AirDataRainFall: 0,
-      AirDataSpeed: 0,
-      AirDataTemp: 0,
-      AirDataAirWet: 0,
-      AirDataAirPress: 0,
-      // 土壤
-      DetailSoilTemp: 0,
-      DetailSoilWet: 0,
-      DetailSoilDdl: 0,
-      DetailSoilTemp2: 0,
-      DetailSoilWet2: 0,
-      DetailSoilDdl2: 0,
-      DetailSoilTemp3: 0,
-      DetailSoilWet3: 0,
-      DetailSoilDdl3: 0,
-      refresh: true,
       fullscreen: false, //全屏
-      trqxzxdialogTableVisible: false,
       qczddialogTableVisible: false,
-      trbgzhuanq: false,
+      waterData: {},
-      radiotr: '1',
-      trbg: null,
-      trzx: false,
-      timetr: [new Date(), new Date()],
-      descriptionValue: null,
       summryAllData: null,
       echartIndex: 0,
       maintainLogList: [],
@@ -379,29 +367,28 @@ export default {
       }, {
         value: 'yearMonth',
         label: '12个月'
-      }]
+      }],
+      echartObj: null,
+      animateObj: [],
     };
   },
   destroyed() {
     //离开页面是销毁
     Object.values(this.timer).map(item => {
+      if(item){
+        clearTimeout(item);
+      }
+    });
+    Object.values(this.interval).map(item => {
       if(item){
         clearInterval(item);
       }
     });
+    this.interval = {};
     this.timer = {};
   },
   created() {
-    this.infor()
     this.stationCode = this.$route.query.stationCode
-    getStationDisplay(this.stationCode).then(val => {
-      this.DisplayList = val.result
-      this.DisplayListdetailList = val.result.effect_assess[0].detailList[2]
-    })
-    this.initChartData();//下方echart监测图标
-    this.hhlist();//土壤空气数据
-    // 实现轮询
-    this.timer['soil'] = setInterval(() => this.hhlistxunh(), 5000);
   },
   computed: {
     classOption() {
@@ -418,29 +405,44 @@ export default {
     },
   },
   mounted() {
-    // 实时时间
+    this.initStart();
-    this.getNowTime();
+    this.stationInfoApi();
-    this.initMaintainLog();
   },
   methods: {
-    initMaintainLog(){
+    initStart(){
+      this.loading = true;
+      // 实时时间
+      this.infor()
+      getStationDisplay(this.stationCode).then(val => {
+        this.DisplayList = val.result
+        this.DisplayListdetailList = val.result.effect_assess[0].detailList[2]
+      })
+      this.initChartData();//下方echart监测图标
+      this.stationDetailApi();
+      this.getNowTime();
+      this.initMaintainLog();
+    },
+    initMaintainLog(){//巡检日志
       getMaintainLog({stationCode: this.stationCode, pageSize: 3}).then(res => {
         if (res.code === 200) {
           this.maintainLogList = res.result.records;
-          console.log('maintainLogList',this.maintainLogList)
+          setTimeout(() => {
+            this.loading = false;
+          }, 1000)
         }
       })
     },
     changeDateType() {
-      this.summryAllData = null;
+      // this.summryAllData = null;
       this.initChartData();
     },
     initChartData() {
+      this.riverList = [];
+      this.summryAllData = [];
       getIndexSummry({summrayMode: this.dateType, statsionCode: this.stationCode}).then(res => {
         if (res.code === 200) {
           this.summryAllData = res.result;
           let len = this.summryAllData.length;
-          this.riverList = [];
           this.summryAllData.map((item1, index) => {
             if (index % 2 === 0 && item1['datas'] && (index + 1) < len) {
               let data1 = item1['datas'];
@@ -470,13 +472,17 @@ export default {
     initEchartDom(index) {
       this.$nextTick(() => {
         let domKey = `myChartDiv0`;
-        let data = this.summryAllData[index];
         let divDom = document.getElementById(domKey);
         if (!divDom) {
           console.log('没找到dom：', domKey, divDom)
           return;
         }
-        console.log('开始初始化echart：', domKey, divDom, data)
+        if(this.echartObj){
+          this.echartObj.dispose();
+        }
+        this.echartObj = this.$echarts.init(divDom);
+        let data = this.summryAllData[index];
+        console.log('开始初始化echart：' )
         let dataObj = [];
         let i = 0;
         let colors = [
@@ -565,9 +571,7 @@ export default {
           },
           series: seriesData
         };
-        //为echarts对象加载数据
+        this.echartObj.setOption(optionLine);
-        let echartObj = this.$echarts.init(divDom);
-        echartObj.setOption(optionLine);
       })
     },
     zdinfor(){
@@ -612,12 +616,10 @@ export default {
     },
     // 实时时间
     getNowTime() {
-      let speed = 1000
       let that = this
-      let theNowTime = function () {
+      this.interval['time'] = setInterval(() =>{
         that.nowTime = that.timeNumber()
-      }
+      }, 1000)
-      setInterval(theNowTime, speed)
     },
     timeNumber() {
       let today = new Date()
@@ -633,28 +635,30 @@ export default {
       return val
     },
     qcguanbi() {
-      this.trqxzxdialogTableVisible = false
       this.qczddialogTableVisible = false
     },
-    hhlist() {
+    stationDetailApi() {
       let that = this;
-      let stationCode = this.$route.query.stationCode
+      // this.stationDetail = null
-      getStationDetail(stationCode).then(res => {
+      if(that.stationDetail){
+        that.stationDetail.latestData = []
+      }
+      getStationDetail(this.stationCode).then(res => {
         this.stationDetail = res.result
         this.DetailListAirData = res.result.latestAirData[0]
         //空气数据
-        if (this.DetailListAirData) {
+        if (this.DetailListAirData) {}
-          this.AirDataWind = this.DetailListAirData.dataWindDirection
+        if (this.stationDetail.latestWaterData[0]) { //水数据
-          this.AirDataFallout = this.DetailListAirData.dataSunFallout
+          this.waterData.dataWaterTemp = this.stationDetail.latestWaterData[0].dataWaterTemp
-          this.AirDataRainFall = this.DetailListAirData.dataRainFall
+          this.waterData.dataWaterPh = this.stationDetail.latestWaterData[0].dataWaterPh
-          this.AirDataSpeed = this.DetailListAirData.dataWindSpeed
+          this.waterData.dataWaterDo = this.stationDetail.latestWaterData[0].dataWaterDo
-          this.AirDataTemp = this.DetailListAirData.dataAirTemp
+          this.waterData.dataWaterDdl = this.stationDetail.latestWaterData[0].dataWaterDdl
-          this.AirDataAirWet = this.DetailListAirData.dataAirWet
+          this.waterData.dataWaterNtu = this.stationDetail.latestWaterData[0].dataWaterNtu
-          this.AirDataAirPress = this.DetailListAirData.dataAirPress
+          this.animateObj = [];
+          this.hhlistxunh();
         }
         // 土壤数据
-        this.DetailListSoilData = res.result.latestSoilData[0]
+        // this.DetailListSoilData = res.result.latestSoilData[0]
-        this.hhlistxunh();
         that.currentPlayerLive = false;
         // 监控画面
         setTimeout(() => {
@@ -704,25 +708,41 @@ export default {
         },
       })
     },
+    stationInfoApi(){
+      stationInfo().then(res => {
+        this.stationInfoList = res.result
+        if (this.stationInfoList) {
+          res.result.map(item => {
+            this.stationList.push({
+              stationCode: item.stationCode,
+              stationName: item.stationName,
+            })
+          })
+        }
+      })
+    },
+    switchStation(e){
+      console.log(e);
+      // this.$router.push({path: '/MywrList', query: {stationCode: e.stationCode}})
+      this.initStart();
+    },
+    addAnimateObj(dom){
+      this.animateObj.push(dom);
+      // console.log('特效数组添加', this.animateObj.length);
+    },
     hhlistxunh() {
-      if (this.DetailListSoilData) {
+      // console.log('数据特效 轮询展示', this.animateObj);
-        this.DetailSoilTemp = this.DetailListSoilData.dataSoilTemp
+      if(this.timer['water']){
-        this.DetailSoilWet = this.DetailListSoilData.dataSoilWet
+        clearTimeout(this.timer['water'])
-        this.DetailSoilDdl = this.DetailListSoilData.dataSoilDdl
-        this.DetailSoilTemp2 = this.DetailListSoilData.dataSoilTemp2
-        this.DetailSoilWet2 = this.DetailListSoilData.dataSoilWet2
-        this.DetailSoilDdl2 = this.DetailListSoilData.dataSoilDdl2
-        this.DetailSoilTemp3 = this.DetailListSoilData.dataSoilTemp3
-        this.DetailSoilWet3 = this.DetailListSoilData.dataSoilWet3
-        this.DetailSoilDdl3 = this.DetailListSoilData.dataSoilDdl3
-        // 移除组件
-        this.refresh = false
-        // 在组件移除后，重新渲染组件
-        // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
-        this.$nextTick(() => {
-          this.refresh = true
-        })
       }
+      this.animateObj.forEach((item, index) => {
+        // console.log('数据特效 轮询展示', item);
+        if(Boolean(Math.round(Math.random()))) {
+          item && item.start && item.start();
+        }
+
+      })
+      this.timer['water'] = setTimeout(() => this.hhlistxunh(), 5000);
     },
     screen() {
       let element = document.documentElement;
@@ -2391,5 +2411,18 @@ a:hover {
   left: 246px;
   top: 0px;
 }
+.switchLive {
+  position: absolute; cursor:pointer; top: 68px;right: 16px;color: rgb(255, 255, 255);z-index: 500;
+}
+.switchLive:hover {
+  color: rgb(236, 196, 23);
+}
+.switchStation {
+  position: absolute;
+  right: 450px;
+  cursor:pointer;
+  z-index: 2000;
+  width: 180px
+}
 </style>