图表数据弹框相关修改

chenzeping

2021-04-25 7760532449ddc115cdeee8143923e08d79685f97

图表数据弹框相关修改

 src/assets/css/map/map-panel-style.less

@@ -724,3 +724,60 @@
  }
}

/****************************废水弹框公共样式***/
.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;
      margin-left: 10px;
    }

    .el-input__inner {
      height: 0.15rem;
      background-color: #2e4967;
      color: #fff;
      font-size: 12px;
      padding: 0;
      border-color: #00fff6;
      text-align: center;
    }

    .el-button {
      margin: 0 15px;
      width: 0.3rem;
      height: 0.15rem;
      display: inline-block;
      background-color: #2e4967;
      color: #fff;
      font-size: 12px;
      padding: 0;
      border-color: #00fff6;
      text-align: center;
    }
  }

  .el-icon-time:before {
    content: " ";
  }
}

 src/components/BaseNav/WasteGas/WasteGasRealChart.vue

@@ -283,14 +283,12 @@
          }
          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 +296,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 +338,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 +350,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 +405,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'

 src/components/BaseNav/WasteWater/DayData.vue

@@ -1,31 +1,31 @@
<!--  日数据  -->
<template>
  <div id="Tab">
  <div class="echarts-box">
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
      <span class="time-select">{{ formInline.timeStart }}日——{{ formInline.timeEnd }}日</span>
      <span class="time-select">{{ formData.timeStart }}—{{ formData.timeEnd }}</span>
    </div>
    <div class="form-echrts">
      <div class="from-search">
        <div class="pickerMon">
          <div class="pickerData">
            <span>开始时间:</span>
            <span class="pickerTable">
              <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" value-format="yyyy-MM-dd" v-model="formInline.timeEnd"></el-date-picker>
            </span>
          </div>
        </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 class="echarts-form">
      <span class="demonstration">开始时间：</span>
      <el-date-picker
          v-model="formData.timeStart"
          value-format="yyyy-MM-dd"
          type="datetime">
      </el-date-picker>
      <span class="demonstration">结束时间：</span>
      <el-date-picker
          v-model="formData.timeEnd"
          value-format="yyyy-MM-dd"
          type="datetime">
      </el-date-picker>
      <span class="demonstration">采样点数：</span>
      <el-select v-model="formData.region" placeholder="请选择" style="width: 80px">
        <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="echartsday"></div>
    </div>
  </div>
</template>
@@ -85,13 +85,12 @@
            val: null
          }
        }],
      formInline: {
        region: '',
      formData: {
        region: '25',
        regionList: [25, 50, 75, 100],
        timeStart: dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
        timeEnd: dayjs().format('YYYY-MM-DD')
      },
      timeStart: '',
      timeEnd: '',
      chart: null,
      dataType: 1,
      jcdID: 1,
@@ -105,15 +104,15 @@
    })
  },
  methods: {
    querySearch () {

    },
    async draw24Chart () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
      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,
        beginTime: this.formInline.timeStart,
        endTime: this.formInline.timeEnd,
        beginTime: this.formData.timeStart,
        endTime: this.formData.timeEnd,
        dataType: this.dataType
      }
      const result = (await mapApi.getQueryOnlineMonData(data)).Result.DataInfo
@@ -287,6 +286,7 @@
    },
    effChartShow (divid, title, legend, xdata, ydatas, yname, jcdID, datatype) {
      this.chart = this.$echarts.init(this.$refs.echartsday)
      this.chart.clear()
      // console.log(this.chart)
      this.chart.clear()
      var dataUnit = ''
@@ -563,124 +563,4 @@

<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
    }
  }
}

.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: 15px 0;

    > div {
      margin-left: 10px
    }

    .pickerMon {
      display: flex;

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

      .pickerData {
        flex: 1;
        display: flex;

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

        .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;
      text-align: center;
      z-index: 9999;
      //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>

 src/components/BaseNav/WasteWater/HourData.vue

@@ -1,33 +1,31 @@
<template>
  <div id="Tab">
  <div class="echarts-box">
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
      <span class="time-select">{{ formInline.timeStart }}时——{{ formInline.timeEnd }}时</span>
      <span class="time-select">{{ formData.startTime }}—{{ formData.endTime }}</span>
    </div>
    <div class="form-echrts">
      <div class="from-search">
        <div class="pickerMon">
          <div class="pickerData">
            <span> 开始时间:</span>
            <span class="pickerTable">
                          <el-date-picker type="datetime" value-format="yyyy-MM-dd HH" v-model="formInline.timeStart">
                      </el-date-picker>
                      </span>
          </div>
          <div class="pickerData">
            <span>结束时间:</span>
            <span class="pickerTable">
                        <el-date-picker type="datetime" value-format="yyyy-MM-dd HH" v-model="formInline.timeEnd">
                      </el-date-picker>
                      </span>
          </div>
        </div>
        <div class="detailbtn">查询</div>
        <div class="detailbtn">明细表</div>
      </div>
      <div class="boxChart">
        <div style="width: 5rem;height:1.5rem;" id="echarts" ref="echartsHour"></div>
      </div>
    <div class="echarts-form">
      <span class="demonstration">开始时间：</span>
      <el-date-picker
          v-model="formData.startTime"
          value-format="yyyy-MM-dd HH"
          type="datetime">
      </el-date-picker>
      <span class="demonstration">结束时间：</span>
      <el-date-picker
          v-model="formData.endTime"
          value-format="yyyy-MM-dd HH"
          type="datetime">
      </el-date-picker>
      <span class="demonstration">采样点数：</span>
      <el-select v-model="region" placeholder="请选择" style="width: 80px">
        <el-option v-for="(item,index) in 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="echartsHour"></div>
    </div>
  </div>
</template>
@@ -86,12 +84,12 @@
            val: null
          }
        }],
      formInline: {
        timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH'),
        timeEnd: dayjs().format('YYYY-MM-DD HH')
      formData: {
        startTime: dayjs().subtract(16, 'hour').format('YYYY-MM-DD HH'),
        endTime: dayjs().format('YYYY-MM-DD HH')
      },
      // timeEnd: dayjs().format('YYYY-MM-DD HH'),
      // timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH'),
      region: '25',
      regionList: [25, 50, 75, 100],
      chart: null,
      jcdID: 1,
      dataType: 2,
@@ -104,15 +102,15 @@
    this.draw24Chart()
  },
  methods: {
    querySearch () {

    },
    async draw24Chart () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
      // this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH')
      // this.formInline.timeStart = dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH')
      const data = {
        onLineMonEmissPointId: 23,
        monItemId: 28,
        beginTime: this.formInline.timeStart,
        endTime: this.formInline.timeEnd,
        beginTime: this.formData.startTime,
        endTime: this.formData.endTime,
        dataType: this.dataType
      }
      const result = (await mapApi.getQueryOnlineMonData(data)).Result.DataInfo
@@ -593,139 +591,5 @@
</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;
  text-align: center;
  border-radius: 2px;
  margin-right: 10px;
  padding: 0 10px
  //>i{
  //    color: #f00;
  //  }
}

