xytSk-App/pages/aqjc/index.vue

<template>
        <view :style="{height:'100vh',overflow:'hidden',backgroundColor:'#fff'}">
		<u-status-bar></u-status-bar>
		<u-navbar title="安全监测" :autoBack="true" :titleStyle="{
				fontSize:'18px'
			}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
		</u-navbar>
       <picker @change="bindPickerChange"  :range="array" range-key="profileName" style="margin-top:50px;padding: 0 10px;">
          <view class="uni-input12" > 
            <view>{{profileName}}</view>
            <u-icon name="arrow-down-fill" color="#000" size="15" ></u-icon>
            </view>
		</picker>

    <view class="jcsj-box">
    <view class="time-ranger" >
        <view class="start-time">
        <text>开始时间</text>
        <text @click="showTime=true" style="margin-left:15%;color:#3399ef">{{stm}}</text>
      </view>
      <view class="end-time">
        <text>结束时间</text>
        <text @click="showTime1=true" style="margin:0 15%;color:#3399ef">{{etm}}</text>
         <view class="search-btn" @click="searchHandle">
          搜索
        </view>
      </view>

    </view>
    <view class="jcsj-content">
      <view class="tool-btn">
        <view class="scale-btn">
          <button style="margin-right:10px" @click="fd">+</button>
          <button @click="sx">-</button>
        </view>
        <view class="play-btn">
          <uni-icons type="videocam" size="40" @click="play"></uni-icons>
      </view>
      </view>
      <view class="jcsj-charts" >
      <movable-area :style="areaStyle">
        <movable-view @scale="scale" direction="all" :scale-value="scaleValue" scale-min="0.5" scale="true" scale-max="4" out-of-bounds="true">
        <qiun-data-charts  :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
        </movable-view>
      </movable-area>
      </view>
      <view style="margin-top: 20px;">
      <JcsjTable :columns="columns"  :data="dataSources" :newCol="newCol" :cols2="cols2"/>
      </view>
  
    </view>
     <u-datetime-picker
                :show="showTime"
                v-model="startTime"
                mode="datetime"
                @confirm="handleStartTime"
                @cancel="showTime=false"
        ></u-datetime-picker>
         <u-datetime-picker
                :show="showTime1"
                v-model="endTime"
                mode="datetime"
                @confirm="handleEndTime"
                @cancel="showTime1=false"
        ></u-datetime-picker>
	   </view>
     </view>
</template>

