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

<template>
  <div class="page-panel">
    <div class="params-panel">
      <div class="head-title">显示设置</div>
      <el-form ref="form" :model="form" label-width="auto" size="small">
        <el-form-item label="管点选择">
          <el-select v-model="form.siteId" filterable placeholder="选择站点" style="width:158px">
            <el-option v-for="(item,index) in siteOption" :key="index" :label="item.siteName" :value="item.id"></el-option>
          </el-select>
          <el-button type="warning">图上选择</el-button>
        </el-form-item>
        <el-form-item label="追踪距离">
          <el-input-number v-model="form.num" controls-position="right" :min="1" :max="10000" style="width:158px"></el-input-number>
          <el-checkbox v-model="form.checked">不限距离</el-checkbox>
        </el-form-item>
        <el-form-item label="追踪方式">
          <el-checkbox v-model="form.checked">上游追踪</el-checkbox>
          <el-checkbox v-model="form.checked">下游追踪</el-checkbox>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button type="primary" style="width:100%">分析</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 结果 -->
    <div class="result-box">
      <div class="head-title">分析结果概览</div>
      <div class="res-items">
        <div class="res-item">
          <span>连通管线</span>
          <span>100.89m</span>
        </div>
        <div class="res-item">
          <span>连通排水设施</span>
          <span>43个</span>
        </div>
        <div class="res-item">
          <span>连通监测设备</span>
          <span>9个</span>
        </div>
      </div>
      <div class="head-title">管线</div>
      <div class="chart-box" id="pipeChart">

      </div>
      <div class="head-title">排水设施</div>
      <div class="chart-box" id="facilityChart">

      </div>
      <div class="head-title">
        <span>监测设备</span>
        <span type="text" class="link-btn" @click="monitorView()">监测查看</span>
      </div>
      <el-table :data="tableData" style="width: 100%" :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="name" label="监测点名称" align="center"></el-table-column>
        <el-table-column prop="address" label="设备类型" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import historyCurve from '@/views/spectrum/common/historyCurve/index'

import * as echarts from 'echarts'
export default {
  components: {
    historyCurve
  },
  data() {
    return {
      form: {
        num: 200
      }
    }
  },
  created() {},
  mounted() {
    this.loadPipeLineChart()
    this.loadFacilityChart()
  },
  destroyed() {},
  methods: {
    loadPipeLineChart() {
      let chartDom = document.getElementById('pipeChart')
      let myChart = echarts.init(chartDom)
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          itemWidth: 10,
          itemHeight: 10,
          icon: 'circle',
          bottom: 2,
          textStyle: {
            color: '#959595',
            fontSize: 11,
            fontWeight: '500'
          }
        },
        series: [
          {
            name: '管线',
            type: 'pie',
            radius: '55%',
            itemStyle: {
              borderColor: '#fff',
              normal: {
                color: function (colors) {
                  var colorList = ['#4ecb73', '#3aa1ff', '#36cbcb', '#ebb563', '#e97a20', '#237cc0']
                  return colorList[colors.dataIndex]
                },
                label: {
                  show: true,
                  formatter: '{b}:{d}%'
                }
              }
            },
            center: ['50%', '40%'],
            data: [
              { value: 1048, name: '雨水' },
              { value: 580, name: '污水' },
              { value: 735, name: '雨污合流' }
            ]
          }
        ]
      }
      option && myChart.setOption(option)
    },
    loadFacilityChart() {
      let chartDom = document.getElementById('facilityChart')
      let myChart = echarts.init(chartDom)
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '8%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['阀门', '排放口', '污水厂入口', '污水厂出口', '泵站'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '排水设施',
            type: 'bar',
            barWidth: '60%',
            data: [90, 160, 200, 334, 390, 330, 220],
            itemStyle: {
              color: '#3aa1ff'
            }
          }
        ]
      }
      option && myChart.setOption(option)
    },
    /**
     * 监测查看
     */
    monitorView() {
      const data = {
        pathId: '/spectrum/reform/monitorView',
        widgetid: 'FullPanel',
        label: '监测查看',
        param: {}
      }
      this.$store.dispatch('map/handelClose', data)
      this.$store.dispatch('map/changeMethod', data)
    }
  }
}
</script>

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