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

chenzeping

2021-04-08 4736c1c7b0e388c3c37875f38d5fca914adc5025

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


 Conflicts:

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

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

File was deleted

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

New file
@@ -0,0 +1,299 @@
<!--  小时数据  -->
<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">-->
<!--&lt;!&ndash;                    <el-form-item label="审批人">&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-input v-model="formInline.user" placeholder="审批人"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-form-item>&ndash;&gt;-->
<!--                    <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>-->
            <div style="width:100%;height:1rem;margin-top:-0.1rem;position:absolute;" 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'
            }
          }]
        },
        grid: {
          left: '3%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
        },
        // 图标缩放设置
        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)
      window.onresize = function () {
        var h1 = document.documentElement.clientHeight// 获取屏幕的高度
        if (h1 > 700) {
          myChart.getDom().style.height = 3 + 'rem'
          myChart.getDom().style.width = 6 + 'rem'
        } else {
          myChart.getDom().style.height = 3 + 'rem'
          myChart.getDom().style.width = 6 + 'rem'
        }
        myChart.resize()
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      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;
  height: 0.2rem;
}

.el-tag {
  height: 25px;
    width: 140px;
  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: 1rem;
  border-top: 1px solid #396d83;
  //margin: 10px 10px 10px 10px;
  .el-dialog-div {
    //height: 50vh!important;
    overflow: auto;
    //overflow: hidden;
  }

  #echarts {
    margin: 0;
    padding: 0;
    //height: 3rem;
    //border: 1px solid #396d83;
    //margin: 10px 10px 10px 10px;
  }
}
</style>

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

@@ -1,30 +1,30 @@
<template>
  <div class="win">
    <div class="border_corner border_corner_left_top"></div>
    <div class="border_corner border_corner_right_top"></div>
    <div class="border_corner border_corner_left_bottom"></div>
    <div class="border_corner border_corner_right_bottom"></div>
    <ul class="tab">
      <li @click='tabTaggle("ECharts")'>实时数据</li>
      <li @click='tabTaggle("ECharts")'>小时数据</li>
      <li @click='tabTaggle("ECharts")'>日数据</li>
      <li @click='tabTaggle("ECharts")'>人工数据</li>
    </ul>
    <component :is="currentTab" v-bind="$attrs"></component>
  </div>
    <div class="win">
        <div class="border_corner border_corner_left_top"></div>
        <div class="border_corner border_corner_right_top"></div>
        <div class="border_corner border_corner_left_bottom"></div>
        <div class="border_corner border_corner_right_bottom"></div>
        <ul class="tab">
            <li @click='tabTaggle("ECharts")'>实时数据</li>
            <li @click='tabTaggle("EChartsHour")'>小时数据</li>
            <li @click='tabTaggle("ECharts")'>日数据</li>
            <li @click='tabTaggle("ECharts")'>人工数据</li>
        </ul>
        <component :is="currentTab" v-bind="$attrs"></component>
    </div>
</template>

<script>
import ECharts from './ECharts'
import EChartsHour from './EChartsHour'

export default {
  name: 'PublicChart',
  components: {
    ECharts
    EChartsHour
  },
  data () {
    return {
      currentTab: 'ECharts'
      currentTab: 'EChartsHour'
    }
  },
  methods: {

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

@@ -1,29 +1,31 @@
<template>
  <div class="PublicDetailedList">
    <el-table :data="tableData" max-height="500px">
    <el-table :data="tableData" max-height="500px" border>
      <el-scrollbar style="height: 50vh">
      <el-table-column prop="OnLineMonEmissPointName" label="排放点"></el-table-column>
      <el-table-column prop="MonTimeStr" label="监测时间"></el-table-column>
      <el-table-column  label="氮氧化物">
        <el-table-column prop="MonQty" label="浓度(mg/m³)"></el-table-column>
        <el-table-column prop="OrglQty" label="折算值(mg/m³)"></el-table-column>
        <el-table-column prop="ConvertQty" label="标准值(mg/m³)"></el-table-column>
        <el-table-column prop="EmissQty" label="排放量(kg/h)"></el-table-column>
        <el-table-column prop="MonQty" label="浓度(mg/m³)" width="60"></el-table-column>
        <el-table-column prop="OrglQty" label="折算值(mg/m³)" width="60"></el-table-column>
        <el-table-column prop="ConvertQty" label="标准值(mg/m³)" width="60"></el-table-column>
        <el-table-column prop="EmissQty" label="排放量(kg/h)" width="60"></el-table-column>
      </el-table-column>
      <el-table-column label="二氧化硫">
        <el-table-column prop="MonQty" label="浓度(mg/m³)"></el-table-column>
        <el-table-column prop="OrglQty" label="折算值(mg/m³)"></el-table-column>
        <el-table-column prop="ConvertQty" label="标准值(mg/m³)"></el-table-column>
        <el-table-column prop="EmissQty" label="排放量(kg/h)"></el-table-column>
        <el-table-column prop="MonQty" label="浓度(mg/m³)" width="60"></el-table-column>
        <el-table-column prop="OrglQty" label="折算值(mg/m³)" width="60"></el-table-column>
        <el-table-column prop="ConvertQty" label="标准值(mg/m³)" width="60"></el-table-column>
        <el-table-column prop="EmissQty" label="排放量(kg/h)" width="60"></el-table-column>
      </el-table-column>
      <el-table-column  label="烟尘">
        <el-table-column prop="MonQty" label="浓度(mg/m³)"></el-table-column>
        <el-table-column prop="OrglQty" label="折算值(mg/m³)"></el-table-column>
        <el-table-column prop="ConvertQty" label="标准值(mg/m³)"></el-table-column>
        <el-table-column prop="EmissQty" label="排放量(kg/h)"></el-table-column>
        <el-table-column prop="MonQty" label="浓度(mg/m³)" width="60"></el-table-column>
        <el-table-column prop="OrglQty" label="折算值(mg/m³)" width="60"></el-table-column>
        <el-table-column prop="ConvertQty" label="标准值(mg/m³)" width="60"></el-table-column>
        <el-table-column prop="EmissQty" label="排放量(kg/h)" width="60"></el-table-column>
      </el-table-column>
      <el-table-column  label="废气流量">
        <el-table-column prop="StdValue" label="气量"></el-table-column>
      </el-table-column>
      </el-scrollbar>
    </el-table>
  </div>
</template>

 src/components/table/components/tabHandover.vue

@@ -4,7 +4,8 @@
      <waste-water></waste-water>
    </el-tab-pane>
    <el-tab-pane label="废气" name="second">
      <waste-gas></waste-gas>
      <waste-water></waste-water>
<!--      <waste-gas></waste-gas>-->
    </el-tab-pane>
    <el-tab-pane label="固废" name="third">
      <solid-waste></solid-waste>
@@ -17,14 +18,14 @@

<script>
import WasteWater from '@components/table/components/WasteWater'
import WasteGas from '@components/table/components/WasteGas'
// import WasteGas from '@components/table/components/WasteGas'
import SolidWaste from '@components/table/components/SolidWaste'
import AirQuality from '@components/table/components/AirQuality'
export default {
  name: 'tabHandover',
  components: {
    WasteWater,
    WasteGas,
    // WasteGas,
    SolidWaste,
    AirQuality
  },