废水接口替换完成，头部检测项动态展示，UI优化

XingChuan

2021-05-30 c73a31a4fadbd10651702e8466a46abfcdb1a143

废水接口替换完成，头部检测项动态展示，UI优化

 src/App.vue

@@ -32,6 +32,6 @@
.popoverBoxStyle{
  border: 0.00521rem solid #00fff6;
  box-shadow: 0 0 0.03rem #00fff6;
  background-color: rgba(0, 16, 30, 0.7) !important;
  background-color: rgba(0, 16, 30, 0.8) !important;
}
</style>

 src/components/base-page/PublicSector.vue

@@ -31,7 +31,6 @@

  .public-bounced-content {
    padding: 0.05rem;
    display: flex;

    .public-bounced-content-left {
    }

 src/components/base-page/WasteWater/PublicTabs.vue

@@ -8,12 +8,12 @@
      <div class="main-matter">
        <div>
          <ul>
            <li>监测点名称:{{ storagePlaceId.Name }}</li>
            <li>生产单位:{{ storagePlaceId.porltName }}</li>
            <li>排放类型名称:{{ storagePlaceId.MonTypeName }}</li>
            <li>排放去向:{{ storagePlaceId.EmissDirecti }}</li>
            <li>控制级别名称:{{ storagePlaceId.ContrLevelShowName }}</li>
            <li>内/外排放口:{{ storagePlaceId.OrOutPortName }}</li>
            <li><span class="namer">监测点名称：</span>{{ storagePlaceId.Name }}</li>
            <li><span class="namer">生产单位：</span>{{ storagePlaceId.porltName }}</li>
            <li><span class="namer">排放类型名称：</span>{{ storagePlaceId.MonTypeName }}</li>
            <li><span class="namer">排放去向：</span>{{ storagePlaceId.EmissDirecti }}</li>
            <li><span class="namer">控制级别名称：</span>{{ storagePlaceId.ContrLevelShowName }}</li>
            <li><span class="namer">内/外排放口：</span>{{ storagePlaceId.OrOutPortName }}</li>
          </ul>
        </div>
      </div>
@@ -60,14 +60,18 @@

      li {
        margin-bottom: 0.04rem;
        text-align: center;
        min-width: 31%;
        background-color: #243a55;
        color: #00d0f9;
        box-shadow: 0 0 10px rgba(129,211,248,.35) inset;
        color: #00fff6;
        border-radius: 0.02rem;
        font-size: 0.08rem;
        line-height: 0.09rem;
        padding: 0.03rem .5%;
        .namer{
          display: inline-block;
          width: .6rem;
          text-align: right;
        }
      }

    }

 src/components/base-page/WasteWater/WasteWaterDayChart.vue

@@ -1,5 +1,5 @@
<template>
    <div class="echarts-box">
    <div id="wasteWaterDayChartBox" class="echarts-box">
        <div class="tab-scroll">
            <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
        </div>
@@ -9,7 +9,7 @@
            <span class="demonstration">结束时间：</span>
            <el-date-picker v-model="formData.timeEnd" value-format="yyyy-MM-dd" type="datetime" size="mini"></el-date-picker>
            <span class="demonstration">采样点数：</span>
            <el-select v-model="formData.region" placeholder="请选择" size="mini">
            <el-select class="selectBox" 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>
@@ -19,7 +19,7 @@
                popper-class="popoverBoxStyle"
                trigger="click">
              <dynamic-table :tableData="tableData" :tableHeader="tableConfig" v-if="tableData"></dynamic-table>
              <el-button slot="reference">明细表</el-button>
              <el-button slot="reference" id="mingxiBtn">明细表</el-button>
            </el-popover>
        </div>
        <div class="echarts-chart">
@@ -521,9 +521,12 @@
            saveAsImage: {}
          }
        },
        grid: { // 网格
          top: '20%'
          // left: '5%'
        grid: {
          // 与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
          top: '20%',
          left: '6%',
          right: '6%',
          bottom: '12%'
        },
        legend: {
          data: legend
@@ -678,6 +681,33 @@
}
</script>

<style scoped lang="less">

<style lang="less">
#wasteWaterDayChartBox .echarts-form .el-input__inner {
  background-color: rgba(0, 0, 0, 0);
  height: .13rem;
  border-color: #336fa4;
}
#wasteWaterDayChartBox .echarts-form{
  margin-top: 1px
}
#wasteWaterDayChartBox .echarts-form .el-input__icon{
  height: .13rem;
  top: -.02rem;
  right: -0.03rem;
  position: absolute;
  color: #00d0f9;
}
#wasteWaterDayChartBox .echarts-form .selectBox .el-input__icon:last-child{
  top: .02rem;
}
#wasteWaterDayChartBox .echarts-form .selectBox .is-reverse{
  top: -.02rem !important;
}
#wasteWaterDayChartBox .echarts-form .el-button{
  background-color: rgba(0, 0, 0, 0);
  height: .13rem;
}
#mingxiBtn{
  margin-left: -.02rem;
}
</style>

 src/components/base-page/WasteWater/WasteWaterHoursChart.vue

