图表部分修改

chenzeping

2021-04-20 86a3bf670a40559a8e72021925435492667f40d0

 src/components/BaseNav/WasteWater/WasteWaterIndex.vue

@@ -1,29 +1,28 @@
<template>
  <public-sector>
    <template v-slot:tabs>
      <public-tabs ></public-tabs>
      <public-tabs :storagePlaceId="storagePlaceId"></public-tabs>
    </template>
    <template v-slot:table>
      <div class="win">
        <div class="border_corner border_corner_left_top"></div>
        <div class="border_corner border_corner_right_top"></div>
        <div class="border_corner border_corner_left_bottom"></div>
        <div class="border_corner border_corner_right_bottom"></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>
        <div class="legend" >
          <span >正常</span>
          <i style=" background: #4ec99c;"></i>
          <span >预警</span>
          <i style=" background: red;"></i>
          <span >超标</span>
          <i style=" background: orange;"></i>
        </div>
        <component :is="currentTab" v-bind="$attrs" ref="Echats"></component>
    <template v-slot:publicPart>
      <div class="publicPart">
        <span></span>
        <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-tabs>
      </div>
    </template>
    <template v-slot:video>
@@ -34,10 +33,9 @@

<script>

// import '@/utils/dragBoxes'
import PublicTabs from './PublicTabs'
import PublicVideo from '../PublicVideo'
import PublicSector from '..//PublicSector'
import PublicSector from '../PublicSector'
// 图表组件
import RealData from './RealData'
import HourData from './HourData'
@@ -46,7 +44,7 @@

export default {
  name: 'WasteWaterIndex',
  props: ['EpsGisMonPointId'],
  props: ['storagePlaceId'],
  components: {
    PublicSector,
    PublicTabs,
@@ -56,13 +54,9 @@
    DayData,
    Detail
  },
  mounted () {
    this.$nextTick(() => {
      this.refsData()
    })
  },
  data () {
    return {
      activeName: 'first',
      currentTab: RealData,
      active: '0',
      displayContentTable: '',
@@ -73,7 +67,15 @@
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.refsData()
    })
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    refsData () {
      // 请求数据需要携带的参数
      // const data = this.EpsGisMonPointId
@@ -132,6 +134,57 @@
    }
  }
}

.publicPart {
  position: relative;
  margin-bottom: 0.1rem;
  background-color: @background-color;
  font-size: 0.06rem;
  font-weight: normal;
  padding: 0.04rem 0;
  border: 1px solid #396d83;
}

.publicPart span:nth-child(1) {
  position: absolute;
  left: -2px;
  top: -2px;
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 2px 0 0 2px;
}

.publicPart span:nth-child(2) {
  position: absolute;
  right: -2px;
  top: -2px;
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 2px 2px 0 0;
}

.publicPart span:nth-child(3) {
  position: absolute;
  right: -2px;
  bottom: -2px;
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 0 2px 2px 0;
}

.publicPart span:nth-child(4) {
  position: absolute;
  left: -2px;
  bottom: -2px;
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 0 0 2px 2px;
}

.win {
  position: relative;
  background:@background-color;
@@ -190,12 +243,14 @@
  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;
@@ -203,6 +258,7 @@
  display: flex;
  justify-items: center;
}

.legend i {
  display: block;
  width: 0.2rem;
@@ -210,6 +266,7 @@
  margin:0 0.1rem 0 0.05rem;
  border-radius: 0.02rem;
}

.legend span{
  line-height: 0.09rem;
  height: 0.09rem;