psjgxt_web/src/views/saSubsystem/StatisticalAnalysis/WaterloggingAnalysis/widget.vue

<template>
  <com-side-page>
    <template slot="side">
      <div class="side-title">内涝点水位监测点</div>
      <div class="side-content">
        <div class="searchInput">
          <el-input
            placeholder="支持搜索监测点名称"
            suffix-icon="el-icon-search"
            size="small"
            v-model="searchDevice"
            clearable
          >
          </el-input>
        </div>
        <el-tree
          :ref="`tree`"
          class="dataListTree"
          show-checkbox
          default-expand-all
          :default-checked-keys="defaultcheckedList"
          node-key="id"
          :data="treeData"
          :props="defaultProps"
          :filter-node-method="filterNode"
          @check="handleCheckChange"
        >
        </el-tree>
      </div>
    </template>
    <template slot="main">
      <div class="main-title">
        <div class="mt-bottom">
          <label>数据时间：</label>
          <div class="switch">
            <div
              class="switch-item"
              v-for="item in switchType"
              :key="item.type"
              :class="{ 'switch-active': currentShowType == item.type }"
              @click="currentShowType = item.type"
            >
              <template>{{ item.name }}</template>
            </div>
          </div>
          <el-date-picker
            class="el-date-picker"
            v-model="customDate"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
            style="margin-right: 20px"
          >
          </el-date-picker>
          <el-button type="primary" size="small" class="search-button" @click="getData()">统计</el-button>
          <!-- <el-button type="primary" size="small" class="export-button" icon="el-icon-upload2">导出</el-button> -->
        </div>
      </div>
      <div class="main-content">
        <com-title :title="'每日最高水位统计'">
          <template slot="title-append">
            <div class="button-group">
              <el-button size="mini" v-for="item in typeList" :key="item.type" @click="changeShowNum(item.type)">
                <img :src="currentChartShowNum == item.type ? item.himg : item.img" />
              </el-button>
              <el-checkbox style="margin-left: 60px" v-model="onlyRainDay">只看降雨日</el-checkbox>
            </div>
          </template>
        </com-title>
        <div class="chart-content">
          <el-carousel
            class="chartCarousel"
            ref="chartCarousel"
            :autoplay="false"
            style="height: 100%; width: 100%"
            v-if="paramsList.length != 0"
          >
            <el-carousel-item
              v-for="(item, index) in paramsList"
              :key="index"
              :class="currentChartShowNum"
              style="height: 100%; width: 100%"
            >
              <template v-if="reload">
                <div class="chart-item" v-for="citem of item.child" :key="citem.id">
                  <CompositeBarChart v-bind="$attrs" :chartData="citem" />
                </div>
              </template>
            </el-carousel-item>
          </el-carousel>
          <el-empty v-else :image="require('@/assets/icon/null.png')" description=" "></el-empty>
        </div>
      </div>
    </template>
  </com-side-page>
</template>

<script lang='ts'>
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { comTitle, comSidePage, CompositeBarChart } from '../../component/index'
import { typeList } from '../../common/settings'
import { getStagnantWaterStatistics, querySiteInfoByType } from '../../common/requestapis'
import moment from 'moment'
//内涝积水分析
@Component({ name: 'WaterloggingAnalysis', components: { comTitle, comSidePage, CompositeBarChart } })
export default class WaterloggingAnalysis extends Vue {
  onlyRainDay = true

  indexValue = []

  switchType = [
    { name: '近30天', type: '30' },
    { name: '近6个月', type: '6' },
    { name: '近1年', type: '1' }
  ]

  currentShowType: String = '30'

  searchDevice: String = ''

  customDate = []

  dateRange = null

  //树结构参数
  defaultcheckedList = []

  treeData = []

  defaultProps = {
    children: 'children',
    label: 'label'
  }

  selectStationList = []

  indexList = []

  //
  reload = true

  currentChartShowNum: String = 'fourth'

  paramsList = []

  get typeList() {
    return typeList
  }
  @Watch('searchDevice')
  filterText(val) {
    ;(this.$refs[`tree`] as Element[]).filter(val)
  }

