Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

zhangshuaibao

2021-04-07 4eb0ca2b0e1e7b43a0b56fe392f632cb84966802

 src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue

@@ -1,27 +1,57 @@
<template>
    <div id="Tab">
        <div class="Infomation">
        <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">
        <div>
          <el-button size="mini" round @click="dialogVisible = true">明细表</el-button>
          <el-dialog  :visible.sync="dialogVisible"
                      :append-to-body="true"
                      width="66%"
                      center
                      >
            <div class="el-dialog-div" style="height: 600px">
              <public-detailed-list v-bind="$attrs"></public-detailed-list>
        <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"
                           :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"
                           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>
          </el-dialog>
            <div style="width:750px;height:260px;" id="echarts" ref="main">
            </div>
        </div>
        <div style="width:750px;height:260px;" id="echarts" ref="main">
        </div>
      </div>
    </div>
</template>

@@ -34,13 +64,11 @@
  },
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    drawChart: function () {
      const myChart = this.$echarts.init(this.$refs.main)
      const option = {
      watchData: [],
      dialogVisible: false,
      dataDate: [],
      value: '',
      options: {
        title: {
          // text: '折线图堆叠'
        },
@@ -120,7 +148,7 @@
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2021.01.01', '2021.01.02', '2021.01.03', '2021.01.04', '2021.01.05', '2021.01.06', '2021.01.07'],
          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,
@@ -195,21 +223,40 @@
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      },
      formInline: {
        user: '',
        region: ''
      }
      myChart.setOption(option)
    }
  },
  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{
    .infomation {
        margin-left: 10px;
    }
    .el-tag{

    .el-tag {
        height: 25px;
        line-height: 25px;
        margin-right: 10px;
@@ -219,21 +266,43 @@
        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;
      }
      #echarts {
        margin: 0;
        padding: 0;
        //border: 1px solid #396d83;

    .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>