| | |
| | | </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> |
| | |
| | | <!-- 明细弹框 --> |
| | | <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 |
| | |
| | | </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', |
| | |
| | | } |
| | | } |
| | | }, |
| | | 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 () { |
| | |
| | | }, |
| | | grid: { // 网格 |
| | | top: '20%', |
| | | left: '5%' |
| | | left: '6%', |
| | | bottom: '15%' |
| | | // containLabel: true |
| | | }, |
| | | legend: { // 图例 |
| | |
| | | }], |
| | | series: serLists |
| | | } |
| | | console.log(option) |
| | | // console.log(option) |
| | | this.myChart.setOption(option) |
| | | /* |
| | | this.myChart.on('legendselectchanged', function (params) { |
| | |
| | | </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> |