| | |
| | | <template> |
| | | <baidu-map class="bigMap" ref="map" ak="Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t" v="3.0" type="API" :scroll-wheel-zoom="true" :center="{lng: 85.126263, lat: 45.603813}" :zoom="17" map-type="BMAP_SATELLITE_MAP" @ready="initMap"> |
| | | <!-- <bm-polygon :path="polygonPath1" stroke-color="blue" fillColor="blue" :fillOpacity="1" :stroke-weight="2"/>--> |
| | | <!-- <bm-polygon :path="polygonPath2" stroke-color="red" fillColor="red" :fillOpacity="1" :stroke-weight="2"/>--> |
| | | <!-- <bm-overlay pane="mapPane" class="bg-pic" @draw="initMap">--> |
| | | <bm-ground class="picBg" :bounds="{ne: {lng: 85.129048, lat: 45.605790}, sw:{lng: 85.122984, lat: 45.592812}}" imageURL="/bigMap2.png" opacity="1" :displayOnMaxLevel="18" :zIndex="1"></bm-ground> |
| | | <!-- </bm-overlay>--> |
| | | <bm-overlay pane="mapPane" class="polys" @draw="initMap"> |
| | |
| | | range-separator="~" |
| | | start-placeholder="开始时间" |
| | | end-placeholder="结束时间" |
| | | @change = "chooseTime" |
| | | |
| | | /> |
| | | <!-- @change = "chooseTime"--> |
| | | </el-form-item> |
| | | <el-form-item label="区域:"> |
| | | <el-select |
| | |
| | | </vue3-json-excel> |
| | | </el-form> |
| | | </div> |
| | | <div :id="fluxChart" style="height: 500px;width: auto"></div> |
| | | <div :id="fluxChart" style="height: 500px;width: auto" v-loading="picLoading"></div> |
| | | <el-table :data="state.tableData.data" style="width: 100%" v-loading="loading"> |
| | | <el-table-column type="index" label="序号" width="80" /> |
| | | <el-table-column align="center" prop="time" label="采集时间"/> |
| | |
| | | }, |
| | | }); |
| | | const fields = ref({ |
| | | 'time':'dataReceivingTime', |
| | | 'time':'time', |
| | | '设备ID':'equipmentId', |
| | | '区域': 'areaId', |
| | | '风速':'windSpeed', |
| | |
| | | }); |
| | | |
| | | const loading = ref(false); |
| | | const picLoading = ref(false); |
| | | const myChart = shallowRef(null) |
| | | const fluxChart =ref("eChartfluxN" + Date .now() + Math .random()) |
| | | const chooseTime = (val:any) => { |
| | |
| | | const areaChart = ref([]as any); |
| | | const initInfoData = async () => { |
| | | await exportFluxData() |
| | | picLoading.value = true; |
| | | //柱状图 |
| | | const chartParam = { |
| | | startTime: moment(state.tableData.listQuery.searchParams.time[0]).format('YYYY-MM-DD HH:mm:ss'), |
| | |
| | | } |
| | | let resChart = await fluxDataApi().getFluxLineChart(chartParam); |
| | | if(resChart.data.code == 100) { |
| | | picLoading.value = false; |
| | | if(resChart.data.data) { |
| | | // yData.value = mapArray(resChart.data.data); |
| | | const gasTime = resChart.data.data.map(i=>i.time?.slice(11)) |
| | |
| | | range-separator="~" |
| | | start-placeholder="开始时间" |
| | | end-placeholder="结束时间" |
| | | @change = "chooseTime" |
| | | |
| | | /> |
| | | <!-- @change = "chooseTime"--> |
| | | </el-form-item> |
| | | <el-form-item label="气体:"> |
| | | <el-select |
| | |
| | | </vue3-json-excel> |
| | | </el-form> |
| | | </div> |
| | | <div :id="gasChart" style="height: 500px;width: auto"></div> |
| | | <div :id="gasChart" style="height: 500px;width: auto" v-loading="picLoading"></div> |
| | | <el-table :data="state.tableData.data" style="width: 100%;margin-top: 20px" v-loading="loading"> |
| | | <el-table-column type="index" label="序号" width="80" /> |
| | | <el-table-column align="center" prop="time" label="采集时间"/> |
| | |
| | | } |
| | | }); |
| | | const fields = ref({ |
| | | 'time':'dataReceivingTime', |
| | | 'time':'time', |
| | | '设备ID':'equipmentId', |
| | | '位置':'position', |
| | | '经度':'lng', |
| | |
| | | } |
| | | } |
| | | const loading = ref(false); |
| | | const picLoading = ref(false); |
| | | const dataZoomEnd = ref(); |
| | | const xData = ref([]); |
| | | const yData = ref([]); |
| | |
| | | } |
| | | const initInfoData = async () => { |
| | | await exportGasData(); |
| | | picLoading.value = true; |
| | | //折线图 |
| | | const chartParam = { |
| | | startTime: moment(state.tableData.listQuery.searchParams.time[0]).format('YYYY-MM-DD HH:mm:ss'), |
| | |
| | | } |
| | | let resChart = await gasDataApi().getGasLineChart(chartParam); |
| | | if(resChart.data.code == 100) { |
| | | picLoading.value = false; |
| | | if (resChart.data.data) { |
| | | xData.value = resChart.data.data.map((item: any) => { |
| | | return item.time; |
| | |
| | | range-separator="~" |
| | | start-placeholder="开始时间" |
| | | end-placeholder="结束时间" |
| | | @change = "chooseTime" |
| | | |
| | | /> |
| | | <!-- @change = "chooseTime"--> |
| | | </el-form-item> |
| | | <el-form-item label="气象类型:"> |
| | | <el-select |
| | |
| | | </el-button> |
| | | </el-form> |
| | | </div> |
| | | <div :id="weatherChart" style="height: 500px;width: auto"></div> |
| | | <div :id="weatherChart" style="height: 500px;width: auto" v-loading="picLoading"></div> |
| | | <el-table :data="state.tableData.data" style="width: 100%;margin-top: 20px" v-loading="loading"> |
| | | <el-table-column type="index" label="序号" width="80" /> |
| | | <el-table-column align="center" prop="time" label="采集时间"/> |
| | |
| | | } |
| | | }); |
| | | const loading = ref(false); |
| | | const picLoading = ref(false); |
| | | const weatherName = ref('温度'); |
| | | const dataZoomEnd = ref(); |
| | | const xData = ref([]); |
| | |
| | | state.tableData.listQuery.searchParams.time = [sTime ,eTime]; |
| | | } |
| | | const initInfoData = async () => { |
| | | picLoading.value = true; |
| | | //折线图 |
| | | const chartParam = { |
| | | startTime: moment(state.tableData.listQuery.searchParams.time[0]).format('YYYY-MM-DD HH:mm:ss'), |
| | |
| | | return item.value; |
| | | }) |
| | | dataZoomEnd.value = xData.value.length > 25 ? 5 : 100; |
| | | picLoading.value = false |
| | | }else { |
| | | xData.value = []; |
| | | yData.value = []; |
| | |
| | | }); |
| | | } |
| | | |
| | | loading.value = true; |
| | | loading.value = true |
| | | //表格 |
| | | const pageParam = { |
| | | pageIndex: state.tableData.listQuery.pageIndex, |