| | |
| | | <!-- 日数据 --> |
| | | <template> |
| | | <div id="Tab"> |
| | | <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard> |
| | | <div class="form-echrts"> |
| | | <div class="from-search"> |
| | | <div class="pickerMon"> |
| | | <div class="pickerData"> |
| | | <span> 开始时间:</span> |
| | | <span class="pickerTable"> |
| | | <el-date-picker type="datetime" v-model="formInline.timeStart"></el-date-picker> |
| | | </span> |
| | | </div> |
| | | <div class="pickerData"> |
| | | <span>结束时间:</span> |
| | | <span class="pickerTable"> |
| | | <el-date-picker type="datetime" v-model="formInline.timeEnd"></el-date-picker> |
| | | </span> |
| | | </div> |
| | | </div> |
| | | <!-- <div>--> |
| | | <!-- 采样点数:--> |
| | | <!-- <el-select v-model="formInline.region" placeholder="50">--> |
| | | <!-- <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 hover-bottom">查询</div> |
| | | <div class="detailbtn hover-bottom">明细表</div> |
| | | </div> |
| | | <div style="width:5rem;height:1.5rem;" id="echarts" ref="wastegasday"> |
| | | </div> |
| | | <div class="echarts-box"> |
| | | <div class="tab-scroll"> |
| | | <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard> |
| | | <span class="time-select">{{ formData.timeStart }}日—{{ formData.timeEnd }}日</span> |
| | | </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--> |
| | | <!-- >--> |
| | | <!-- <div class="el-dialog-div" style="height: 500px">--> |
| | | <!-- <public-detailed-list v-bind="$attrs"></public-detailed-list>--> |
| | | <!-- </div>--> |
| | | <!-- </el-dialog>--> |
| | | <div class="echarts-form"> |
| | | <span class="demonstration">开始时间:</span> |
| | | <el-date-picker |
| | | v-model="formData.timeStart" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | type="datetime"> |
| | | </el-date-picker> |
| | | <span class="demonstration">结束时间:</span> |
| | | <el-date-picker |
| | | v-model="formData.timeEnd" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | type="datetime"> |
| | | </el-date-picker> |
| | | <span class="demonstration">采样点数:</span> |
| | | <el-select v-model="formData.region" placeholder="请选择" style="width: 80px"> |
| | | <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> |
| | | <el-button>明细表</el-button> |
| | | </div> |
| | | <div class="echarts-chart"> |
| | | <div style="width:5rem;height:1.5rem;" ref="wastegasday"></div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | // import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList' |
| | | |
| | | import PublicDataStandard from '../PublicDataStandard' |
| | | import 'dayjs/locale/es' |
| | | import dayjs from 'dayjs' |
| | |
| | | export default { |
| | | name: 'DayData', |
| | | components: { |
| | | // PublicDetailedList |
| | | PublicDataStandard |
| | | }, |
| | | data () { |
| | |
| | | val: null |
| | | } |
| | | }], |
| | | formInline: { |
| | | timeStart: null, |
| | | timeEnd: null |
| | | formData: { |
| | | region: '25', |
| | | regionList: [25, 50, 75, 100], |
| | | timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss'), |
| | | timeEnd: dayjs().format('YYYY-MM-DD HH:mm:ss') |
| | | }, |
| | | dataType: 1, |
| | | myChart: null, |
| | |
| | | }) |
| | | }, |
| | | methods: { |
| | | querySearch () { |
| | | this.initnData() |
| | | }, |
| | | async initnData () { |
| | | // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间 |
| | | this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss') |
| | | this.formInline.timeStart = dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss') |
| | | const data = { |
| | | onLineMonEmissPointId: 23, |
| | | monItemId: 28, |
| | | beginTime: this.formInline.timeStart, |
| | | endTime: this.formInline.timeEnd, |
| | | beginTime: this.formData.timeStart, |
| | | endTime: this.formData.timeEnd, |
| | | dataType: this.dataType |
| | | } |
| | | const result = (await mapApi.getWasteGasMonData(data)).Result.DataInfo |
| | |
| | | |
| | | for (let j = 0; j < nameList.length; j++) { |
| | | var zdcbcolor, zxcolor |
| | | if (nameList[j] === 'COD') { |
| | | if (nameList[j] === '二氧化硫') { |
| | | zdcbcolor = 'red' |
| | | zxcolor = '#fff21c' |
| | | } else if (nameList[j] === '氮氧化物') { |
| | |
| | | } |
| | | } |
| | | |
| | | const bzzList = this.bzzList |
| | | |
| | | for (let i = 0; i < ydatas.length; i++) { |
| | | // const zdcbcolor = ydatas[i].zdcbcolor |
| | | const zdcbcolor = ydatas[i].zdcbcolor |
| | | const bzz = ydatas[i].bzz |
| | | let obj |
| | | if (bzz == null) { |
| | |
| | | symbolSize: 10, // 大小 |
| | | smooth: false, // 直线 ,true 为曲线 |
| | | yAxisIndex: 1, |
| | | // itemStyle: { |
| | | // normal: { |
| | | // color: function (c) { // 根据value 显示不同的折点颜色 |
| | | // let biaozhuiz |
| | | // for (let i = 0; i < exhbzzList.length; i++) { |
| | | // if (exhbzzList[i].name === c.seriesName) { |
| | | // biaozhuiz = exhbzzList[i].bzhui |
| | | // } |
| | | // } |
| | | // if (c.value > 999999999999) { |
| | | // return zdcbcolor |
| | | // } else { |
| | | // return '#33c95f' |
| | | // } |
| | | // }, |
| | | // lineStyle: { // 折线的颜色 |
| | | // color: ydatas[i].zxcolor, |
| | | // width: 5 |
| | | // }, |
| | | // borderColor: ydatas[i].zxcolor, // 折点边框的颜色 |
| | | // label: { // 显示值 |
| | | // show: false |
| | | // } |
| | | // } |
| | | // }, |
| | | itemStyle: { |
| | | normal: { |
| | | color: function (c) { // 根据value 显示不同的折点颜色 |
| | | let biaozhuiz |
| | | for (let i = 0; i < bzzList.length; i++) { |
| | | if (bzzList[i].name === c.seriesName) { |
| | | biaozhuiz = bzzList[i].bzhui |
| | | } |
| | | } |
| | | if (c.value[1] > biaozhuiz) { |
| | | return zdcbcolor |
| | | } else if (c.value[1] > biaozhuiz * 0.9) { |
| | | return '#FFA500' |
| | | } else { |
| | | return '#33c95f' |
| | | } |
| | | }, |
| | | lineStyle: { // 折线的颜色 |
| | | color: ydatas[i].zxcolor, |
| | | width: 5 |
| | | }, |
| | | borderColor: ydatas[i].zxcolor, // 折点边框的颜色 |
| | | label: { // 显示值 |
| | | show: false |
| | | } |
| | | } |
| | | }, |
| | | type: 'line', |
| | | data: ydatas[i].data |
| | | } |
| | |
| | | symbol: 'circle', // 折点形状 |
| | | symbolSize: 10, // 大小 |
| | | smooth: false, // 直线 ,true 为曲线 |
| | | // itemStyle: { |
| | | // normal: { |
| | | // color: function (c) { // 根据value 显示不同的折点颜色 |
| | | // let biaozhuiz |
| | | // for (let i = 0; i < exhbzzList.length; i++) { |
| | | // if (exhbzzList[i].name == c.seriesName) { |
| | | // biaozhuiz = exhbzzList[i].bzhui |
| | | // } |
| | | // } |
| | | // if (c.value > biaozhuiz) { |
| | | // return zdcbcolor |
| | | // } else if (c.value > biaozhuiz * 0.9) { |
| | | // return '#FFA500' |
| | | // } else { |
| | | // return '#33c95f' |
| | | // } |
| | | // }, |
| | | // lineStyle: { // 折线的颜色 |
| | | // color: ydatas[i].zxcolor, |
| | | // width: 5 |
| | | // }, |
| | | // borderColor: ydatas[i].zxcolor, // 折点边框的颜色 |
| | | // label: { // 显示值 |
| | | // show: false |
| | | // } |
| | | // } |
| | | // }, |
| | | itemStyle: { |
| | | normal: { |
| | | color: function (c) { // 根据value 显示不同的折点颜色 |
| | | let biaozhuiz |
| | | for (let i = 0; i < bzzList.length; i++) { |
| | | if (bzzList[i].name === c.seriesName) { |
| | | biaozhuiz = bzzList[i].bzhui |
| | | } |
| | | } |
| | | if (c.value[1] > biaozhuiz) { |
| | | return zdcbcolor |
| | | } else if (c.value[1] > biaozhuiz * 0.9) { |
| | | return '#FFA500' |
| | | } else { |
| | | return '#33c95f' |
| | | } |
| | | }, |
| | | lineStyle: { // 折线的颜色 |
| | | color: ydatas[i].zxcolor, |
| | | width: 5 |
| | | }, |
| | | borderColor: ydatas[i].zxcolor, // 折点边框的颜色 |
| | | label: { // 显示值 |
| | | show: false |
| | | } |
| | | } |
| | | }, |
| | | type: 'line', |
| | | data: ydatas[i].data, |
| | | markLine: { // 平均值 , 和 指标上限 |
| | |
| | | }, |
| | | grid: { // 网格 |
| | | top: '20%', |
| | | left: '5%' |
| | | left: '15%' |
| | | // containLabel: true |
| | | }, |
| | | legend: { // 图例 |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="less"> |
| | | |
| | | .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 |
| | | } |
| | | } |
| | | } |
| | | |
| | | .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; |
| | | |
| | | > 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: 1rem; |
| | | background-color: #2e4967; |
| | | color: #fff; |
| | | font-size: 0.08rem; |
| | | height: 0.15rem; |
| | | padding: 0; |
| | | border: none; |
| | | text-align: center; |
| | | z-index: 9999; |
| | | //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; |
| | | } |
| | | |
| | | 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> |