From 528efaf110c6dee984234fa1da90d759e41ab60c Mon Sep 17 00:00:00 2001 From: wangqi <magical1908@outlook.com> Date: 星期四, 08 四月 2021 17:30:30 +0800 Subject: [PATCH] echats 上tabs样式 --- src/components/LayerController/logic/WasteGas.js | 10 +++ src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue | 150 ++++++++++++++++++++++++++++++++++++++++++-------- src/api/mapApi.js | 4 + src/api/mapUrl.js | 1 4 files changed, 141 insertions(+), 24 deletions(-) diff --git a/src/api/mapApi.js b/src/api/mapApi.js index a621754..26ab8bc 100644 --- a/src/api/mapApi.js +++ b/src/api/mapApi.js @@ -36,6 +36,10 @@ getWasteGasDetails (data) { return axios.get(mapUrl.getWasteGasDetails, data) }, + // 搴熸皵鐐瑰皬鏃舵棩鏁版嵁 + getWasteGasMonData (data) { + return axios.get(mapUrl.getWasteGasMonData, data) + }, // 搴熸按鐐� getWasteWater (data) { return axios.get(mapUrl.getWasteWater, data) diff --git a/src/api/mapUrl.js b/src/api/mapUrl.js index c2493a8..479b4cd 100644 --- a/src/api/mapUrl.js +++ b/src/api/mapUrl.js @@ -12,6 +12,7 @@ export const getWasteGas = $HOST + '/wasteGas/getWasteGas' export const getWasteGasDetails = $HOST + '/wasteGas/getWasteGasMonitoringDetails' +export const getWasteGasMonData = $HOST + '/wasteGas/QueryOnlineMonData' export const getWasteWater = $HOST + '/wasteWater/getWasteWater' export const getWasteWaterMonitoring = $HOST + '/wasteWater/getWasteWaterMonitoring' diff --git a/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue b/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue index 3c40d37..79a1a2b 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue @@ -2,20 +2,28 @@ <template> <div id="Tab"> <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-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> </div> <div class="form-echrts"> <!-- :title="this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName" --> -<!-- <div class="from-search">--> + <div class="from-search"> <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">--> -<!--<!– <el-form-item label="瀹℃壒浜�">–>--> -<!--<!– <el-input v-model="formInline.user" placeholder="瀹℃壒浜�"></el-input>–>--> -<!--<!– </el-form-item>–>--> +<!-- <el-form-item label="瀹℃壒浜�">--> +<!-- <el-input v-model="formInline.user" placeholder="瀹℃壒浜�"></el-input>--> +<!-- </el-form-item>--> <!-- <div class="block">--> <!-- <el-date-picker--> +<!-- size="'mini"--> <!-- class="date"--> <!-- v-model="value"--> <!-- type="datetimerange"--> @@ -36,33 +44,92 @@ <!-- <el-form-item>--> <!-- <el-button type="primary" @click="onSubmit">鏌ヨ</el-button>--> <!-- </el-form-item>--> + <!-- </el-form>--> -<!-- <el-button size="mini" round @click="dialogVisible = true">鏄庣粏琛�</el-button>--> -<!-- <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>--> - <div style="width:100%;height:1rem;margin-top:-0.1rem;position:absolute;" id="echarts" ref="main"> +<!-- <input list="students">--> +<!-- <datalist id="students">--> +<!-- <option value="Lily">--> +<!-- <option value="Lucy">--> +<!-- <option value="Jim">--> +<!-- <option value="Lily">--> +<!-- </datalist>--> + <el-row type="flex" :gutter="20"> +<!-- <el-col :span="14">--> +<!-- <el-row>--> +<!-- <el-col :span="12">--> +<!-- <el-row type="flex" justify="space-between">--> +<!-- <el-col class="pickerData">--> +<!-- 寮�濮嬫椂闂�:--> +<!-- <el-date-picker--> +<!-- type="date">--> +<!-- </el-date-picker>--> +<!-- </el-col>--> +<!-- </el-row>--> +<!-- </el-col>--> +<!-- <el-col :span="12" type="flex">--> +<!-- <el-row type="flex" justify="center">--> +<!-- <el-col>--> +<!-- 缁撴潫鏃堕棿:--> +<!-- <el-date-picker--> +<!-- type="date"--> +<!-- >--> +<!-- </el-date-picker>--> +<!-- </el-col>--> +<!-- </el-row>--> +<!-- </el-col>--> +<!-- </el-row>--> +<!-- </el-col>--> + <el-col :span="5"> + 閲囨牱鐐规暟: + <input list="source" id="ipt" class="echatsInput"> + <datalist id="source"> + <option value="0" /> + <option value="25" /> + <option value="50" /> + <option value="75" /> + <option value="100" /> + </datalist> +<!-- <div data-tap-disabled="true">--> +<!-- 閲囨牱鐐规暟:--> +<!-- <select id="source">--> +<!-- <option value="1">0</option>--> +<!-- <option value="2">25</option>--> +<!-- <option value="3">50</option>--> +<!-- <option value="4">75</option>--> +<!-- <option value="5">100</option>--> +<!-- </select>--> +<!-- </div>--> + </el-col> + <el-col class="detailbtn" :span="2" @click="onSubmit">鏌ヨ</el-col> + <el-col :span="3"> + <div class="detailbtn" @click="dialogVisible = true" >鏄庣粏琛�</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> + </el-col> + </el-row> + </div> + <div style="width:100%;height:200px;" id="echarts" ref="main"> </div> </div> </div> </template> <script> -// import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList' +import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList' export default { name: 'ECharts', components: { - // PublicDetailedList + PublicDetailedList }, data () { return { @@ -260,6 +327,13 @@ </script> <style scoped lang="less"> +.grid-content{ + font-size: 8px!important; + background-color:#2e4967; + text-align: center; + margin: 0 2px 4px 2px; + border-radius: 2px; +} .Infomation { margin-left: 10px; height: 0.2rem; @@ -282,6 +356,34 @@ height: 1rem; border-top: 1px solid #396d83; //margin: 10px 10px 10px 10px; + .from-search{ + //display: flex; + //justify-content: space-between; + .pickerData{ + display: flex; + justify-content: space-between; + } + /deep/.el-input__inner{ + width: 40px!important; + height: 16px!important; + background-color: #2e4967; + } + .echatsInput{ + color: #00ffff; + background-color: #2e4967; + border: none; + border-radius: 6px; + width: 40px; + } + .detailbtn{ + background-color:#2e4967; + text-align: center; + padding: 0 7px; + line-height: 20px; + border-radius: 4px; + margin-right: 6px; + } + } .el-dialog-div { //height: 50vh!important; overflow: auto; diff --git a/src/components/LayerController/logic/WasteGas.js b/src/components/LayerController/logic/WasteGas.js index 2ac1651..9e30e54 100644 --- a/src/components/LayerController/logic/WasteGas.js +++ b/src/components/LayerController/logic/WasteGas.js @@ -59,6 +59,16 @@ const dataValue = { StoragePlaceId: e.layer.options.test.StoragePlaceId } + // const GasOnlinedata = { + // onLineMonEmissPointId: 23, + // monItemId: 28, + // emissTypeld: 2, + // beginTime: 2020/0o4/0o6 15:13:20, + // endTime=2020/0o4/0o7;15:13:20, + // dataType:1 + // } + // const Mondata = await mapApi.getWasteGasMonData(GasOnlinedata) + // console.log(Mondata) const result = await mapApi.getWasteGasDetails(dataValue) // console.log(result.Result.DataInfo) const PublicBounced = window.Vue.extend(publicBounced) -- Gitblit v1.8.0