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

QibolinCzp

2021-05-14 6a6e940cc87ad0813998f89ac83447c3d6915d29

 src/components/BaseNav/WasteGas/HourData.vue

@@ -1,33 +1,26 @@
<!--  小时数据  -->
<template>
  <div id="Tab">
    <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
    <div class="form-echrts">
      <div class="from-search">
        <div class="pickerMon">
          <div class="pickerData">
            <span> 开始时间:</span>
            <span class="pickerTable">
                          <el-date-picker type="datetime" v-model="formInline.timeStart"></el-date-picker>
                        </span>
          </div>
          <div class="pickerData">
            <span>结束时间:</span>
            <span class="pickerTable">
                            <el-date-picker type="datetime" v-model="formInline.timeEnd"></el-date-picker>
                        </span>
          </div>
        </div>
        <div class="detailbtn">查询</div>
        <div class="detailbtn" @click="ScheduleShow">明细表</div>
      </div>
      <div style="width:5rem;height:1.5rem;" id="echarts" ref="wastegashour"></div>
  <div class="echarts-box">
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
    </div>
<!--    明细弹框-->
    <el-dialog :visible.sync="showSchedule"
               :modal="false"
               v-dialogDrag
    >
    <div class="echarts-form">
      <span class="demonstration">开始时间：</span>
      <el-date-picker v-model="formData.timeStart" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="mini"></el-date-picker>
      <span class="demonstration">结束时间：</span>
      <el-date-picker v-model="formData.timeEnd" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="mini"></el-date-picker>
      <span class="demonstration">采样点数：</span>
      <el-select v-model="formData.region" placeholder="请选择" size="mini" >
        <el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option>
      </el-select>
      <el-button @click="querySearch">查询</el-button>
      <el-button @click="ScheduleShow">明细表</el-button>
    </div>
    <div class="echarts-chart">
      <div ref="wastegashour"></div>
    </div>
    <span class="time-select">{{ formData.timeStart }}时—{{ formData.timeEnd }}时</span>
    <!--    明细弹框-->
    <el-dialog :visible.sync="showSchedule" :modal="false" v-dialogDrag>
      <div class="el-dialog-div" style="height: 200px">
        <Scheduleof></Scheduleof>
      </div>
@@ -36,10 +29,10 @@
</template>

<script>
// import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList'
import Scheduleof from '@components/BaseNav/WasteGas/Scheduleof'
import PublicDataStandard from '../PublicDataStandard'

import 'dayjs/locale/es'
import dayjs from 'dayjs'
import mapApi from '@/api/mapApi'

@@ -94,9 +87,11 @@
            val: null
          }
        }],
      formInline: {
        timeStart: null,
        timeEnd: null
      formData: {
        region: '25',
        regionList: [25, 50, 75, 100],
        timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss'),
        timeEnd: dayjs().format('YYYY-MM-DD HH:mm:ss')
      },
      showSchedule: false,
      dataType: 2,
@@ -115,15 +110,16 @@
    ScheduleShow () {
      this.showSchedule = !this.showSchedule
    },
    querySearch () {
      console.log('查询')
      this.initnData()
    },
    async initnData () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
      this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
      this.formInline.timeStart = dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss')
      const data = {
        onLineMonEmissPointId: 23,
        monItemId: 28,
        beginTime: this.formInline.timeStart,
        endTime: this.formInline.timeEnd,
        beginTime: this.formData.timeStart,
        endTime: this.formData.timeEnd,
        dataType: this.dataType
      }
      const result = (await mapApi.getWasteGasMonData(data)).Result.DataInfo
@@ -276,7 +272,7 @@
            iconurl = 'image://../assets/imgs/legend/grn.png'
          } else if (nameList[l] === '温度') {
            iconurl = 'image://../assets/imgs/legend/WenDu.png'
          } else {
          } else if (nameList[l] === '废气流量') {
            iconurl = 'image://../assets/imgs/legend/VOCs.png'
          }

