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

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,12 +268,12 @@
          } 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
          // 临时数据
@@ -471,7 +465,7 @@
              let maker = params[i].marker
              let colo = ''
              switch (seriesName) {
                case 'ph':
                case '温度':
                  colo = '#f206ff'
                  break
                case '氮氧化物':
@@ -480,11 +474,11 @@
                case '烟尘':
                  colo = '#e0ffff'
                  break
                case '二氧化碳':
                case '废气流量':
                  colo = '#9ACD32'
                  break
                case '二氧化磷':
                  colo = '#f48183'
                case '氧含量':
                  colo = '#008000'
                  break
                default:
                  colo = ''
@@ -610,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;