yclw/src/views/spectrum/reform/sewageDirect/widget.vue

<template>
  <div class="page-panel">
    <div class="left-panel">
      <mini-map layerControl projectList partsCheck>
        <template slot="topBar">
          <div @click="viewCurve()">监测查看</div>
          <thematic-map></thematic-map>
        </template>
      </mini-map>
      <transition name="el-zoom-in-bottom">
        <moniter-see ref="moniterSee" v-show="moniterVisible" @close="moniterClose()"></moniter-see>
      </transition>
    </div>
    <div class="right-panel">
      <div class="head-title">评估结果</div>
      <div class="chart-panel">
        <div class="chart-box" style="padding:0 20px 0 10px;">
          <div style="width:100%;height:100%;background-color:#f9f9f9;overflow:hidden;padding:10px">
            <p style="margin:10px 0;color:#2d74e7;margin-top:50px">污水直排：</p>
            <p style="margin:10px 0;color:#3f3f3f">雨水管网共布设{{allCount}}个监测点位，其中{{wsCount}}个监测点位发现污水直排隐患</p>
          </div>
        </div>
        <div class="chart-box" style="padding-left:20px" ref="chart1"></div>
      </div>
      <div class="middle-box">
        <div class="head-title">
          <span>监测点</span>
          <span style="float: right;">
            <el-checkbox v-model="form.checked">发现污水直排监测点（2）</el-checkbox>
            <el-checkbox v-model="form.checked">其他相关监测点（5）</el-checkbox>
          </span>
        </div>
        <el-table :data="tableData1" style="width: 100%" stripe :header-cell-style="{ background: 'rgba(45, 116, 231,0.2)', 
      color: '#333333', height: '40px', textAlign: 'center' }" height="200px">
          <template slot="empty">
            <img src="@/assets/icon/null.png" alt="暂无数据" style="width:100px" />
          </template>
          <el-table-column label="序号" align="center">
            <template slot-scope="scope">{{scope.$index+1}}</template>
          </el-table-column>
          <el-table-column prop="name1" label="监测类型" align="center"></el-table-column>
          <el-table-column prop="name2" label="监测点" align="center"></el-table-column>
          <el-table-column prop="name3" label="上游监测点" align="center"></el-table-column>
          <el-table-column prop="name4" label="关联检查井" align="center"></el-table-column>
          <el-table-column prop="name5" label="发现管网破损" align="center"></el-table-column>
          <el-table-column prop="name6" label="发现雨污混接" align="center"></el-table-column>
          <el-table-column prop="name7" label="关联管网" align="center">
            <template slot-scope="{row}">
              <el-button type="text" style="padding:0">{{row.name7}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="bottom-box">
        <div class="head-title line">监测点告警情况</div>
        <el-form ref="form" :model="form" :inline="true" label-width="auto" size="small" style="margin:10px 0">
          <el-form-item label="监测点" label-width="60px" style="margin:0">
            <el-select v-model="form.site" placeholder="请选择">
              <el-option v-for="(item,index) in []" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="指标" label-width="40px" style="margin:0">
            <el-select v-model="form.site" placeholder="请选择">
              <el-option v-for="(item,index) in []" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期范围" style="margin:0">
            <el-date-picker v-model="form.value1" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" style="width:280px">
            </el-date-picker>
          </el-form-item>
          <el-form-item label-width="20px" style="margin:0">
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData3" style="width: 100%" :header-cell-style="{ background: 'rgba(45, 116, 231,0.2)', 
      color: '#333333', height: '40px', textAlign: 'center' }" height="calc(100% - 51px)">
          <template slot="empty">
            <img src="@/assets/icon/null.png" alt="暂无数据" style="width:100px;" />
          </template>
          <el-table-column label="序号" align="center">
            <template slot-scope="scope">{{scope.$index+1}}</template>
          </el-table-column>
          <el-table-column prop="monitorDate" label="监测日期" align="center"></el-table-column>
          <el-table-column prop="siteName" label="监测点" align="center"></el-table-column>
          <el-table-column prop="dailyRainfall" label="日降雨量" align="center"></el-table-column>
          <el-table-column prop="warningCause" label="告警原因" align="center"></el-table-column>
          <el-table-column label="监测曲线" align="center">
            <template slot-scope="{row}">
              <el-button type="text" style="padding:0" @click="viewCurve(row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination" style="padding-top:10px">
          <el-pagination :current-page="pagination.current" :page-sizes="[100, 200, 300, 400]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import miniMap from '@/views/widgets/miniMap/index.vue'
import moniterSee from '@/views/spectrum/reform/monitorSee/index.vue'
import thematicMap from '@/views/widgets/thematicMap/index.vue'
import * as echarts from 'echarts'

import { getReportCondision, getHiddenDangerCount, getWarningPage } from '@/views/spectrum/reform/api/api'
export default {
  components: {
    miniMap,
    moniterSee,
    thematicMap
  },
  data() {
    return {
      form: {},
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      activeName: 'first',
      moniterVisible: false,
      allCount: 0,
      wsCount: 0,
      pagination: { current: 1, size: 100, total: 0 }
    }
  },
  mounted() {
    // for (let index = 0; index < 10; index++) {
    //   this.tableData1.push({
    //     name1: '管网水质检测仪',
    //     name2: '青羊区6号',
    //     name3: '青年之南',
    //     name4: '污水W01',
    //     name5: '2022-6-18',
    //     name6: '2022-6-19',
    //     name7: '10个 1593km'
    //   })
    //   this.tableData2.push({
    //     address1: '立即处理',
    //     address2: '雨水',
    //     address3: '主干管网',
    //     address4: '2563km',
    //     address5: '5563km',
    //     address6: '63km'
    //   })
    //   this.tableData3.push({
    //     address1: '2022-3-12',
    //     address2: '青羊区6号',
    //     address3: '0.418mm',
    //     address4: '警告原因内容'
    //   })
    // }
    this.getHiddenDangerCount()
    this.getWarningPage()
    this.loadChart()
  },
  methods: {
    /**
     * 按管网评估情况统计
     */
    loadChart() {
      let chartDom = this.$refs.chart1
      let myChart = echarts.init(chartDom)
      getReportCondision().then((res) => {
        let result = res.result
        let option = {
          tooltip: {
            trigger: 'item'
          },
          color: ['#15d0ea', '#f6b638'],
          series: [
            {
              name: '管网评估情况',
              type: 'pie',
              radius: '80%',
              data: result,
              label: {
                formatter: '{b}\n{d}%',
                fontSize: 14,
                fontWeight: 500
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart.clear()
        option && myChart.setOption(option)
      })
    },
    /**
     * 隐患统计信息
     */
    getHiddenDangerCount() {
      getHiddenDangerCount({ hiddenDangerType: 3 }).then((res) => {
        this.allCount = res.result.allCount
        this.wsCount = res.result.wsCount
      })
    },
    /**
     *监测点告警情况分页查询
     */
    getWarningPage() {
      let params = JSON.parse(JSON.stringify(this.pagination))
      getWarningPage(params).then((res) => {
        if (res.code == 1) {
          console.log('res', res)
          this.tableData3 = res.result.records
          this.pagination.total = res.result.total
        }
      })
    },
    viewCurve(row = null) {
      this.moniterVisible = true
      if (row) {
        this.$refs.moniterSee.open()
      }
    },
    moniterClose() {
      this.moniterVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>