废水，废气，废固 弹框样式调试。

chenyabin

2021-05-14 0e2a48bddcf9270f546f87c8b19ea68c3ab4f0b4

 src/components/BaseNav/WasteGas/WasteGasRealChart.vue

@@ -2,36 +2,28 @@
  <div class="echarts-box">
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
      <span class="time-select">{{ formData.startTime }}—{{ formData.endTime }}</span>
    </div>
    <div class="echarts-form">
      <span class="demonstration">开始时间：</span>
      <el-date-picker
          v-model="formData.startTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime">
      </el-date-picker>
      <el-date-picker v-model="formData.startTime" 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.endTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime">
      </el-date-picker>
      <el-date-picker v-model="formData.endTime" 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="请选择" style="width: 80px">
      <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>明细表</el-button>
    </div>
    <div class="echarts-chart">
      <div style="width:5rem;height:1.5rem;" ref="echarts"></div>
      <div ref="echarts"></div>
      <span class="time-select">{{ formData.startTime }}—{{ formData.endTime }}</span>
      <!--      <public-chart :propsData="propsData"></public-chart>-->
    </div>
  </div>
</template>

<script>

// import PublicChart from '../PublicChart'
import PublicDataStandard from '../PublicDataStandard'
import mapApi from '../../../api/mapApi'
import 'dayjs/locale/es'
@@ -40,6 +32,7 @@
export default {
  name: 'WasteGasRealChart',
  components: {
    // PublicChart,
    PublicDataStandard
  },
  data () {
@@ -86,6 +79,7 @@
            val: null
          }
        }],
      propsData: {},

      // 开始 /结束 时间 和采样点值的绑定值数据
      formData: {
@@ -148,9 +142,9 @@
          const nameListTemp = [
            {
              'TJIP45.y2h508CEMS01NOX': '氮氧化物',
              'TJIP45.y2h508CEMS01SO2': '烟尘',
              'TJIP45.y2h508CEMS01F': '二氧化磷',
              'TJIP45.y2h508CEMS01PM': 'ph'
              'TJIP45.y2h508CEMS01SO2': '氧含量',
              'TJIP45.y2h508CEMS01F': '温度',
              'TJIP45.y2h508CEMS01PM': '废气流量'
              // 'TJIP45.lscl2tb552AI10710': '二氧化碳'
            }
          ]
@@ -223,15 +217,15 @@
        for (let l = 0; l < nameList.length; l++) {
          let obj
          let iconUrl
          if (nameList[l] === 'ph') {
          if (nameList[l] === '温度') {
            iconUrl = 'image://../assets/imgs/legend/WenDu.png'
          } else if (nameList[l] === '氮氧化物') {
            iconUrl = 'image://../assets/imgs/legend/NOX.png'
          } else if (nameList[l] === '烟尘') {
            iconUrl = 'image://../assets/imgs/legend/zongdan.png'
          } else if (nameList[l] === '二氧化磷') {
            iconUrl = 'image://../assets/imgs/legend/YanChen.png'
          } else if (nameList[l] === '二氧化碳') {
          } else if (nameList[l] === '氧含量') {
            iconUrl = 'image://../assets/imgs/legend/VOCs.png'
          } else if (nameList[l] === '废气流量') {
            iconUrl = 'image://../assets/imgs/legend/VOCs.png'
          }

@@ -265,7 +259,7 @@

        for (let j = 0; j < nameList.length; j++) {
          let zdcbcolor, zxcolor
          if (nameList[j] === 'ph') {
          if (nameList[j] === '温度') {
            zdcbcolor = 'red'
            zxcolor = '#f206ff'
          } else if (nameList[j] === '烟尘') {
@@ -274,23 +268,21 @@
          } else if (nameList[j] === '氮氧化物') {
            zdcbcolor = 'red'
            zxcolor = '#00B0F0'
          } else if (nameList[j] === '二氧化碳') {
          } else if (nameList[j] === '废气流量') {
            zdcbcolor = 'red'
            zxcolor = '#9ACD32'
          } else if (nameList[j] === '二氧化磷') {
          } else if (nameList[j] === '氧含量') {
            zdcbcolor = 'red'
            zxcolor = '#f48183'
            zxcolor = '#008000'
          }
          let ydata
          // 临时数据
          const BBZMAPPING = [
            {
              氮氧化物: 35,
              烟尘: 9,
              二氧化磷: 15,
              ph: 0.3
            }
          ]
          const BBZMAPPING = {
            氮氧化物: 30,
            烟尘: 9,
            二氧化磷: 15,
            ph: 0.3
          }
          for (let m = 0; m < this.EXHRealTimeDataList.length; m++) {
            let stdValue = null
            if (this.EXHRealTimeDataList[m].name === nameList[j]) {
@@ -298,9 +290,14 @@
              //   i++
              //   stdValue = BBZMAPPING[this.EXHRealTimeDataList[m].name]
              // }
              BBZMAPPING.forEach(item => {
              // BBZMAPPING.forEach(item => {
              //   stdValue = BBZMAPPING[this.EXHRealTimeDataList[m].name]
              // })
              for (const p in BBZMAPPING) {
                // console.log('p' + p)
                this.a = p
                stdValue = BBZMAPPING[this.EXHRealTimeDataList[m].name]
              })
              }

              ydata = {
                name: nameList[j],
@@ -335,6 +332,9 @@
        const zdcbcolor = ydatas[i].zdcbcolor
        const bz = ydatas[i].bzz
        let obj
        let biaozhuiz
        const exhbzzList = this.exhbzzList
        // console.log(exhbzzList)
        if (bz) {
          obj = {
            name: ydatas[i].name,
@@ -344,14 +344,14 @@
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  for (let i = 0; i < this.exhbzzList.length; i++) {
                    if (this.exhbzzList[i].name === c.seriesName) {
                      this.biaozhuiz = this.exhbzzList[i].bzhui
                  for (let i = 0; i < exhbzzList.length; i++) {
                    if (exhbzzList[i].name === c.seriesName) {
                      biaozhuiz = exhbzzList[i].bzhui
                    }
                  }
                  if (c.value[1] > this.biaozhuiz) {
                  if (c.value[1] > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value[1] > this.biaozhuiz * 0.9) {
                  } else if (c.value[1] > biaozhuiz * 0.9) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
@@ -399,15 +399,14 @@
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  // let biaozhuiz
                  // for (let i = 0; i < this.exhbzzList.length; i++) {
                  //   if (this.exhbzzList[i].name === c.seriesName) {
                  //     this.biaozhuiz = this.exhbzzList[i].bzhui
                  //   }
                  // }
                  if (c.value[1] > 20) {
                  for (let i = 0; i < exhbzzList.length; i++) {
                    if (exhbzzList[i].name === c.seriesName) {
                      biaozhuiz = exhbzzList[i].bzhui
                    }
                  }
                  if (c.value[1] > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value[1] > 15 * 0.9) {
                  } else if (c.value[1] > biaozhuiz * 0.8) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
@@ -466,7 +465,7 @@
              let maker = params[i].marker
              let colo = ''
              switch (seriesName) {
                case 'ph':
                case '温度':
                  colo = '#f206ff'
                  break
                case '氮氧化物':
@@ -475,11 +474,11 @@
                case '烟尘':
                  colo = '#e0ffff'
                  break
                case '二氧化碳':
                case '废气流量':
                  colo = '#9ACD32'
                  break
                case '二氧化磷':
                  colo = '#f48183'
                case '氧含量':
                  colo = '#008000'
                  break
                default:
                  colo = ''
@@ -605,27 +604,7 @@

<style scoped lang="less">
.echarts-box {
  .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;
    }
  }

  .echarts-form {
    height: 0.3rem;
    line-height: 0.3rem;

    .demonstration {
      color: #00fff6;
      font-size: 12px;