mbWaterService/src/views/zhpt/scada/dayUseWater/widget.vue

<template>
  <div
    v-way="wayFun('mainDiv')"
    style="width: 100%; height: 100%; padding: 8px"
  >
    <el-row>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        style="
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: flex-start;
        "
      >
        <el-form-item
          label="类型:"
          style="width: 205px; display: inline-block; margin-bottom: 6px"
        >
          <el-select
            v-model="categoryName"
            filterable
            style="display: inline-block; width: 140px"
            size="small"
            placeholder="请选择类型"
            @change="selectChange"
          >
            <el-option key="1" label="水厂" value="1" />
            <el-option key="2" label="管网" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="设备名称:"
          prop="site"
          style="width: 360px; display: inline-block; margin-bottom: 6px"
        >
          <el-select
            ref="site"
            v-model="ruleForm.site"
            style="display: inline-block; width: 240px"
            size="small"
            placeholder="请选择"
            @change="bindTsNameChange"
          >
            <el-option
              v-for="item in isSeletcSite"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          label="指标名称:"
          prop="type"
          style="width: 240px; display: inline-block; margin-bottom: 6px"
        >
          <el-select
            v-model="ruleForm.indexName"
            collapse-tags
            style="display: inline-block; width: 140px"
            size="small"
            placeholder="请选择"
            disabled
          >
            <el-option
              v-for="item in indexNames"
              :key="item.variableCode"
              :label="item.displayName"
              :value="item.variableCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="统计日期:"
          prop="times"
          style="display: inline-block; width: 440px; margin-bottom: 6px"
        >
          <el-date-picker
            v-model="ruleForm.times"
            size="small"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item
          style="display: inline-block; width: 300px; margin-bottom: 6px"
        >
          <el-button
            size="small"
            type="primary"
            @click="monitorHisToryQuery('ruleForm')"
          >查询</el-button>
          <el-button
            size="small"
            type="primary"
            @click="statisticsScadaExport('ruleForm')"
          >导出</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <div style="height: calc(100% - 35px)">
      <el-table
        id="siteMonitor"
        v-loading="loading"
        class="mapTable"
        :data="dayUseWaterData"
        :total="tableTotal"
        :summary-method="getSummaries"
        show-summary
        border
        style="width: 100%; height:calc(100% - 80px); margin-top: 20px"
      >
        <el-table-column type="index" align="center" width="50" label="序号" />
        <el-table-column
          prop="deviceName"
          align="center"
          label="设备名称"
          sortable="custom"
          show-overflow-tooltip
        />
        <el-table-column
          prop="codeName"
          align="center"
          label="统计指标名称"
          sortable="custom"
          show-overflow-tooltip
        />
        <el-table-column
          prop="endTime"
          align="center"
          label="监测时间"
          sortable="custom"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.endTime.split(" ")[0] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="difference"
          align="center"
          sortable="custom"
          :label="'日用量(m³)'"
        />
      </el-table>
      <el-row style="margin-top: 0px">
        <el-col :span="24">
          <el-pagination
            ref="pagination"
            small
            layout="total, sizes, prev, pager, next, jumper"
            :pager-count="5"
            :current-page="pageInfo.current"
            :page-sizes="[10,40, 80, 120, 200]"
            style="margin-top: 4px"
            :page-size="pageInfo.size"
            :total="tableTotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import elementResizeDetectorMaker from 'element-resize-detector'