@@ -320,12 +316,9 @@
          } else if (nameList[j] === '烟尘') {
            zdcbcolor = 'red'
            zxcolor = '#f48183'
          } else if (nameList[j] === '温度') {
          } else if (nameList[j] === '废气流量') {
            zdcbcolor = 'red'
            zxcolor = '#F206FF'
          } else {
            zdcbcolor = 'red'
            zxcolor = '#9ACD32'
            zxcolor = '#8fdc6e'
          }
          const ydata = {
            name: nameList[j],
@@ -350,6 +343,7 @@
    },
    CreateChart (id, title, legend, xdata, ydatas, yname, jcdID, datatype) {
      this.myChart = this.$echarts.init(this.$refs.wastegashour)
      this.myChart.clear()
      // this.myChart .clear()
      let dataUnit = ''
      if (datatype === 1) {
@@ -357,6 +351,8 @@
      } else {
        dataUnit = '气量(m³/h)'
      }

      const bzzList = this.exhbzzList

      const serLists = []
      for (let j = 0; j < ydatas.length; j++) {
@@ -369,7 +365,7 @@
      }

      for (let i = 0; i < ydatas.length; i++) {
        // const zdcbcolor = ydatas[i].zdcbcolor
        const zdcbcolor = ydatas[i].zdcbcolor
        const bzz = ydatas[i].bzz
        let obj
        if (bzz == null) {
@@ -379,31 +375,33 @@
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            yAxisIndex: 1,
            // itemStyle: {
            //   normal: {
            //     color: function (c) { // 根据value 显示不同的折点颜色
            //       let biaozhuiz
            //       for (let i = 0; i < exhbzzList.length; i++) {
            //         if (exhbzzList[i].name === c.seriesName) {
            //           biaozhuiz = exhbzzList[i].bzhui
            //         }
            //       }
            //       if (c.value > 999999999999) {
            //         return zdcbcolor
            //       } else {
            //         return '#33c95f'
            //       }
            //     },
            //     lineStyle: { // 折线的颜色
            //       color: ydatas[i].zxcolor,
            //       width: 5
            //     },
            //     borderColor: ydatas[i].zxcolor, // 折点边框的颜色
            //     label: { // 显示值
            //       show: false
            //     }
            //   }
            // },
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  let biaozhuiz
                  for (let i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name === c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                    }
                  }
                  if (c.value[1] > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value[1] > biaozhuiz * 0.9) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
                  }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
                },
                borderColor: ydatas[i].zxcolor, // 折点边框的颜色
                label: { // 显示值
                  show: false
                }
              }
            },
            type: 'line',
            data: ydatas[i].data
          }
@@ -415,21 +413,21 @@
            smooth: false, // 直线 ，true 为曲线
            itemStyle: {
              normal: {
                // color: function (c) { // 根据value 显示不同的折点颜色
                //   let biaozhuiz
                //   for (let i = 0; i < exhbzzList.length; i++) {
                //     if (exhbzzList[i].name == c.seriesName) {
                //       biaozhuiz = exhbzzList[i].bzhui
                //     }
                //   }
                //   if (c.value > biaozhuiz) {
                //     return zdcbcolor
                //   } else if (c.value > biaozhuiz * 0.9) {
                //     return '#FFA500'
                //   } else {
                //     return '#33c95f'
                //   }
                // },
                color: function (c) { // 根据value 显示不同的折点颜色
                  let biaozhuiz
                  for (let i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name === c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                    }
                  }
                  if (c.value[1] > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value[1] > biaozhuiz * 0.9) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
                  }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
@@ -513,7 +511,7 @@
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f48183;"></span>'
              } else if (seriesName === '温度') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#F206FF;"></span>'
              } else {
              } else if (seriesName === '废气流量') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>'
              }
              s += maker + seriesName + ':' + valueFliter + '<br />'
@@ -529,7 +527,7 @@
        },
        grid: { // 网格
          top: '20%',
          left: '5%'
          left: '15%'
          // containLabel: true
        },
        legend: { // 图例
@@ -623,7 +621,7 @@
          type: 'value',
          name: dataUnit,
          max: function (value) {
            const ma = value.max > 120 ? value.max : 120
            const ma = value.max > 12 ? value.max : 12
            return parseInt(ma)
          },
          axisLabel: {
@@ -654,106 +652,4 @@
</script>

<style scoped lang="less">
.animation {
  .infomation {
    padding: 0.02rem 0.04rem;

    .grid-content {
      font-size: 0.08rem;
      background-color: #2e4967;
      text-align: center;
      border-radius: 0.01rem;
      height: 0.15rem;
      line-height: 0.15rem;
      margin-right: 0.04rem;
      padding: 0 0.04rem
    }
  }
}

.form-echrts {
  width: 100%;
  border-top: 1px solid #396d83;
  //margin: 10px 10px 10px 10px;
  .from-search {
    display: flex;
    padding: 0.02rem;

    > div {
      margin-left: 10px
    }

    .pickerMon {
      display: flex;

      > div:first-child {
        margin-right: 10px;
      }

      .pickerData {
        flex: 1;
        display: flex;

        > span {
          line-height: 22px
        }

        .pickerTable {
          margin-left: 3px;
        }
      }
    }

    /deep/ .el-date-editor--datetime {
      width: 100%;
    }

    /deep/ .el-input__inner {
      position: relative;
      width: 1rem;
      background-color: #2e4967;
      color: #fff;
      font-size: 0.08rem;
      height: 0.15rem;
      padding: 0;
      border: none;
      z-index: 9999;
      text-align: center;
      //padding-left:20px ;
      //padding: 0!important;
    }

    /deep/ .el-input__icon {
      display: block;
      width: 1rem;
      height: 0.15rem;
      line-height: 0.15rem;
      cursor: pointer;
      font-size: 0;
    }

    input::-webkit-calendar-picker-indicator {
      opacity: 100;
    }

    .detailbtn {
      background-color: #2e4967;
      text-align: center;
      padding: 0 7px;
      height: 0.15rem;
      line-height: 0.15rem;
      border-radius: 4px;
      margin-right: 6px;
    }
  }

  .el-dialog-div {
    overflow: auto;
  }

  #echarts {
    margin: 0;
    padding: 0;
  }
}
</style>