图层控制面板加宽。

chenyabin

2021-04-27 bdce5b978229a100b7d7a01acbdeefbd9e2b0902

 src/components/BaseNav/WasteWater/DayData.vue

@@ -1,51 +1,32 @@
<!--  日数据  -->
<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">
          <div class="pickerData">
            <span> 开始时间:</span>
            <span>开始时间:</span>
            <span class="pickerTable">
              <el-date-picker type="datetime" v-model="formInline.timeStart"></el-date-picker>
              <el-date-picker type="datetime" value-format="yyyy-MM-dd" 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>
              <el-date-picker type="datetime" value-format="yyyy-MM-dd" v-model="formInline.timeEnd"></el-date-picker>
            </span>
          </div>
        </div>
        <!--        <div>-->
        <!--          采样点数:-->
        <!--          <el-select v-model="formInline.region" placeholder="50">-->
        <!--            <el-option label="0" value="0"></el-option>-->
        <!--            <el-option label="25" value="25"></el-option>-->
        <!--            <el-option label="50" value="50"></el-option>-->
        <!--            <el-option label="75" value="75"></el-option>-->
        <!--            <el-option label="100" value="100"></el-option>-->
        <!--          </el-select>-->
        <!--        </div>-->
        <div class="detailbtn hover-bottom">查询</div>
        <div class="detailbtn hover-bottom">明细表</div>
      </div>
      <div style="width:5rem;height:1.5rem;" id="echarts" ref="echartsday">
      </div>
    </div>
    <!--    &lt;!&ndash; 明细弹框 &ndash;&gt;-->
    <!--    <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>
</template>

@@ -106,9 +87,11 @@
        }],
      formInline: {
        region: '',
        timeStart: '',
        timeEnd: ''
        timeStart: dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
        timeEnd: dayjs().format('YYYY-MM-DD')
      },
      timeStart: '',
      timeEnd: '',
      chart: null,
      dataType: 1,
      jcdID: 1,
@@ -120,14 +103,12 @@
    this.$nextTick(() => {
      this.draw24Chart()
    })
    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')
  },
  methods: {
    async draw24Chart () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
      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')
      this.formInline.timeEnd = dayjs().format('YYYY-MM-DD')
      this.formInline.timeStart = dayjs().subtract(24, 'hours').format('YYYY-MM-DD')
      const data = {
        onLineMonEmissPointId: 23,
        monItemId: 28,
@@ -461,8 +442,8 @@
          }
        },
        grid: { // 网格
          top: '20%',
          left: '5%'
          top: '20%'
          // left: '5%'
        },
        legend: {
          data: legend
@@ -574,6 +555,7 @@
        series: serLists
      }
      this.chart.setOption(option)
      window.onresize = this.chart.resize
    }
  }
}
@@ -598,13 +580,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 +621,8 @@
        display: flex;

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

        .pickerTable {