import TableItem from '@/components/Table'
import Echarts from 'echarts'
import ExportBtn from '@/views/zhpt/wxreportforms/components/ExportBtn'
import {
  queryDevice,
  queryIndexConfiguration,
  statisticsScadaPage,
  statisticsScadaExport
} from '@/api/scadaApi'
import { getSysCommonCode } from '@/api/dataCenter'
export default {
  name: 'AnalysisResult',
  components: { TableItem, Echarts, ExportBtn },
  directives: {
    way(el, bind) {
      if (typeof bind.value === 'function') bind.value(el)
    }
  },
  data() {
    return {
      dayUseWaterData: [], // 表格数据
      tabsItem: [],
      activeName: '',
      monitorLable: '',
      tableLoading: false,
      nameUnit: '',
      total: 0,
      loading: false,
      pageInfo: { current: 1, size: 40 }, // 分页数据
      ruleForm: {
        site: '',
        indexName: '',
        times: []
      },
      rules: {
        site: [{ required: true, message: '', trigger: 'change' }],
        times: [{ required: true, message: '', trigger: 'change' }]
      },
      sites: [], // 测站名称
      types: [], // 指标类型
      indexNames: null, // 指标名称
      elements: {},
      tableTotal: 0, // 表格数据总条数
      categoryName: '1', // 默认选择水厂
      categoryNames: [],
      isSeletcSite: [],
      linkageEchart: null,
      deviceTypeCode: [],
      num: ''
    }
  },

  watch: {
    'ruleForm.indexName': {
      handler(newValue, oldVal) {
        this.monitorHisToryQuery('ruleForm')
      }
    }
  },
  created() {},

  mounted() {
    const date = new Date()
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    this.ruleForm.times = [
      year + '-' + month + '-1',
      year + '-' + month + '-' + day
    ]
    // this.elements["mainDiv"].parentElement.style.height = "100%";
    // this.elements["mainDiv"].parentElement.parentElement.style.height =
    //   "calc(100% - 56px)";
    // this.elements[
    //   "mainDiv"
    // ].parentElement.parentElement.parentElement.style.height = "100%";
    // this.showUnitIndex = {};

    getSysCommonCode({ pCid: '53400' }).then((res) => {
      const deviceTypes = res.result[0].codeList
      this.deviceTypeCode = deviceTypes.map((item) => {
        if (item.cname.indexOf('压力') == -1) return item.ccode
      })
      this.queryDevice() // 绑定测站名称
    })
  },
  methods: {
    /**
     * 合计
     *
     */
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map((item) => Number(item[column.property]))
        if (!values.every((value) => isNaN(value))) {
          sums[index] = this.num
        }
      })
      return sums
    },
    /**
     * 根据设备类型查询设备
     */
    queryDevice() {
      queryDevice({ type: this.categoryName, size: 10000 }).then((res) => {
        const device = res.result.records
        this.isSeletcSite = device.filter(
          (item) => this.deviceTypeCode.indexOf(item.deviceType) != -1
        )
        if (this.isSeletcSite.length > 0) {
          this.ruleForm.site = this.isSeletcSite[0].id
          this.bindTsNameChange()
        }
      })
    },

    /**
     * 根据设备ID查询设备指标
     */
    queryIndexType() {
      queryIndexConfiguration({
        deviceId: this.ruleForm.site,
        size: 10000
      }).then((res) => {
        const arr = this.process(res.result.records)
        this.types = arr
        this.indexNames = arr.filter(
          (item) =>
            item.variableCode.indexOf('.JLJ') != -1 ||
            item.variableCode.indexOf('.LJL') != -1
        )
        if (this.indexNames.length > 0) { this.ruleForm.indexName = this.indexNames[0].variableCode }
      })
    },

    queryIndexConfiguration() {
      queryIndexConfiguration({
        deviceId: this.ruleForm.site,
        type: this.ruleForm.type,
        size: 10000
      }).then((res) => {
        this.indexNames = res.result.records
        var index = (this.targetIndex = {})
        res.result.records.map((e) => {
          index[e.variableCode] = e
        })
      })
    },

    process(arr) {
      // 缓存用于记录
      const cache = []
      for (const t of arr) {
        // 检查缓存中是否已经存在
        if (cache.find((c) => c.type === t.type)) {
          // 已经存在说明以前记录过，现在这个就是多余的，直接忽略
          continue
        }
        // 不存在就说明以前没遇到过，把它记录下来
        cache.push(t)
      }

      // 记录结果就是过滤后的结果
      return cache
    },

    // 设备名称发生改变时触发
    bindTsNameChange() {
      this.tabsItem = []
      this.types = []
      this.indexNames = []
      this.targetIndex = {}
      this.ruleForm.type = ''
      this.ruleForm.indexName = ''
      this.queryIndexType()
    },

    // 获得表格数据
    getData(data) {
      this.dayUseWaterData = []
      this.loading = true

      statisticsScadaPage(data)
        .then((res) => {
          if (res.code == 1) {
            this.dayUseWaterData = res.result.records
            this.tableTotal = res.result.total
          } else this.$message.error(res.message)
          this.loading = false
        })
        .catch((err) => {
          console.log(err)
        })

      const indexName1 = this.ruleForm.indexName.replace(/\#/g, '%23')
      const data1 = {
        code: indexName1 + '', // 指标名称
        startTime: this.ruleForm.times[0] + ' 00:00:00',
        endTime: this.ruleForm.times[1] + ' 23:59:59',
        size: this.pageInfo.size,
        current: this.pageInfo.current,
        totalAll: 1
      }
      statisticsScadaPage(data1)
        .then((res) => {
          if (res.code == 1) {
            this.num = res.result.difference
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 点击查询，获取表格数据
    monitorHisToryQuery(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          const indexName = this.ruleForm.indexName.replace(/\#/g, '%23')
          const data = {
            code: indexName + '', // 指标名称
            startTime: this.ruleForm.times[0] + ' 00:00:00',
            endTime: this.ruleForm.times[1] + ' 23:59:59',
            size: this.pageInfo.size,
            current: this.pageInfo.current
          }
          this.getData(data)
        } else {
          return false
        }
      })
    },
    // 每页显示条数改变时触发事件
    handleSizeChange(val) {
      this.pageInfo.size = val
      this.monitorHisToryQuery('ruleForm')
    },
    // 翻页时触发事件
    handleCurrentChange(val) {
      this.pageInfo.current = val
      this.monitorHisToryQuery('ruleForm')
    },

    wayFun: function(flag) {
      return (el) => {
        this.elements[flag] = el
      }
    },
    statisticsScadaExport(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          const indexName = this.ruleForm.indexName.replace(/\#/g, '%23')
          const data = {
            code: indexName + '', // 指标名称
            startTime: this.ruleForm.times[0] + ' 00:00:00',
            endTime: this.ruleForm.times[1] + ' 23:59:59'
          }
          statisticsScadaExport(data).then((res) => {
            const blob = URL.createObjectURL(
              new Blob([res], {
                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
              })
            )
            const a = document.createElement('a')
            a.href = blob
            a.download = '日用量报表.xlsx'
            a.click()
          })
        } else {
          return false
        }
      })
    },

    selectChange(val) {
      this.categoryName = val
      this.tabsItem = []
      this.isSeletcSite = []
      this.types = []
      this.indexNames = []
      this.targetIndex = {}
      for (const i in this.ruleForm) {
        if (i != 'times') {
          this.ruleForm[i] = ''
        }
      }
      this.queryDevice()
    }
  }
}
</script>
<style scoped="less">
.el-table__footer-wrapper {
  margin-bottom: 32px;
}
</style>