.infomation {
  padding: 5px 10px;
}

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

    > div {
      margin-left: 30px
    }

    .pickerMon {
      display: flex;

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

      .pickerData {
        flex: 1;
        display: flex;

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

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

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

    /deep/ .el-input__inner {
      position: relative;
      width: 140px;
      background-color: #2e4967;
      color: #ffffff;
      font-size: 12px;
      height: 24px;
      padding: 0;
      border-color: #00fff6;
      text-align: center;
      z-index: 9999;
      //padding-left:20px ;
      //padding: 0!important;
    }

    /deep/ .el-input__icon {
      display: block;
      width: 140px;
      height: 22px;
      line-height: 22px;
      cursor: pointer;
      font-size: 0;
    }

    .echatsInput {
      color: #00ffff;
      background-color: #2e4967;
      border: none;
      border-radius: 6px;
      width: 80px;
      height: 22px;
      text-align: center;
    }

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

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

    .detailbtn:hover {
      box-shadow: 0 0 0.03rem #fff700 !important;
      color: #fff700 !important;
      cursor: pointer;
    }
  }

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

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

 src/components/BaseNav/WasteWater/WasteWaterRealChart.vue

@@ -22,7 +22,7 @@
        <el-option v-for="(item,index) in regionList" :key="index" :label="item" :value="item"></el-option>
      </el-select>
      <el-button @click="querySearch()">查询</el-button>
      <el-button>明细表</el-button>
<!--      <el-button>明细表</el-button>-->
    </div>
    <div class="echarts-chart">
      <div style="width:5rem;height:1.5rem;" ref="echarts"></div>
@@ -633,60 +633,5 @@
</script>

<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;
      margin-left: 10px;
    }

    /deep/ .el-input__inner {
      height: 0.15rem;
      background-color: #2e4967;
      color: #fff;
      font-size: 12px;
      padding: 0;
      border-color: #00fff6;
      text-align: center;
    }

    .el-button {
      margin: 0 15px;
      width: 0.3rem;
      height: 0.15rem;
      display: inline-block;
      background-color: #2e4967;
      color: #fff;
      font-size: 12px;
      padding: 0;
      border-color: #00fff6;
      text-align: center;
    }
  }

  /deep/ .el-icon-time:before {
    content: " ";
  }
}
</style>

 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/DrawLine.js

@@ -1,5 +1,5 @@
import L from 'leaflet'
import eventBus from '@/eventBus'
import eventBus from '../../../../../eventBus'

class DrawLine {
  constructor (map) {
@@ -38,11 +38,11 @@
    }

    dbClick = (e) => {
      console.log('双击结束', e)
      // console.log('双击结束', e)
      this.polyline.addTo(this.layers)
      // this.close(e.latlng);
      this.map.off('click', this.click).off('mousemove', this.mousemove).off('dblclick', this.dbClick)
      console.log(this.points)
      // console.log(this.points)
      eventBus.$emit('draw-hdm-line', this.points)
    }


 src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue

@@ -375,7 +375,7 @@
                <span>断面图</span>
              </div>
              <span v-show="!myChartShow" style="color: #909399;font-size: 12px;">暂无数据</span>
              <div v-show="myChartShow" id="echarts_box" style="width: 600px;height:300px;"></div>
              <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width: 600px;height:300px;"></div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
@@ -387,9 +387,9 @@
<script>

import eventBus from '../../../../eventBus'
import DrawLine from './AnalysisChoose/DrawLine'
// import main from "../leaflet/app/main"
import mapApi from '@/api/mapApi'
import DrawLine from './AnalysisChoose/DrawLine'
import mapApi from '../../../../api/mapApi'

export default {
  name: 'SewersAnalysis',
@@ -443,12 +443,9 @@
    }
  },
  mounted () {
    // this.myChart = this.$echarts.init(document.getElementById('echarts_box'))
    this.myChart = this.$echarts.init(this.$refs.myChart)
    // 全局map传递 || this.map = window.map
    this.map = window.map
    eventBus.$on('map-obj', (mapObj) => {
      this.map = mapObj
    })
    // 使用 DrwLine方法
    eventBus.$on('draw-hdm-line', (points) => {
      this.getHdmPoint(points)