修改废气图表

wangqi

2021-04-09 610977c95dec18b78e3e50be5d172d2cb94de86a

 src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue

@@ -1,30 +1,23 @@
<!--  日数据  -->
<template>
    <div id="Tab">
    <div class="animation">
        <div class="infomation">
            <!--            <el-tag>氮氧化物 : 29.93 标准 : 100</el-tag>-->
            <!--            <el-tag>二氧化硫 : 17.34 标准 : 50</el-tag>-->
            <!--            <el-tag>烟尘 : 6.93 标准 : 30</el-tag>-->
            <!--            <el-tag>废气流量 : 120343.18</el-tag>-->
            <el-row>
                <el-col :span="6"><div class="grid-content bg-purple">氮氧化物 : 29.93 标准 : 100</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">二氧化硫 : 17.34 标准 : 50</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">烟尘 : 6.93 标准 : 30</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">废气流量 : 120343.18</div></el-col>
                <!--            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
            </el-row>
        <span class="grid-content">氮氧化物 : 29.93 标准 : 100</span>
        <span class="grid-content">二氧化硫 : 17.34 标准 : 50</span>
        <span class="grid-content">烟尘 : 6.93 标准 : 30</span>
        <span class="grid-content">废气流量 : 120343.18</span>
      </div>
        </div>
        <div class="form-echrts">
            <div class="from-search">
                <el-row type="flex">
                    <el-col :span="14">
                        <div class="pickerMon">
                            <div class="pickerData">
                                <span> 开始时间:</span>
                                <span class="pickerTable"><el-date-picker
                                        type="datetime"
                                        v-model="value1">
                      </el-date-picker></span>
            <span class="pickerTable">
                          <el-date-picker  type="datetime"   v-model="value1">
                      </el-date-picker>
                      </span>
                            </div>
                            <div class="pickerData">
                                <span >结束时间:</span>
@@ -39,7 +32,7 @@
        </div>
        <div>
          采样点数:
          <input list="source" id="ipt" class="echatsInput" v-model="value" @change="datalistBtn">
          <input list="source" id="ipt" class="echatsInput" @change="datalistBtn">
          <datalist id="source" @click="datalistBtn">
            <option value="0" />
            <option value="25" />
@@ -84,7 +77,7 @@
      watchData: [],
      dialogVisible: false,
      myChar: null,
      value: '50',
      value: '',
      formInline: {
        user: '',
        region: ''
@@ -315,11 +308,57 @@
      this.myChart = this.$echarts.init(this.$refs.main)
      this.myChart.setOption(opitons)
    })
  },
  // 地图切换
  updateBasemapList () {
    this.basemapList = this.basemapHelper.getBasemapList()
    console.log(this.basemapList)
  },
  changeBasemap (itm) {
    const code = itm.code
    this.basemapList.forEach((item) => {
      if (item.code === code) {
        console.log(this.currentBaseMapCode)
        if (this.currentBaseMapCode == null || this.currentBaseMapCode !== code) {
          this.currentBaseMapCode = code
          this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, true)
        } else {
          this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, false)
        }

        this.basemapHelper.getBasemapList().forEach((item) => {
          item.layer.bringToBack()
        })
      }
    })
  }
}
</script>

<style scoped lang="less">
//.animation{
//  padding: 0 1rem;
//  overflow: hidden;
//  //width: 1rem;
//  .infomation{
//    display: flex;
//    //margin: 0 1rem;
//    overflow: hidden;
//    animation: move 1s linear 0s infinite;
//    @keyframes move {
//      0% {
//      }
//      100% {
//        transform: translateX(-10%);
//      }
//    }
//    /* 鼠标经过marquee 就停止动画 */
//    &:hover {
//      //z-index: 9999999;
//      animation-play-state: paused;
//    }
//  }
//}
    .grid-content{
        font-size: 8px!important;
        background-color:#2e4967;
@@ -327,22 +366,13 @@
        margin: 0 2px 4px 2px;
        border-radius: 2px;
    }
.animation {
  //width: 600px;
  //height: 0.06rem;
    .Infomation {
        margin-left: 10px;
    }

    .el-tag {
        height: 25px;
        width: 140px;
        line-height: 25px;
        margin-right: 10px;
        font-size: 10px;
        background-color: rgba(0, 255, 246, 0.14);
        color: #00d0f9;
        border: none;
        padding: 0 15px;
    }

    .form-echrts {
        width: 100%;
        border-top: 1px solid #396d83;