tsg-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:0px;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:10%;color:#3399ef">{{ stm }}</text>
        </view>
        <view class="end-time">
          <text>结束时间</text>
          <text @click="showTime1 = true" style="margin:0 10%;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">
            <u-button style="margin-right:10px" @click="fd" class="aqjc-custom-style">+</u-button>
            <u-button @click="sx" class="aqjc-custom-style">-</u-button>
          </view>
          <view class="play-btn">
            <uni-icons type="videocam" size="40" :color="swiper ? '#2979ff' : '#909399'" @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");
const typeName = {
  'ZB0+130': '1',
  'ZB0+132': '2',
  'ZB0+250': '3',
  'ZB0+252': '4',
  'ZB0+370': '5',
  'ZB0+372': '6',
  'FB0+010': '7',
  'FB0+030': '8',
}
export default {

  data() {
    return {
      startTime: stm,
      endTime: etm,
      stm,
      etm,
      showTime: false,
      showTime1: false,
      array: [],
      profileCode: '',
      dbType: '',
      type1: '',
      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 == "ZB0+130" || name == "ZB0+132") ? "1" :
            (name == "ZB0+250" || name == "ZB0+252") ? "2" :
              (name == "ZB0+370" || name == "ZB0+372") ? "3" :
                (name == "FB0+010" || name == "FB0+030") ? '4' : '';
          this.type1 = typeName[name];
          this.getDmTree();
        }
      },
      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, this.type1)
          }
        }
      },
      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, this.type1)
        }
        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() {
      uni.showLoading({
        title: "加载中...",
        mask: true,
      });
      try {
        const {
          data
        } = await uni.$http.post(
          `/gunshiApp/tsg/attDamProfile/list`,)
        if (data.code == 200) {
          uni.hideLoading();
          const filterData = data.data.filter(item => (item?.profileName?.split('+')[0] == 'ZB0' || item?.profileName?.split('+')[0] == 'FB0'))
          console.log("filterData", filterData);
          const sortedData = filterData.sort((a, b) => {
            // 判断a、b是否为ZB0开头
            const isAZB0 = a.profileCode.startsWith('ZB0');
            const isBZB0 = b.profileCode.startsWith('ZB0');

            // 规则：ZB0开头的排前面；同类型（都ZB0/都非ZB0）保持原顺序
            if (isAZB0 && !isBZB0) return -1; // a是ZB0，b不是 → a在前
            if (!isAZB0 && isBZB0) return 1;  // a不是ZB0，b是 → b在前
            return 0; // 同类型，保持原始相对顺序
          });
          this.array = sortedData
          this.profileCode = sortedData[0].profileCode;
        }
      } catch (e) {
        uni.$showMsg();
      }
    },

    // 获取坝面上点位数据
    async getTableData() {
      uni.showLoading({
        title: "加载中...",
        mask: true,
      });
      try {
        const {
          data
        } = await uni.$http.post(
          "/gunshiApp/tsg/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) {
          uni.hideLoading();
          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,
            }
          })
          this.dataSources = [...result];
        }
      } catch (error) {
        uni.$showMsg();
      }
    },
    // 获取各点
    async getDmTree() {
      try {
        const {
          data
        } = await uni.$http.post("/gunshiApp/tsg/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;

  .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: 1;
      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;
    }
  }

  .aqjc-custom-style {
    width: 80rpx;
  }
}
</style>