  @Watch('customDate')
  onCustomeTimeChange(val) {
    if (val) {
      this.dateRange = {
        beginTime: moment(val[0]).format('YYYY-MM-DD HH:mm:ss'),
        endTime: moment(val[1]).format('YYYY-MM-DD HH:mm:ss')
      }
      this.currentShowType = null
    } else {
      this.currentShowType = '30'
    }
  }
  @Watch('currentShowType', { immediate: true })
  onTimeChangeMethod(val) {
    if (!val) return
    this.customDate = null
    let beginTime = null,
      endTime = null
    switch (val) {
      case '30':
        beginTime = moment().add(-1, 'M')
        endTime = moment(new Date())
        break
      case '6':
        beginTime = moment().add(-6, 'M')
        endTime = moment(new Date())
        break
      case '1':
        beginTime = moment().add(-1, 'y')
        endTime = moment(new Date())
        break
    }
    if (!beginTime || !endTime) return
    this.dateRange = {
      beginTime: beginTime.format('YYYY-MM-DD HH:mm:ss'),
      endTime: endTime.format('YYYY-MM-DD HH:mm:ss')
    }
  }
  @Watch('selectStationList')
  onSelectChange() {
    this.getData()
  }

  mounted() {
    this.getSites()
  }

  async getSites() {
    const res = await querySiteInfoByType({ type: 'pointFlood' })
    const { code, result } = res || {}
    if (code != 1 || result.length == 0) return
    let list = []
    result['pointFlood'].forEach((item, index) => {
      list.push({
        ...item,
        label: item.siteName,
        children: []
      })
      this.defaultcheckedList.push(item.id)
    })
    this.selectStationList = this.defaultcheckedList
    list = [{ label: '全部', children: list }]
    this.treeData = list
  }

  async getData() {
    if (!this.dateRange) {
      this.$message.warning('请选择统计时间')
      return
    }
    if (this.selectStationList.length == 0) {
      this.$message.warning('请选择至少一个雨量站')
      this.paramsList = []
      return
    }
    let params = {
      isRain: this.onlyRainDay ? 1 : 0,
      siteId: this.selectStationList.join(),
      start: this.dateRange.beginTime,
      end: this.dateRange.endTime
    }
    const res = await getStagnantWaterStatistics(params)
    this.indexList = res.result.map((i) => {
      const { rain, water, siteName } = i
      let xData = [],
        rainData = [],
        waterData = [],
        tableData = []
      //获取x轴数据
      rain.map((e) => xData.push(e.time))
      water.map((e) => xData.push(e.time))
      xData = [...new Set(xData)]
      xData.sort((a, b) => {
        return a.localeCompare(b)
      })
      //
      xData.forEach((item) => {
        let hasRain = rain.find((r) => r.time == item)
        let hasWater = water.find((w) => w.time == item)
        rainData.push(hasRain ? hasRain.sumVal : 0)
        waterData.push(hasWater ? hasWater.sumVal : 0)
        tableData.push({
          siteName,
          water: hasWater ? hasWater.sumVal : 0,
          rain: hasRain ? hasRain.sumVal : 0,
          time: item
        })
      })
      tableData.sort((a, b) => {
        return b.time.localeCompare(a.time)
      })
      return { ...i, xData, rainData, waterData, tableData }
    })
    this.assembleParamsList()
  }
  assembleParamsList() {
    let type = this.currentChartShowNum
    let list = this.indexList
    this.paramsList = []
    if (type == 'single') {
      list.forEach((item) => {
        this.paramsList.push({ child: [item] })
      })
    } else {
      let dividend = type == 'fourth' ? 4 : type == 'sixth' ? 6 : type == 'ninth' ? 9 : 1
      let temp = [],
        symbol = 0
      list.forEach((item, index) => {
        if ((index + 1) % dividend != 0) {
          temp[symbol] ? temp[symbol].list.push({ ...item }) : temp.push({ list: [{ ...item }] })
        } else {
          temp[symbol].list.length < dividend ? temp[symbol].list.push({ ...item }) : temp.push({ list: [{ ...item }] })
          symbol++
        }
      })
      temp.forEach((item) => {
        this.paramsList.push({ child: item.list })
      })
    }
  }

