~xingchuan/SewerAndRainNetwork.git

<template>
    <div id="Tab">
        <div class="infomation">
            <el-tag>氮氧化物 : 29.93 标准 : 100</el-tag>
            <el-tag>二氧化硫 : 17.34 标准 : 50</el-tag>
            <el-tag>烟尘 : 6.93 标准 : 30</el-tag>
            <el-tag>废气流量 : 120343.18</el-tag>
        </div>
        <div class="form-echrts">
            <!--    :title="this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName"      -->
            <div class="from-search">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
<!--                    <el-form-item label="审批人">-->
<!--                        <el-input v-model="formInline.user" placeholder="审批人"></el-input>-->
<!--                    </el-form-item>-->
                    <div class="block">
                        <el-date-picker
                                class="date"
                                v-model="value"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                    <el-form-item label="采样点数" class="text-size">
                        <el-select v-model="formInline.region" placeholder="0">
                            <el-option label="0" value="shanghai"></el-option>
                            <el-option label="25" value="beijing"></el-option>
                            <el-option label="50" value="beijing"></el-option>
                            <el-option label="75" value="beijing"></el-option>
                            <el-option label="100" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-button size="mini" round @click="dialogVisible = true">明细表</el-button>
                <el-dialog :visible.sync="dialogVisible"
                           :append-to-body="true"
                           width="68%"
                           center
                           v-dialogDrag
                >
                    <div class="el-dialog-div" style="height: 500px">
                        <public-detailed-list v-bind="$attrs"></public-detailed-list>
                    </div>
                </el-dialog>
            </div>
            <div style="width:750px;height:260px;" id="echarts" ref="main">
            </div>
        </div>
    </div>
</template>
 
<script>
import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList'
 
export default {
  name: 'ECharts',
  components: {
    PublicDetailedList
  },
  data () {
    return {
      watchData: [],
      dialogVisible: false,
      dataDate: [],
      value: '',
      options: {
        title: {
          // text: '折线图堆叠'
        },
        color: ['#5470c6', '#91CC75', '#EE6666', '#FF0087'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              color: '#1a4245'
            }
          }
        },
        legend: {
          x: '200px',
          y: '30px',
          data: [{
            name: '氮氧化物',
            textStyle: {
              color: '#00d0f9'
            }
          },
          {
            name: '二氧化硫',
            textStyle: {
              color: '#00d0f9'
            }
          },
          {
            name: '烟尘',
            textStyle: {
              color: '#00d0f9'
            }
          },
          {
            name: '废气流量',
            textStyle: {
              color: '#00d0f9'
            }
          }]
          // pageTextStyle: {
          //   color: '#fff'
          // }
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          // top: '1%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        // 图标缩放设置
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: 100
        }, {
          start: 0,
          end: 100,
          show: false,
          // handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          }
        }],
        // x轴的设置
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['12:00:00', '13:00:00', '14:00:00', '15:00:00', '16:00:00', '17:00:00', '18:00:00'],
          axisLabel: { // x轴全部显示
            rotate: 20,
            interval: 0,
            textStyle: {
              color: '#fff'
            }
          },
          splitLine: { // 网格垂直线为虚线
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisTick: { // x 轴刻度显示
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1 // 这里是为了突出显示加上的
            }
          }
        },
        // Y 轴的设置
        yAxis: [{
          type: 'value',
          // position: 'left', // 多 Y 轴使用
          // name: yname, // 后期图标Y轴显示单位
          name: '浓度(mg/m³)',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff' // 坐标的字体颜色
            }
          },
          axisPointer: {
            snap: true // 自动吸附最近的点
          },
          splitLine: {
            show: false // y轴 网格线不显示
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff', // 坐标轴的颜色
              width: 1
            }
          }
        }],
        series: [
          {
            name: '氮氧化物',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '二氧化硫',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '烟尘',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '废气流量',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      },
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    drawChart: function () {
      const myChart = this.$echarts.init(this.$refs.main)
      myChart.setOption(this.options)
    }
  },
  mounted () {
    this.drawChart()
    const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getWasteWaterMonitoring))
    console.log(dataWatch)
    for (var i = 0; i < dataWatch.length; i++) {
      this.dataDate.push(dataWatch[i].MonTimeStr.substring(10, 17))
    }
    console.log(this.dataDate)
  }
}
</script>
 
<style scoped lang="less">
    .infomation {
        margin-left: 10px;
    }
 
    .el-tag {
        height: 25px;
        line-height: 25px;
        margin-right: 10px;
        font-size: 10px;
        background-color: rgba(0, 255, 246, 0.14);
        color: #00d0f9;
        border: none;
        padding: 0 15px;
    }
 
    .form-echrts {
        width: 100%;
        height: 100%;
        border: 1px solid #396d83;
        //margin: 10px 10px 10px 10px;
        .el-dialog-div {
            //height: 50vh!important;
            overflow: auto;
            //overflow: hidden;
        }
        .block{
            .date{
                width: 300px;
                height: 30px;
            }
        }
        .text-size{
            display: flex;
            justify-content: space-around;
        }
        .from-search{
            display: flex;
            justify-content: space-around;
            .demo-form-inline{
                display: flex;
                justify-content: space-around;
            }
            .el-button--mini, .el-button--mini.is-round{
                height: 30px;
            }
        }
        #echarts {
            margin: 0;
            padding: 0;
            //border: 1px solid #396d83;
            //margin: 10px 10px 10px 10px;
        }
    }
</style>