派生自 wuyushui/SewerAndRainNetwork

zhangshuaibao
2021-04-14 6ace815c16170b0a7fc68bf280f63bffe96612e6
src/components/BaseNav/PublicBounced/common/echarts/EChartsHour.vue
@@ -25,16 +25,6 @@
                        </span>
                    </div>
                </div>
<!--                <div>-->
<!--                    采样点数:-->
<!--                    <el-select v-model="formInline.region">-->
<!--                        <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="onSubmit">查询</div>
                <div class="detailbtn" @click="dialogVisible = true" >明细表</div>
             </div>
@@ -43,7 +33,6 @@
        <!-- 明细弹框 -->
        <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
@@ -56,7 +45,7 @@
</template>
<script>
import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList'
import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList'
import dayjs from 'dayjs'
export default {
  name: 'ECharts',
@@ -135,15 +124,10 @@
      }
    }
  },
  created () {
    // this.$nextTick(() => {
    // this.CreateChart(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
    // }
  },
  mounted () {
    this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
    this.formInline.timeStart = dayjs().subtract(12, 'hour').format('YYYY-MM-DD HH:mm:ss')
    this.onSubmit()
    // this.onSubmit()
    // this.CreateChart(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
  },
  updated () {
@@ -346,7 +330,8 @@
        },
        grid: { // 网格
          top: '20%',
          left: '5%'
          left: '6%',
          bottom: '15%'
          // containLabel: true
        },
        legend: { // 图例
@@ -462,7 +447,7 @@
        }],
        series: serLists
      }
      console.log(option)
      // console.log(option)
      this.myChart.setOption(option)
      /*
      this.myChart.on('legendselectchanged', function (params) {
@@ -554,99 +539,87 @@
</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
}
.infomation {
  padding: 5px 10px;
}
.form-echrts {
    width: 100%;
    border-top: 1px solid #396d83;
    //margin: 10px 10px 10px 10px;
    .from-search{
        display: flex;
        padding:5px;
        >div{margin-left: 10px}
        .pickerMon{
            display: flex;
            >div:first-child {
                margin-right: 10px;
    .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
            }
            .pickerData{
                flex: 1;
        }
    }
    .form-echrts {
        width: 100%;
        border-top: 1px solid #396d83;
        //margin: 10px 10px 10px 10px;
        .from-search{
            display: flex;
            padding:0.02rem;
            >div{margin-left: 10px}
            .pickerMon{
                display: flex;
                >span{line-height: 22px}
                .pickerTable {
                    margin-left: 3px;
                >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%;
        }
        /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;
            //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 {
        //height: 50vh!important;
        overflow: auto;
        //overflow: hidden;
    }
            /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;
                //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;
            }
    #echarts {
        margin: 0;
        padding: 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>