废水图表数据弹框相关修改

chenzeping

2021-04-23 4b2a5a88cbca4c21c18a7b59dae825051cf75c1f

废水图表数据弹框相关修改

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

@@ -8,40 +8,45 @@


/*全局设置***********/
h1, h2, h3, h4, h5, h6, ul, li, p,i ,span,div{
h1, h2, h3, h4, h5, h6, ul, li, p, i, span, div {
  padding: 0;
  margin: 0;
  list-style: none;
  -moz-user-select:none; /*火狐*/
  -webkit-user-select:none; /*webkit浏览器*/
  -ms-user-select:none; /*IE10*/
  -khtml-user-select:none; /*早期浏览器*/
  user-select:none;
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
}

.rt{
  float:right;
.rt {
  float: right;
}
.lt{
  float:left;

.lt {
  float: left;
}
.el-button--mini, .el-button--mini.is-round{

.el-button--mini, .el-button--mini.is-round {
  padding: 0.02rem 0.04rem;
}

/*隐藏*/
.el-dialog__wrapper{
.el-dialog__wrapper {
  height: 0;
}
.el-dialog{

.el-dialog {
  margin: 0 !important;
  position: fixed;
  z-index: 2000;
// left: 50%;
 //bottom:15px;
  .el-dialog__header{
  // left: 50%;
  //bottom:15px;
  .el-dialog__header {
    border-bottom: 1px solid @background-color-split;
  }
}

i {
  font-style: normal
}
@@ -232,7 +237,8 @@
      height: 16px;
    }
  }
  .el-button.hover{

  .el-button.hover {
    color: @color-highlight;
    border: .00521rem solid @color-highlight;
    box-shadow: 0 0 .03rem @color-highlight;
@@ -262,11 +268,12 @@
}

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

.active-button {
  border: 0.00521rem solid #fff700 !important;
  box-shadow: 0 0 0.03rem #fff700 !important;
@@ -375,6 +382,7 @@
.el-table {
  .cell {
    padding: 0 3px !important;

    i {
      display: block;
      font-style: normal;
@@ -385,7 +393,7 @@
}


.el-dialog--center .el-dialog__body{
.el-dialog--center .el-dialog__body {
  padding: 0.04rem;
}

@@ -418,18 +426,22 @@
.el-table td, .el-table th.is-leaf {
  font-size: 0.08rem;
}
.el-table .has-gutter tr th{
  border:1px solid @background-color-split;

.el-table .has-gutter tr th {
  border: 1px solid @background-color-split;
}
.el-table .has-gutter tr th  .cell{

.el-table .has-gutter tr th .cell {
  color: #fff;
}
.el-table--border{
 // border:1px solid @background-color-split;
  border:none

.el-table--border {
  // border:1px solid @background-color-split;
  border: none
}
.el-table--border::after, .el-table--group::after, .el-table::before{
  background:none;

.el-table--border::after, .el-table--group::after, .el-table::before {
  background: none;
}

.el-table .warning-row {
@@ -449,9 +461,11 @@
  padding: 0 !important;
  font-size: 0.01rem !important;
}

.el-scrollbar__wrap {

}

/*****滚动条***/
.scroll::-webkit-scrollbar,
.s-map-popup-panel .el-tabs__content::-webkit-scrollbar,
@@ -470,6 +484,7 @@
  border-radius: 10px;
  background: #000;
}

.scroll::-webkit-scrollbar-track,
.s-map-popup-panel .el-tabs__content::-webkit-scrollbar-track,
.el-table__body-wrapper::-webkit-scrollbar-track,
@@ -481,10 +496,7 @@
}




/*********解决横向滚动**/



/***********************************************动画效果************/
@@ -669,27 +681,45 @@
.fixed-table {
  background: rgba(0, 16, 30, 1) !important;
}

/****************************报表二级子弹框样式***/
.el-tabs__nav-wrap::after{background: none;}
.el-tabs__header{margin-bottom: 0.04rem;
  .is-active{color: @color-highlight}
.el-tabs__nav-wrap::after {
  background: none;
}
.el-tabs__active-bar{

.el-tabs__header {
  margin-bottom: 0.04rem;

  .is-active {
    color: @color-highlight
  }
}

.el-tabs__active-bar {
  background: @color-highlight;
}

.el-popover.popovers{
.el-popover.popovers {
  background: @background-color;
  padding: 0;
  border: 0.00521rem solid @color;
  overflow: hidden;
  box-shadow: 0 0 0.03rem @color;
  .el-popover__title{color: #fff;margin: 0;padding:0.06rem; background: @background-color;border-bottom: 1px solid @background-color-split}

  .el-popover__title {
    color: #fff;
    margin: 0;
    padding: 0.06rem;
    background: @background-color;
    border-bottom: 1px solid @background-color-split
  }

  .refinery {
    background-color: @background-color;

  }
  .waste-water{

  .waste-water {
    background-color: @background-color;
  }
}

 src/components/BaseNav/PublicDataStandard.vue

@@ -1,12 +1,14 @@
<template>
  <div class="animation">
    <div class="information">
<!--      <span class="grid-content">氮氧化物 : <i style="color: #e8ee0b">29.93</i>  标准 : <i style="color: #fff">100</i></span>-->
<!--      <span class="grid-content">二氧化硫 : <i style="color: #e8ee0b">17.34</i> 标准 : <i style="color: #fff">50</i></span>-->
<!--      <span class="grid-content">烟尘 : <i style="color: #e8ee0b">6.93</i> 标准 : <i style="color: #fff">30</i></span>-->
<!--      <span class="grid-content">废气流量 : <i style="color: #e8ee0b">120343.18</i></span>-->
      <!--      <span class="grid-content">氮氧化物 : <i style="color: #e8ee0b">29.93</i>  标准 : <i style="color: #fff">100</i></span>-->
      <!--      <span class="grid-content">二氧化硫 : <i style="color: #e8ee0b">17.34</i> 标准 : <i style="color: #fff">50</i></span>-->
      <!--      <span class="grid-content">烟尘 : <i style="color: #e8ee0b">6.93</i> 标准 : <i style="color: #fff">30</i></span>-->
      <!--      <span class="grid-content">废气流量 : <i style="color: #e8ee0b">120343.18</i></span>-->
      <span class="grid-content" v-for="item in dataStandard" :key="item.current.name">{{ item.current.name }} :
        <i style="color: #e8ee0b">{{ item.current.val }}</i>  {{ item.standard.name ?item.standard.name+':':'' }} <i style="color: #fff">{{ item.standard.val }}</i></span>
        <i style="color: #e8ee0b">{{ item.current.val }}</i>  {{
          item.standard.name ? item.standard.name + ':' : ''
        }} <i style="color: #fff">{{ item.standard.val }}</i></span>
    </div>
  </div>
</template>
@@ -28,17 +30,13 @@
<style lang="less" scoped>
.animation {
  .information {
    padding: 0.02rem 0.04rem;

    .grid-content {
      font-size: 0.08rem;
      padding: 0.02rem;
      background-color: #2e4967;
      text-align: center;
      border-radius: 0.01rem;
      height: 0.15rem;
      border-radius: 0.02rem;
      line-height: 0.15rem;
      margin-right: 0.04rem;
      padding: 0 0.04rem
      margin: 0 0.05rem;
    }
  }
}

 src/components/BaseNav/WasteGas/WasteGasIndex.vue

@@ -9,38 +9,22 @@
        <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-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 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>
        <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>
@@ -62,7 +46,7 @@
import Detail from './Detail'

export default {
  name: 'WasteWaterIndex',
  name: 'WasteGasIndex',
  props: ['storagePlaceId'],
  components: {
    PublicSector,
@@ -76,7 +60,6 @@
  data () {
    return {
      activeName: 'first',
      // currentTab: this.current(),
      currentTab: RealData,
      active: 0
    }
@@ -88,57 +71,77 @@
    },
    current (currentTab) {
      currentTab = RealData
    },
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="less" scoped>

.tab {
.navigation {
  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;
}
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px #243a55 solid;

.legend i {
  display: block;
  width: 0.2rem;
  height: 0.09rem;
  margin: 0 0.1rem 0 0.05rem;
  border-radius: 0.02rem;
}
  .navigation-left {
    display: flex;
    align-items: center;

.legend span {
  line-height: 0.09rem;
  height: 0.09rem;
  font-size: 0.06rem;
    .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 {

 src/components/BaseNav/WasteGas/WasteGasRealChart.vue

@@ -1,34 +1,30 @@
<template>
  <div id="Tab">
    <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
    <div class="form-echrts">
      <div class="from-search">
        <div class="pickerMon">
          <div class="pickerData">
            <span> 开始时间:</span>
            <span class="pickerTable">
              <el-date-picker type="datetime" 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>
            </span>
          </div>
        </div>
        <div>
          <span>采样点数:</span>
          <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" @click="querySearch">查询</div>
      </div>
  <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>
      <span class="demonstration">结束时间：</span>
      <el-date-picker
          v-model="formData.endTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          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="echarts"></div>
    </div>
  </div>
@@ -36,8 +32,8 @@

<script>

import PublicDataStandard from '@/components/BaseNav/PublicDataStandard'
import mapApi from '@/api/mapApi'
import PublicDataStandard from '../PublicDataStandard'
import mapApi from '../../../api/mapApi'
import 'dayjs/locale/es'
import dayjs from 'dayjs'

@@ -91,18 +87,16 @@
          }
        }],

      // echarts的数据设置
      myChart: null,

      // 开始 /结束 时间 和采样点值的绑定值数据
      formInline: {
        region: '',
        timeEnd: '',
        timeStart: ''
      formData: {
        region: '25',
        regionList: [25, 50, 75, 100],
        startTime: dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss'),
        endTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
      },

      res: [],

      // echarts的数据设置
      myChart: null,
      // 实时数据列表
      EXHRealTimeDataList: [],
      bzz: null,
@@ -117,41 +111,34 @@
    })
  },
  methods: {
    // 初始化数据获取echarts的options数据
    // 点击查询按钮功能 查询搜索功能
    querySearch () {
      this.initEchartsData()
      // console.log(this.EXHRealTimeDataList)
    },
    // 初始化数据请求
    async initEchartsData () {
      const data = {
        $tagCodeList: 'TJIP45.y2h508CEMS01NOX,CTJIP45.y2h508CEMS01SO2,CTJIP45.y2h508CEMS01F,CTJIP45.y2h508CEMS01PM',
        $startTime: dayjs().subtract(3, 'minute').format('YYYYMMDD HHmmss'),
        $endTime: dayjs().format('YYYYMMDD HHmmss'),
        $step: 15
      }
      this.res = (await mapApi.DataItems(data)).data
      this.getRtdb15s(this.res)
    },
    // 点击查询按钮功能
    async querySearch () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
      // this.formInline.timeEnd = dayjs().format('YYYYMMDD HHmmss')
      // this.formInline.timeStart = dayjs().subtract(3, 'minute').format('YYYYMMDD HHmmss')
      const data = {
        $tagCodeList: 'TJIP45.y2h508CEMS01NOX,CTJIP45.y2h508CEMS01SO2,CTJIP45.y2h508CEMS01F,CTJIP45.y2h508CEMS01PM',
        $startTime: this.formInline.timeEnd,
        $endTime: this.formInline.timeStart,
        $startTime: this.formData.startTime,
        $endTime: this.formData.endTime,
        $step: 15
      }
      const result = (await mapApi.DataItems(data)).data
      this.getRtdb15s(result)
      this.dealWithData(result)
    },
    // echarts数据处理
    getRtdb15s (res) {
    dealWithData (res) {
      if (res.length > 0) {
        // 处理数据开始
        const d = res
        const nameList = [] // 存放图例

        let data // 数据类型// let data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]}
        let datalist // 存放data的数组
        // let bzh = []
        let data
        // 存放data的数组
        let datalist
        this.EXHRealTimeDataList = []
        this.nameList = []
        for (let i = 0; i < d.length; i++) {
          if (d[i].ErrorMessage != null) {
            continue
@@ -231,32 +218,27 @@
            }
          }
        }
        // console.log(this.EXHRealTimeDataList)

        const divid = 'mychart_ss'
        const title = name
        const lengList = []
        const legendList = []
        let objTemp

        for (let l = 0; l < nameList.length; l++) {
          let obj
          let iconurl
          let iconUrl
          if (nameList[l] === 'ph') {
            iconurl = 'image://../assets/imgs/legend/WenDu.png'
            iconUrl = 'image://../assets/imgs/legend/WenDu.png'
          } else if (nameList[l] === '氮氧化物') {
            iconurl = 'image://../assets/imgs/legend/NOX.png'
            iconUrl = 'image://../assets/imgs/legend/NOX.png'
          } else if (nameList[l] === '烟尘') {
            iconurl = 'image://../assets/imgs/legend/zongdan.png'
            iconUrl = 'image://../assets/imgs/legend/zongdan.png'
          } else if (nameList[l] === '二氧化磷') {
            iconurl = 'image://../assets/imgs/legend/YanChen.png'
            iconUrl = 'image://../assets/imgs/legend/YanChen.png'
          } else if (nameList[l] === '二氧化碳') {
            iconurl = 'image://../assets/imgs/legend/VOCs.png'
            iconUrl = 'image://../assets/imgs/legend/VOCs.png'
          }

          if (nameList[l] === '废气' || nameList[l] === '废气流量') { // 将废气流量排到数组最后
            objTemp = {
              name: nameList[l],
              icon: iconurl,
              icon: iconUrl,
              textStyle: {
                color: '#ccc'
              },
@@ -266,19 +248,19 @@
          } else {
            obj = {
              name: nameList[l],
              icon: iconurl,
              icon: iconUrl,
              textStyle: {
                color: '#ccc'
              },
              itemWidth: 20,
              itemHeight: 5
            }
            lengList.push(obj)
            legendList.push(obj)
          }
        }
        lengList.push(objTemp)
        legendList.push(objTemp)

        const legend = lengList
        const legend = legendList
        const ydatas = []

        for (let j = 0; j < nameList.length; j++) {
@@ -336,22 +318,22 @@
            }
          }
        }

        const yname = '浓度(mg/m³)'

        this.DrawRealTimeDateChart(divid, title, legend, ydatas, yname)
        const yName = '浓度(mg/m³)'
        this.drawRealTimeDateChart(legend, ydatas, yName)
      }
    },
    // 获取数据用于echarts图表绘制
    DrawRealTimeDateChart (id, title, legend, ydatas, yname) {
      // console.log(ydatas)
    drawRealTimeDateChart (legend, ydatas, yName) {
      // 每次绘制图表进行图表实例化
      this.myChart = this.$echarts.init(this.$refs.echarts)
      // 图表数据清除
      this.myChart.clear()
      // 定义series数据
      const serLists = []
      let dataUnit
      for (let i = 0; i < ydatas.length; i++) {
        const zdcbcolor = ydatas[i].zdcbcolor
        const bz = ydatas[i].bzz
        // console.log(bz)
        let obj
        if (bz) {
          obj = {
@@ -543,9 +525,9 @@
        xAxis: { // x 轴设置
          type: 'time',
          boundaryGap: false,
          axisLabel: { // x轴全部显示
          axisLabel: {
            // rotate: 30,
            margin: 6,
            // margin: 6,
            interval: 0,
            textStyle: {
              color: '#fff'
@@ -566,15 +548,13 @@
              width: 1// 这里是为了突出显示加上的
            }
          }
          // data: xdata
        },
        yAxis: [{
          type: 'value',
          name: yname,
          // max: function (value) {
          //   console.log(value)
          //   return parseInt(value.max + 30)
          // },
          name: yName,
          max: function (value) {
            return parseInt(value.max + 30)
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
@@ -607,10 +587,7 @@
          },
          splitLine: {
            show: false
          }, // y轴 网格线不显示,
          // inverse: true,
          // nameLocation: 'start',
          // max:500,
          },
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
@@ -621,138 +598,66 @@
        series: serLists
      }
      this.myChart.setOption(option)
    },
    // 定时器 根据时间间隔请求数据
    IntervalRealTimeDate (id, unionTagCodeList, BBZMAPPING) {
      // const interValHander = setInterval(function () {
      //   this.initEchartsData()
      // console.log('间隔请求数据')
      // }, 1500)
      // console.log(interValHander)
    }
  }
}
</script>

<style scoped lang="less">
.grid-content {
  font-size: 8px;
  background-color: #2e4967;
  text-align: center;
  border-radius: 2px;
  margin-right: 10px;
  padding: 0 10px;

  > i {
    color: #ffffff;
  }
}

.animation {
  //width: 600px;
  //height: 0.06rem;
  .infomation {
    padding: 5px 10px;
  }
}

.form-echrts {
  width: 100%;
  border-top: 1px solid #396d83;
  //margin: 10px 10px 10px 10px;
  .from-search {
.echarts-box {
  .tab-scroll {
    display: flex;
    padding: 5px;
    align-items: center;
    justify-content: space-between;

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

    .pickerMon {
      display: flex;
  .echarts-form {
    height: 0.3rem;
    line-height: 0.3rem;

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

      .pickerData {
        flex: 1;
        display: flex;

        > span {
          line-height: 22px
        }

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

    /deep/ .el-date-editor--datetime {
      width: 100%;
    .demonstration {
      color: #00fff6;
      font-size: 12px;
      margin-left: 10px;
    }

    /deep/ .el-input__inner {
      position: relative;
      width: 140px;
      height: 0.15rem;
      background-color: #2e4967;
      color: #fff;
      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;
    .el-button {
      margin: 0 15px;
      width: 0.3rem;
      height: 0.15rem;
      display: inline-block;
      background-color: #2e4967;
      border: none;
      border-radius: 6px;
      width: 80px;
      height: 22px;
    }

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

    .detailbtn {
      background-color: #2e4967;
      color: #fff;
      font-size: 12px;
      padding: 0;
      border-color: #00fff6;
      text-align: center;
      padding: 0 7px;
      line-height: 20px;
      border-radius: 4px;
      margin-right: 6px;
    }

  }

  .el-dialog-div {
    //height: 50vh!important;
    overflow: auto;
    //overflow: hidden;
  }

  #echarts {
    margin: 0;
    padding: 0;
    //height: 3rem;
    //border: 1px solid #396d83;
    //margin: 10px 10px 10px 10px;
  /deep/ .el-icon-time:before {
    content: " ";
  }
}
</style>

 src/components/BaseNav/WasteSolid/PublicTable.vue

@@ -89,6 +89,10 @@
  border-bottom: none !important;
}

/deep/ .el-table .has-gutter tr th {
  border: none;
}

/deep/ .el-table th.is-leaf {
  border-bottom: none !important;
}

 src/components/BaseNav/WasteWater/DayData.vue

@@ -3,7 +3,7 @@
  <div id="Tab">
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
      <span class="time-select">{{ timeStart }}日——{{ timeEnd }}日</span>
      <span class="time-select">{{ formInline.timeStart }}日——{{ formInline.timeEnd }}日</span>
    </div>
    <div class="form-echrts">
      <div class="from-search">
@@ -11,44 +11,22 @@
          <div class="pickerData">
            <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>

@@ -109,7 +87,7 @@
        }],
      formInline: {
        region: '',
        timeStart: '',
        timeStart: dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
        timeEnd: dayjs().format('YYYY-MM-DD')
      },
      timeStart: '',
@@ -125,10 +103,6 @@
    this.$nextTick(() => {
      this.draw24Chart()
    })
    this.formInline.timeEnd = dayjs().format('YYYY-MM-DD')
    this.formInline.timeStart = dayjs().subtract(1, 'month').format('YYYY-MM-DD')
    this.timeEnd = dayjs().format('YYYY-MM-DD')
    this.timeStart = dayjs().subtract(1, 'month').format('YYYY-MM-DD')
  },
  methods: {
    async draw24Chart () {

 src/components/BaseNav/WasteWater/HourData.vue

@@ -2,7 +2,7 @@
  <div id="Tab">
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
      <span class="time-select">{{ timeStart }}时——{{ timeEnd }}时</span>
      <span class="time-select">{{ formInline.timeStart }}时——{{ formInline.timeEnd }}时</span>
    </div>
    <div class="form-echrts">
      <div class="from-search">
@@ -10,14 +10,14 @@
          <div class="pickerData">
            <span> 开始时间:</span>
            <span class="pickerTable">
                          <el-date-picker type="datetime" v-model="formInline.timeStart">
                          <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" v-model="formInline.timeEnd">
                        <el-date-picker type="datetime" value-format="yyyy-MM-dd HH" v-model="formInline.timeEnd">
                      </el-date-picker>
                      </span>
          </div>
@@ -90,8 +90,8 @@
        timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH'),
        timeEnd: dayjs().format('YYYY-MM-DD HH')
      },
      timeEnd: dayjs().format('YYYY-MM-DD HH'),
      timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH'),
      // timeEnd: dayjs().format('YYYY-MM-DD HH'),
      // timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH'),
      chart: null,
      jcdID: 1,
      dataType: 2,
@@ -106,8 +106,8 @@
  methods: {
    async draw24Chart () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
      this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH')
      this.formInline.timeStart = dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH')
      // 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,

 src/components/BaseNav/WasteWater/WasteWaterIndex.vue

@@ -54,7 +54,7 @@
import PublicVideo from '../PublicVideo'
import PublicSector from '../PublicSector'
// 图表组件
import RealData from './RealData'
import RealData from './WasteWaterRealChart'
import HourData from './HourData'
import DayData from './DayData'
import Detail from './Detail'

 src/components/BaseNav/WasteWater/WasteWaterRealChart.vue

File was renamed from src/components/BaseNav/WasteWater/RealData.vue
@@ -39,7 +39,7 @@
import PublicDataStandard from '../PublicDataStandard'

export default {
  name: 'ECharts',
  name: 'WasteWaterRealChart',
  components: {
    PublicDataStandard
  },
@@ -114,6 +114,7 @@
    querySearch () {
      this.initEchartsData()
    },
    // 初始化数据请求
    async initEchartsData () {
      const data = {
        $tagCodeList: 'TJIP45.y2h508CEMS01NOX,CTJIP45.y2h508CEMS01SO2,CTJIP45.y2h508CEMS01F,CTJIP45.y2h508CEMS01PM',
@@ -121,16 +122,23 @@
        $endTime: this.formData.endTime,
        $step: 15
      }
      // console.log(data)
      const result = (await mapApi.getDataItems(data)).data
      // 数据按类别分组
      this.pointsSet(result)
      // 图标存储处理
      this.legendSet()
      // ydata数据
      this.yDataSet()
      // 根据已有数据绘制图表
      this.drawRealTimeDateChart()
    },
    // 接口数据按照 数据内分类别设置
    pointsSet (d) {
      let data = []
      let datalist = []
      this.nameList = []
      this.RealTimeDataList = []
      for (let i = 0; i < d.length; i++) {
        // this.RealTimeDataList = []
        // 判断是否继续执行
@@ -220,7 +228,7 @@
          }
        }
      }
      console.log(this.RealTimeDataList)
      // console.log(this.RealTimeDataList)
    },
    // legend类别图表展示设置数组
    legendSet () {
@@ -617,8 +625,7 @@
        }],
        series: serLists
      }
      this.myChart.setOption(options, true)
      console.log(options)
      this.myChart.setOption(options)
      window.onresize = this.myChart.resize
    }
  }