<script>
  import moment from "moment"
  import drpOption from './jrxOptions';
  import JcsjTable from "./jcsjTable"
  const stm = moment().subtract(1, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm");
  const etm =  moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm");
    export default {

        data() {
            return {
                 startTime:stm,
                endTime:etm,
                stm,
                etm,
                showTime:false,
                showTime1:false,
                array:[],
                profileCode:'',
                dbType:'',
                trData:[],
                dataSources:[],
                chartData: {chartData:{},eopts:{}}, 
                areaStyle:{left:"-450px"},
                scaleValue:0.5,
                swiper:false,
                timer:100, 
                columns:[],
                cols1:[
                  {
                    title: '序号',
                    key: 'index',
                    width: 60,
                    align: 'center',
                  },
                  {
                    title: '时间',
                    key: 'time',
                    width: 120,
                    align: 'center',
                  },
                   { title: '库水位(m)', key: 'rz', dataIndex: 'rz', width: 150, align: "center" },
                ],
                cols2:[
                  {title: '结果分析', key: 'status', dataIndex: 'status', width: 150, align: "center",}
                ],
                newCol:[]
            }
        },
          components:{
      JcsjTable
    },
        computed:{
            profileName(){
                if(this.array.length > 0){
                    return this.array.find(item => item.profileCode == this.profileCode).profileName;
                }else{
                    return '';
                }
            },
        },
        watch:{
            profileCode:{
                handler(newVal, oldVal) {
                    if(newVal){
                      let name = this.array.find(item => item.profileCode == newVal).profileName;
                        this.dbType = name == "大坝B0+060" ? "1" :
                                name == "大坝B0+090" ? "2" :
                                name == "大坝B0+120" ? "2" : '1'
                    }
                },
                immediate: true,
            },
            trData:{
                handler(newVal, oldVal) {
                  if(newVal){
                    this.getTableData()
                  }
                },
                deep: true,
            },
            dataSources:{
                handler(newVal, oldVal) {
                  if(newVal){
                    this.chartData = {...drpOption(newVal[0],this.dbType)}
                  }
                },
                deep: true,
                immediate: true,    
            },
            swiper(newVal){
              console.log("ww", newVal);
              
              if(newVal){
                this.InitialScroll(this.dataSources)
              }else{
              clearInterval(this.timer)
              }
            }
        },
        methods:{
          InitialScroll(data){
            let index = 0; 
            this.timer = setInterval(() => {
              console.log("data",data[index % data.length]);
              
              this.chartData = {...drpOption(data[index % data.length],this.dbType)}
              index++;
            },1000)
          },
          // 播放
          play(){
            this.swiper = !this.swiper;
          },
          // 放大回调
          fd(){
            if(this.scaleValue == 4){
              return;
            }else{
               this.scaleValue += 0.1;
            }
          },
          // 缩小回调
          sx(){
            if(this.scaleValue == 0.5){
              return''
            }else{
              this.scaleValue -= 0.1;
            }
          },
            //  缩放
              scale(e){
                this.areaStyle.left = -(e.detail.scale + 1) * 450 + 'px';
              },
               searchHandle(){
                this.getTableData();
               }, 
               handleStartTime(e){
                let time = moment(e.value).format("YYYY-MM-DD HH:mm")
                console.log("time",time);
                
                this.stm = time
                this.showTime = false
              }, 
              handleEndTime(e){
                 let time = moment(e.value).format("YYYY-MM-DD HH:mm")
                 this.etm = time;
                this.showTime1 = false
              },
              handleRanger(e){
                console.log(e);
                this.tm = [...e]
              },
              bindPickerChange(e) {
                this.profileCode = this.array[e.target.value].profileCode
            },
               //  获取监测点数据
             async getMonthData(){
                try{ 
                  const {data} = await uni.$http.post(
                  `/gunshiApp/xyt/attDamProfile/list`,)
                  if(data.code == 200){
                    this.array =data.data
                    this.profileCode = data.data[0].profileCode;
                  }
                }catch(e){      
                 uni.$showMsg();
                }
              },

            // 获取坝面上点位数据
            async getTableData(){
                try {
                    const {data} = await uni.$http.post(
                        "/gunshiApp/xyt/osmoticPressR/infiltra/line",
                        {
                            stationCodes:this.trData,
                            dateTimeRangeSo:
                            {
                               start:moment(this.stm).format("YYYY-MM-DD HH:mm:00"),
                               end:moment(this.etm).format("YYYY-MM-DD HH:mm:00"),
                            }
                        }
                    )
                     if(data.code == 200){
                         let newArr = [];
                          let newData = data.data.map((s, i) => {
                           newArr.push(s.list.map(c => ({
                             [c.stationCode]: c.value || '-',
                             tm: c.tm,

                            })))
                            return {
                              tm: s.tm,
                              rz: s.rz,
                              status: s.status || '',
                              inx:i+1
                            }
                          })
                          let filterData = newArr.filter(s => s.length > 0).flat()
                          let result = newData.map(s => {
                            let tm1 = s.tm;
                            let r = filterData.filter(t => {
                             return t.tm == tm1
                            })
                            let obj = {};
                            r.forEach(s1 => {
                             obj = {...s1,...obj}
                            })
                            return {
                              ...s,
                              ...obj,
                            }
                          })
              let res1 = result.map(item => ({...item,rz:(item.rz - 100).toFixed(2)})) //为了测试  最后需要删除
                        this.dataSources = [...res1];
                    }
                } catch (error) {
                     uni.$showMsg();
                }
            },
            // 获取各点
            async getDmTree(){
                try {
                    const {data} = await uni.$http.post("/gunshiApp/xyt/attDamProfile/tree")
                    if(data.code == 200){
                      console.log("data",data);
                      
                        let filterData = data.data.filter(s => s.profileCode == this.profileCode)
                        this.trData = filterData[0]?.children; 
                        const newCol = filterData[0]?.children.map(s => ({
                          title: `${s}(m)`,
                          key: s,
                          dataIndex: s,
                          width: 150,
                          align: "center",
                      }))
                      this.columns=[...this.cols1,...newCol,...this.cols2]
                      this.newCol = newCol;
                    }
                } catch (error) {
                     uni.$showMsg();
                }
            },

            // 拖动回调
            onChange(e){
              console.log(e); 
            },
        },
        mounted() {
            this.getMonthData()
            this.getDmTree()
        },
    }
</script>

<style lang="scss" scoped>
    .uni-input12{
       display:flex;
       justify-content: center;
       column-gap: 30px;
       align-items: center;
       padding:5px 0;
       border: 1px solid #f2f2f2;
       border-left: none;
       border-right: none;
    //    background-image: '../../static/images/';
    }
    .jcsj-box{
  padding: 0 10px;
  .time-ranger{
    // display: flex;
    // align-items: center;
    margin-bottom: 10px;
     .start-time, .end-time{
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #dfdfdf;
    }
    .search-btn{
      margin: 3px 0 0 5px;
      // color: #3399ef;
    }
  }
   .jcsj-content{
    max-height:100vh;
    width: 100%;
    overflow-y:auto;
    overflow-x: hidden;
    .tool-btn{
      display: flex;
      justify-content: space-between;
      align-items: "center";
      padding: 5px ;
      .scale-btn{
        display: flex;
        button{
          height: 40px;
        }
      }
    }
  }
  .jcsj-charts{
    width: 1310px;
    height: 250px;
    overflow-y: auto;
    // margin-top: 20px;
    &>movable-area {	
			height: 250px;		
			width: 3000px;
			// position:fixed;
			overflow: hidden;
			z-index: 1000;
      background-color: #efefef;
			movable-view{
				display: flex;
				justify-content: center;
				width: 1310px;
				height: 380px;
        background-color: #fff;
        left:450px;
        top:10px
			}}
  .active{
    border-color: #68bbff !important;
    color: #68bbff;
  }}
}
</style>