  //树形列表过滤查找
  filterNode(value, data) {
    if (!value) return true
    return data.label.indexOf(value) !== -1
  }
  handleCheckChange(current, checkedData) {
    this.selectStationList = checkedData.checkedKeys.filter((i) => i)
  }

  tagClose(tag) {
    this.indexValue.splice(
      this.indexValue.findIndex((e) => e == tag),
      1
    )
  }
  //图表显示数量
  changeShowNum(type) {
    if (this.paramsList.length == 0) return
    this.reload = false
    this.currentChartShowNum = type
    this.assembleParamsList()
    //
    ;(this.$refs[`chartCarousel`] as any).setActiveItem(0)
    //重新渲染界面
    this.$nextTick(() => {
      this.reload = true
    })
  }
}
</script>

<style lang="scss" scoped>
@mixin center() {
  display: flex;
  align-items: center;
  justify-content: center;
}
@mixin fontSet() {
  font-family: Source Han Sans CN;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
}
$bcolor: #f8f8f8;
.side-title,
.side-content {
  background: $bcolor;
}
.side-title {
  @include center();
  height: 44px;
  width: 100%;
  margin-bottom: 4px;
  font-family: Alibaba PuHuiTi;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
}
.side-content {
  height: calc(100% - 48px);
  width: 100%;
  overflow: auto;
  .searchInput {
    padding: 10px;
  }
  .dataListTree {
    background-color: $bcolor;
  }
}

.main-title {
  display: flex;
  width: 100%;
  margin-bottom: 14px;
  position: relative;
  flex-flow: column;
  border-bottom: 1px solid #dedede;
  .mt-top {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .mt-bottom {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    .switch {
      @include center();
      border: 1px solid #dedede;
      border-radius: 3px;
      overflow: hidden;
      margin-right: 20px;
      .switch-item {
        @include center();
        width: 60px;
        height: 34px;
        white-space: nowrap;
        line-height: 21px;
        letter-spacing: 0.01em;
        color: #333333;
        cursor: pointer;
      }
      .switch-item:not(:last-child) {
        border-right: 1px solid #dedede;
        padding: 3px 10px;
      }
      .switch-active {
        color: #ffffff;
        background: #2083e8;
      }
    }
    .el-checkbox {
      margin-right: 15px;
    }
    .search-button {
      margin-left: 20px;
      background-color: #2d74e7;
      border-color: #2d74e7;
    }
    .export-button {
      right: 0;
      position: absolute;
      background-color: #e1ebfc;
      border-color: #e1ebfc;
      border-radius: 4px;
      color: #555555;
      >>> i {
        color: #2d74e7;
        font-weight: bold;
      }
    }
  }
}
.main-content {
  margin-top: 14px;
  height: calc(100% - 112px);
  width: 100%;
  .button-group {
    margin-left: 60px;
    display: flex;
    align-items: center;
    .el-button {
      margin-left: 20px;
      line-height: 0;
      padding: 0;
      img {
        object-fit: contain;
      }
    }
    >>> .el-checkbox__label {
      font-family: Source Han Sans CN-Medium;
    }
  }
  .chart-content {
    width: 100%;
    height: calc(100% - 24px);
    overflow: auto;
    .chart-item {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    >>> .el-carousel {
      height: 100%;
      width: 100%;
      .el-carousel__container {
        height: 100%;
        width: 100%;
      }
      .el-carousel__item {
        height: 100%;
        width: 100%;
        display: grid;
      }
      .single {
        grid-template-rows: repeat(1, 1fr);
        grid-template-columns: repeat(1, 1fr);
      }
      .fourth {
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr);
      }
      .sixth {
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(3, 1fr);
      }
      .ninth {
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(3, 1fr);
      }
    }
  }
}
</style>