@@ -1,5 +1,5 @@
<template>
  <div class="echarts-box">
  <div id="wasteWaterHoursChartBox" class="echarts-box">
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
    </div>
@@ -9,7 +9,7 @@
      <span class="demonstration">结束时间：</span>
      <el-date-picker v-model="formData.endTime" value-format="yyyy-MM-dd HH" type="datetime" size="mini"></el-date-picker>
      <span class="demonstration">采样点数：</span>
      <el-select v-model="formData.region" placeholder="请选择" size="mini">
      <el-select class="selectBox" 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>
@@ -19,7 +19,7 @@
          popper-class="popoverBoxStyle"
          trigger="click">
        <dynamic-table :tableData="tableData" :tableHeader="tableConfig" v-if="tableData"></dynamic-table>
        <el-button slot="reference">明细表</el-button>
        <el-button slot="reference" id="mingxiBtn">明细表</el-button>
      </el-popover>
    </div>
    <div class="echarts-chart">
@@ -541,12 +541,15 @@
            saveAsImage: {}
          }
        },
        grid: { // 网格
          top: '20%'
          // left: '15%'
        },
        legend: {
          data: legend
        },
        grid: {
          // 与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
          top: '20%',
          left: '6%',
          right: '6%',
          bottom: '12%'
        },
        dataZoom: [{
          type: 'inside',
@@ -697,7 +700,30 @@
  }
}
</script>

<style scoped lang="less">

<style>
#wasteWaterHoursChartBox .echarts-form .el-input__inner {
  background-color: rgba(0, 0, 0, 0);
  height: .13rem;
  border-color: #336fa4;
}
#wasteWaterHoursChartBox .echarts-form .el-input__icon{
  height: .13rem;
  top: -.02rem;
  right: -0.03rem;
  position: absolute;
  color: #00d0f9;
}
#wasteWaterHoursChartBox .echarts-form .selectBox .el-input__icon:last-child{
  top: .02rem;
}
#wasteWaterHoursChartBox .echarts-form .selectBox .is-reverse{
  top: -.02rem !important;
}
#wasteWaterHoursChartBox .echarts-form .el-button{
  background-color: rgba(0, 0, 0, 0);
  height: .13rem;
}
#mingxiBtn{
  margin-left: -.02rem;
}
</style>

 src/components/base-page/WasteWater/WasteWaterIndex.vue

@@ -28,9 +28,9 @@
        <component :is="currentTab" ref="RealData"></component>
      </div>
    </template>
    <template v-slot:video>
<!--    <template v-slot:video>
      <public-video></public-video>
    </template>
    </template>-->
  </public-sector>
</template>


 src/components/base-page/WasteWater/WasteWaterRealChart.vue

@@ -1,5 +1,5 @@
<template>
  <div class="echarts-box">
  <div id="wasteWaterRealChartBox" class="echarts-box">
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
    </div>
@@ -9,7 +9,7 @@
      <span class="demonstration">结束时间：</span>
      <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="请选择" size="mini">
      <el-select class="selectBox" 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>
@@ -502,7 +502,11 @@
          }
        },
        grid: {
          top: '20%'
          // 与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
          top: '20%',
          left: '6%',
          right: '6%',
          bottom: '12%'
        },
        legend: {
          data: this.legendList
@@ -610,6 +614,30 @@
}
</script>

<style scoped lang="less">

<style lang="less">
#wasteWaterRealChartBox .echarts-form .el-input__inner {
  background-color: rgba(0, 0, 0, 0);
  height: .13rem;
  border-color: #336fa4;
}
#wasteWaterRealChartBox .echarts-form{
  margin-top: 1px
}
#wasteWaterRealChartBox .echarts-form .el-input__icon{
  height: .13rem;
  top: -.02rem;
  right: -0.03rem;
  position: absolute;
  color: #00d0f9;
}
#wasteWaterRealChartBox .echarts-form .selectBox .el-input__icon:last-child{
  top: .02rem;
}
#wasteWaterRealChartBox .echarts-form .selectBox .is-reverse{
  top: -.02rem !important;
}
#wasteWaterRealChartBox .echarts-form .el-button{
  background-color: rgba(0, 0, 0, 0);
  height: .13rem;
}
</style>