废水弹框修改

chenzeping

2021-04-21 4321a8bc0ccc14866b65871fee390839499d9204

废水弹框修改

 src/components/BaseNav/WasteGas/HourData.vue

@@ -314,7 +314,7 @@
          if (nameList[j] === '二氧化硫') {
            zdcbcolor = 'red'
            zxcolor = '#fff21c'
          } else if (nameList[j] === '氮氧化物') {
          } else if (nameList[j] === '氨氮') {
            zdcbcolor = 'red'
            zxcolor = '#00B0F0'
          } else if (nameList[j] === '烟尘') {

 src/components/BaseNav/WasteGas/RealData.vue

@@ -130,7 +130,6 @@
        $step: 15
      }
      const result = (await mapApi.DataItems(data)).data
      console.log(result)
      this.getRtdb15s(result)
    },
    // echarts数据处理
@@ -294,7 +293,7 @@
          // 临时数据
          const BBZMAPPING = [
            {
              COD: 35,
              二氧化碳: 35,
              ph: 9,
              总氮: 15,
              总磷: 0.3,
@@ -425,13 +424,13 @@
          }
        }

        if (ydatas[i].name === '废气流量' || ydatas[i].name === '废气') {
        if (ydatas[i].name === '氮氧化物' || ydatas[i].name === '废气') {
          obj.yAxisIndex = 1
        }
        // 临时
        const datatype = 1
        if (datatype === 1) {
          dataUnit = '流量(m³/d)'
          dataUnit = '废气流量(m³/d)'
        } else {
          dataUnit = '流量(m³/h)'
        }
@@ -551,9 +550,10 @@
        yAxis: [{
          type: 'value',
          name: yname,
          max: function (value) {
            return parseInt(value.max + 30)
          },
          // max: function (value) {
          //   console.log(value)
          //   return parseInt(value.max + 30)
          // },
          axisLabel: {
            formatter: '{value}',
            textStyle: {

 src/components/BaseNav/WasteGas/WasteGasIndex.vue

@@ -9,20 +9,39 @@
        <span></span>
        <span></span>
        <span></span>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="实时数据" name="first">
            <RealData></RealData>
          </el-tab-pane>
          <el-tab-pane label="小时数居" name="second">
            <HourData></HourData>
          </el-tab-pane>
          <el-tab-pane label="日数据" name="third">
            <DayData></DayData>
          </el-tab-pane>
          <el-tab-pane label="人工监测数据" name="fourth">
            <Detail></Detail>
          </el-tab-pane>
        </el-tabs>
        <!--        <el-tabs v-model="activeName" @tab-click="handleClick">-->
        <!--          <el-tab-pane label="实时数据" name="first">-->
        <!--            <RealData></RealData>-->
        <!--          </el-tab-pane>-->
        <!--          <el-tab-pane label="小时数居" name="second">-->
        <!--            <HourData></HourData>-->
        <!--          </el-tab-pane>-->
        <!--          <el-tab-pane label="日数据" name="third">-->
        <!--            <DayData></DayData>-->
        <!--          </el-tab-pane>-->
        <!--          <el-tab-pane label="人工监测数据" name="fourth">-->
        <!--            <Detail></Detail>-->
        <!--          </el-tab-pane>-->
        <!--          <el-tab-pane label="ccc" name="five"></el-tab-pane>-->
        <!--        </el-tabs>-->
        <div class="legend">
          <!--          <span>正常</span>-->
          <p>超标</p>
          <i style=" background: #4ec99c;"></i>
          <!--          <span>预警</span>-->
          <p>预警</p>
          <i style=" background: orange;"></i>
          <!--          <span>超标</span>-->
          <p>超标</p>
          <i style=" background: red;"></i>
        </div>
        <ul class="tab">
          <li :class="active===0?'hover':''" @click='tabTaggle("RealData",0)'>实时数据</li>
          <li :class="active===1?'hover':''" @click='tabTaggle("HourData",1)'>小时数据</li>
          <li :class="active===2?'hover':''" @click='tabTaggle("DayData",2)'>日数据</li>
          <li :class="active===3?'hover':''" @click='tabTaggle("Detail",3)'>人工监测数据</li>
        </ul>
        <component :is="currentTab" ref="RealData"></component>
      </div>
    </template>
    <template v-slot:video>
@@ -56,12 +75,19 @@
  },
  data () {
    return {
      activeName: 'first'
      activeName: 'first',
      // currentTab: this.current(),
      currentTab: RealData,
      active: 0
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    tabTaggle (taggleMenu, num) {
      this.currentTab = taggleMenu
      this.active = num
    },
    current (currentTab) {
      currentTab = RealData
    }
  }
}
@@ -69,6 +95,52 @@

<style lang="less" scoped>

.tab {
  display: flex;
  //border-bottom: 1px solid #396d83;
  //padding: 0.02rem 0.04rem;
}

.tab li {
  background-color: #243a55;
  line-height: 0.15rem;
  height: 0.15rem;
  text-align: center;
  border-radius: 5px;
  margin-right: 0.04rem;
  padding: 0 0.04rem;
}

.tab li.hover,
.tab li:hover {
  background-color: #0e639e;
  color: #fff;
  cursor: pointer;
}

.legend {
  position: absolute;
  top: 0.05rem;
  right: 0;
  display: flex;
  justify-items: center;
  align-items: center;
}

.legend i {
  display: block;
  width: 0.2rem;
  height: 0.09rem;
  margin: 0 0.1rem 0 0.05rem;
  border-radius: 0.02rem;
}

.legend span {
  line-height: 0.09rem;
  height: 0.09rem;
  font-size: 0.06rem;
}

.public-part {
  position: relative;
  margin-bottom: 0.1rem;

 src/components/BaseNav/WasteWater/DayData.vue

@@ -1,12 +1,15 @@
<!--  日数据  -->
<template>
  <div id="Tab">
    <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
      <span class="time-select">{{ timeStart }}日——{{ timeEnd }}日</span>
    </div>
    <div class="form-echrts">
      <div class="from-search">
        <div class="pickerMon">
          <div class="pickerData">
            <span> 开始时间:</span>
            <span>开始时间:</span>
            <span class="pickerTable">
              <el-date-picker type="datetime" v-model="formInline.timeStart"></el-date-picker>
            </span>
@@ -109,6 +112,8 @@
        timeStart: '',
        timeEnd: ''
      },
      timeStart: '',
      timeEnd: '',
      chart: null,
      dataType: 1,
      jcdID: 1,
@@ -122,6 +127,8 @@
    })
    this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
    this.formInline.timeStart = dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss')
    this.timeEnd = dayjs().format('YYYY-MM-DD')
    this.timeStart = dayjs().subtract(1, 'month').format('YYYY-MM-DD')
  },
  methods: {
    async draw24Chart () {
@@ -598,13 +605,30 @@
  }
}

.tab-scroll {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .time-select {
    cursor: pointer;
    padding: 5px;
    border: 1px solid #2b87c8;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    font-size: 11px;
    width: 280px;
  }
}

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

    > div {
      margin-left: 10px
@@ -622,7 +646,8 @@
        display: flex;

        > span {
          line-height: 22px
          line-height: 22px;
          margin-right: 15px;
        }

        .pickerTable {

 src/components/BaseNav/WasteWater/HourData.vue

@@ -1,6 +1,9 @@
<template>
  <div id="Tab">
    <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
      <span class="time-select">{{ timeStart }}时——{{ timeEnd }}时</span>
    </div>
    <div class="form-echrts">
      <div class="from-search">
        <div class="pickerMon">
@@ -87,6 +90,8 @@
        timeStart: '',
        timeEnd: ''
      },
      timeEnd: dayjs().format('YYYY-MM-DD HH'),
      timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH'),
      chart: null,
      jcdID: 1,
      dataType: 2,
@@ -128,7 +133,7 @@
            continue
          }

          var MonTimeStr = d[i].MonTimeStr
          const MonTimeStr = d[i].MonTimeStr

          // getWRW(d[i])

@@ -176,7 +181,7 @@
          if (nameList.length === 0) {
            nameList.push(d[i].PoltmtrlName.trim())
            dateList.push(strDate)
            /*  var data=new Array();
            /*  let data=new Array();
              data.push(d.MonQty); */
            if ((d[i].PoltmtrlName === '废水流量' || d[i].PoltmtrlName === '废水') && d[i].MonQty < 0) {
              d[i].MonQty = 0
@@ -216,7 +221,7 @@
        const newList = []

        for (let i = 0; i < dataList.length; i++) {
          var list = dataList[i].reverse()
          const list = dataList[i].reverse()
          newList.push(list)
        }
        dataList = newList
@@ -267,11 +272,11 @@
        }
        lengList.push(objTemp)

        var legend = lengList
        var xdata = dateList.reverse()
        var ydatas = []
        const legend = lengList
        const xdata = dateList.reverse()
        const ydatas = []

        for (var j = 0; j < nameList.length; j++) {
        for (let j = 0; j < nameList.length; j++) {
          let zdcbcolor, zxcolor
          if (nameList[j] === 'COD') {
            zdcbcolor = 'red'
@@ -282,12 +287,12 @@
          } else if (nameList[j] === '总磷') {
            zdcbcolor = 'red'
            zxcolor = '#f48183'
          } else if (nameList[j] === '总氮') {
            zdcbcolor = 'red'
            zxcolor = '#d9f2f4'
          } else {
          } else if (nameList[j] === '废水流量') {
            zdcbcolor = 'red'
            zxcolor = '#9ACD32'
          } else {
            zdcbcolor = 'red'
            zxcolor = '#d9f2f4'
          }
          const ydata = {
            name: nameList[j],
@@ -304,61 +309,62 @@
          this.bzzList.push(this.bzz)
          ydatas.push(ydata)
        }
        console.log(ydatas)

        var yname = '浓度(mg/l)'
        const yname = '浓度(mg/l)'

        this.effChartShow(divid, title, legend, xdata, ydatas, yname, this.jcdID, this.datatype)
      }
    },
    effChartShow (divid, title, legend, xdata, ydatas, yname, jcdID, datatype) {
      this.chart = this.$echarts.init(this.$refs.echartsHour)
      // console.log(this.chart)
      this.chart.clear()
      var dataUnit = ''
      console.log(ydatas)
      // this.chart.clear()
      let dataUnit = ''
      if (datatype === 1) {
        dataUnit = '流量(m³/d)'
      } else {
        dataUnit = '流量(m³/h)'
      }
      var serLists = []
      for (var i = 0; i < ydatas.length; i++) {
        // var zdcbcolor = ydatas[i].zdcbcolor
        var bz = ydatas[i].bzz
        var obj
      const serLists = []
      for (let i = 0; i < ydatas.length; i++) {
        // let zdcbcolor = ydatas[i].zdcbcolor
        const bz = ydatas[i].bzz
        let obj
        if (bz) {
          obj = {
            name: ydatas[i].name,
            symbol: 'circle', // 折点形状
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            // itemStyle: {
            //   normal: {
            //     color: function (c) { // 根据value 显示不同的折点颜色
            //       // var biaozhuiz
            //       let bzlist = this.bzzList
            //       for (let i = 0; i < this.bzzList.length; i++) {
            //         if (this.bzzList[i].name === c.seriesName) {
            //           this.bz = this.bzzList[i].bzhui
            //         }
            //       }
            //       if (c.value > this.bz) {
            //         return zdcbcolor
            //       } else if (c.value > this.bz * 0.9) {
            //         return '#FFA500'
            //       } else {
            //         return '#33c95f'
            //       }
            //     },
            //     lineStyle: { // 折线的颜色
            //       color: ydatas[i].zxcolor,
            //       width: 5
            //     },
            //     borderColor: 'black', // 折点边框的颜色
            //     label: { // 显示值
            //       show: false
            //     }
            //   }
            // },
            itemStyle: {
              normal: {
                // color: function (c) { // 根据value 显示不同的折点颜色
                //   // let biaozhuiz
                //   let bzlist = this.bzzList
                //   for (let i = 0; i < this.bzzList.length; i++) {
                //     if (this.bzzList[i].name === c.seriesName) {
                //       this.bz = this.bzzList[i].bzhui
                //     }
                //   }
                //   if (c.value > this.bz) {
                //     return zdcbcolor
                //   } else if (c.value > this.bz * 0.9) {
                //     return '#FFA500'
                //   } else {
                //     return '#33c95f'
                //   }
                // },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
                },
                borderColor: 'black', // 折点边框的颜色
                label: { // 显示值
                  show: false
                }
              }
            },
            type: 'line',
            data: ydatas[i].data,
            markLine: { // 平均值 ， 和 指标上限
@@ -391,7 +397,7 @@
            // itemStyle: {
            //   normal: {
            //     color: function (c) { // 根据value 显示不同的折点颜色
            //       // var biaozhuiz
            //       // let biaozhuiz
            //       for (let i = 0; i < this.bzzList.length; i++) {
            //         if (this.bzzList[i].name === c.seriesName) {
            //           this.bz = this.bzzList[i].bzhui
@@ -419,7 +425,7 @@
        }
        serLists.push(obj)
      }
      var option = {
      const option = {
        /*  title: {
          text: title,
      }, */
@@ -432,28 +438,28 @@
            }
          },
          formatter: function (params) {
            var s = params[0].name + '<br />'
            for (var i = 0; i < params.length; i++) {
              // var name = params[i].name
            let s = params[0].name + '<br />'
            for (let i = 0; i < params.length; i++) {
              // let name = params[i].name
              // 图表title名称
              var seriesName = params[i].seriesName
              const seriesName = params[i].seriesName
              // 值
              var value = params[i].value
              const value = params[i].value

              // var valueFliter = formatter(value)
              var valueFliter = parseFloat(value).toFixed(2)
              // let valueFliter = formatter(value)
              const valueFliter = parseFloat(value).toFixed(2)

              var maker = params[i].marker
              let maker = params[i].marker
              if (seriesName === 'COD') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>'
              } else if (seriesName === '氨氮') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00B0F0;"></span>'
              } else if (seriesName === '总磷') {
                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:#d9f2f4;"></span>'
              } else {
              } else if (seriesName === '废水流量') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#9ACD32;"></span>'
              } else {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#d9f2f4;"></span>'
              }
              s += maker + seriesName + ':' + valueFliter + '<br />'
            }
@@ -522,7 +528,7 @@
          type: 'value',
          name: yname,
          // max: function (value) {
          //   var max_val_list = [] // 所有显示折线的标准值
          //   let max_val_list = [] // 所有显示折线的标准值
          //   if (bzzList && bzzList.length > 0) {
          //     $.each(bzzList, function (index, item) {
          //       max_val_list.push(item.bzhui)
@@ -531,7 +537,7 @@
          //   max_val_list = max_val_list.sort(function (a, b) {
          //     return a - b
          //   }) // 排序
          //   var ma = value.max > max_val_list[max_val_list.length - 1] ? value.max + 5 : max_val_list[max_val_list.length - 1]
          //   let ma = value.max > max_val_list[max_val_list.length - 1] ? value.max + 5 : max_val_list[max_val_list.length - 1]
          //   return parseInt(ma)
          // },
          axisLabel: {
@@ -586,6 +592,24 @@
</script>

<style scoped lang="less">
.tab-scroll {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .time-select {
    //margin: 0 10px;
    cursor: pointer;
    padding: 5px;
    border: 1px solid #2b87c8;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    font-size: 11px;
    width: 280px;
  }
}

.grid-content {
  font-size: 8px;
  background-color: #2e4967;
@@ -608,10 +632,10 @@
  //margin: 10px 10px 10px 10px;
  .from-search {
    display: flex;
    padding: 5px;
    padding: 15px 0;

    > div {
      margin-left: 10px
      margin-left: 30px
    }

    .pickerMon {
@@ -626,7 +650,8 @@
        display: flex;

        > span {
          line-height: 22px
          line-height: 22px;
          margin-right: 15px;
        }

        .pickerTable {

 src/components/BaseNav/WasteWater/RealData.vue

@@ -1,6 +1,9 @@
<template>
  <div id="Tab">
    <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
      <span class="time-select">{{ formInline.timeStart }}——{{ formInline.timeEnd }}</span>
    </div>
    <div class="form-echrts">
      <div class="from-search">
        <div class="pickerMon">
@@ -100,6 +103,8 @@
        timeStart: '',
        timeEnd: ''
      },
      // timeStart:,
      // timeEnd:'',

      // echarts的options数据传入
      echartsOptions: {
@@ -647,6 +652,24 @@
  }
}

.tab-scroll {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .time-select {
    //margin: 0 10px;
    cursor: pointer;
    padding: 5px;
    border: 1px solid #2b87c8;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    font-size: 11px;
    width: 280px;
  }
}

.animation {
  //width: 600px;
  //height: 0.06rem;
@@ -661,7 +684,8 @@
  //margin: 10px 10px 10px 10px;
  .from-search {
    display: flex;
    padding: 5px;
    //justify-content: space-evenly;
    padding: 15px 0;

    > div {
      margin-left: 10px

 src/components/BaseNav/WasteWater/WasteWaterIndex.vue

@@ -9,20 +9,37 @@
        <span></span>
        <span></span>
        <span></span>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="实时数据" name="first">
            <RealData></RealData>
          </el-tab-pane>
          <el-tab-pane label="小时数居" name="second">
            <HourData></HourData>
          </el-tab-pane>
          <el-tab-pane label="日数据" name="third">
            <DayData></DayData>
          </el-tab-pane>
          <el-tab-pane label="人工监测数据" name="fourth">
            <Detail></Detail>
          </el-tab-pane>
        </el-tabs>
        <!--        <el-tabs v-model="activeName" @tab-click="handleClick">-->
        <!--          <el-tab-pane label="实时数据" name="first">-->
        <!--            <RealData></RealData>-->
        <!--          </el-tab-pane>-->
        <!--          <el-tab-pane label="小时数居" name="second">-->
        <!--            <HourData></HourData>-->
        <!--          </el-tab-pane>-->
        <!--          <el-tab-pane label="日数据" name="third">-->
        <!--            <DayData></DayData>-->
        <!--          </el-tab-pane>-->
        <!--          <el-tab-pane label="人工监测数据" name="fourth">-->
        <!--            <Detail></Detail>-->
        <!--          </el-tab-pane>-->
        <!--        </el-tabs>-->
        <div class="navigation">
          <div class="navigation-left">
            <div :class="active===0?'hover':''" class="uncheck" @click='tabTaggle("RealData",0)'>实时数据</div>
            <div :class="active===1?'hover':''" class="uncheck" @click='tabTaggle("HourData",1)'>小时数据</div>
            <div :class="active===2?'hover':''" class="uncheck" @click='tabTaggle("DayData",2)'>日数据</div>
            <div :class="active===3?'hover':''" class="uncheck" @click='tabTaggle("Detail",3)'>人工监测数据</div>
          </div>
          <div class="navigation-right">
            <p>正常</p>
            <i style=" background: #4ec99c;"></i>
            <p>预警</p>
            <i style=" background: orange;"></i>
            <p>超标</p>
            <i style=" background: red;"></i>
          </div>
        </div>
        <component :is="currentTab" ref="RealData"></component>
      </div>
    </template>
    <template v-slot:video>
@@ -56,10 +73,19 @@
  },
  data () {
    return {
      activeName: 'first'
      activeName: 'first',
      currentTab: RealData,
      active: 0
    }
  },
  methods: {
    tabTaggle (taggleMenu, num) {
      this.currentTab = taggleMenu
      this.active = num
    },
    current (currentTab) {
      currentTab = RealData
    },
    handleClick (tab, event) {
      console.log(tab, event)
    }
@@ -68,6 +94,69 @@
</script>

<style lang="less" scoped>
.navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px #243a55 solid;

  .navigation-left {
    display: flex;
    align-items: center;

    .uncheck {
      margin: 0 10px;
      cursor: pointer;
      padding: 5px;
      border: 1px solid #2b87c8;
      border-radius: 4px;
      text-align: center;
      color: #fff;
    }

    .default-uncheck {
      background-color: #0e639e;
      color: #fff;
      cursor: pointer;
    }

    .hover {
      background-color: #0e639e;
      color: #fff;
      cursor: pointer;
    }

    .hover:hover {
      cursor: pointer;
      padding: 5px;
      border: 1px solid #2b87c8;
      border-radius: 4px;
      text-align: center;
      color: #fff;
    }
  }

  .navigation-left :hover {
    background-color: #0e639e;
    color: #fff;
    cursor: pointer;
  }

  .navigation-right {
    display: flex;
    align-items: center;

    i {
      display: block;
      width: 0.1rem;
      height: 0.1rem;
      margin: 0 0.1rem 0 0.05rem;
      border-radius: 50%;
      border: 2px #ffffff solid;
    }
  }
}

.public-part {
  position: relative;