|
|
@@ -1,74 +1,79 @@
|
|
|
<template>
|
|
|
<bgBox :tabChange="tabChange" class="bgBox" :tabIndex="0">
|
|
|
<cake
|
|
|
- id="`实时统计`"
|
|
|
- style="position: absolute; top: 115px; left: 50px"
|
|
|
- title="实时统计"
|
|
|
- :data="statisticsData"
|
|
|
- class="animated fadeInLeft"
|
|
|
- v-if="isCake"
|
|
|
+ id="`实时统计`"
|
|
|
+ style="position: absolute; top: 115px; left: 50px"
|
|
|
+ title="实时统计"
|
|
|
+ :data="statisticsData"
|
|
|
+ class="animated fadeInLeft"
|
|
|
+ v-if="isCake"
|
|
|
/>
|
|
|
<cylindricalHistogram
|
|
|
- style="position: absolute; left: 50px; top: 430px"
|
|
|
- class="animated fadeInLeft"
|
|
|
- v-if="isGetData"
|
|
|
- :unit="`公斤/产量`"
|
|
|
- title="各区域移栽产量分析"
|
|
|
- :area="Transplantarea"
|
|
|
- :dataArray="TransplantdataArray"
|
|
|
+ style="position: absolute; left: 50px; top: 430px"
|
|
|
+ class="animated fadeInLeft"
|
|
|
+ v-if="isGetData"
|
|
|
+ :unit="`公斤/产量`"
|
|
|
+ title="各区域移栽产量分析"
|
|
|
+ :area="Transplantarea"
|
|
|
+ :dataArray="TransplantdataArray"
|
|
|
/>
|
|
|
<weatherForecast
|
|
|
- :unit="`摄氏度`"
|
|
|
- style="position: absolute; left: 50px; top: 760px"
|
|
|
- class="animated fadeInLeft"
|
|
|
- v-if="isWeather"
|
|
|
- title="天气预报"
|
|
|
- :area="Weatherarea"
|
|
|
- :dataArray="WeatherdataArray"
|
|
|
- :alertValue="30"
|
|
|
+ :unit="`摄氏度`"
|
|
|
+ style="position: absolute; left: 50px; top: 760px"
|
|
|
+ class="animated fadeInLeft"
|
|
|
+ v-if="isWeather"
|
|
|
+ title="天气预报"
|
|
|
+ :area="Weatherarea"
|
|
|
+ :dataArray="WeatherdataArray"
|
|
|
+ :alertValue="30"
|
|
|
/>
|
|
|
<wavyLineChart
|
|
|
- :unit="`平方米/面积`"
|
|
|
- id="`wavyLineChart`"
|
|
|
- :lineName="yearName"
|
|
|
- style="position: absolute; right: 50px; top: 115px"
|
|
|
- class="animated fadeInRight"
|
|
|
- v-if="isWavyLine"
|
|
|
- title="各区域移栽面积"
|
|
|
- :area="wavyLineArea"
|
|
|
- :dataArray="wavyLinedataArray"
|
|
|
- smooth="true"
|
|
|
+ :unit="`平方米/面积`"
|
|
|
+ id="`wavyLineChart`"
|
|
|
+ :lineName="yearName"
|
|
|
+ style="position: absolute; right: 50px; top: 115px"
|
|
|
+ class="animated fadeInRight"
|
|
|
+ v-if="isWavyLine"
|
|
|
+ title="各区域移栽面积"
|
|
|
+ :area="wavyLineArea"
|
|
|
+ :dataArray="wavyLinedataArray"
|
|
|
+ smooth="true"
|
|
|
/>
|
|
|
<HorizontalHistogram
|
|
|
- style="position: absolute; right: 50px; top: 430px"
|
|
|
- class="animated fadeInRight"
|
|
|
- v-if="isHorizontal"
|
|
|
- id="`移栽情况分析`"
|
|
|
- title="移栽情况分析"
|
|
|
- :area="HorizontalArea"
|
|
|
- :dataArray="HorizontalArray"
|
|
|
+ style="position: absolute; right: 50px; top: 430px"
|
|
|
+ class="animated fadeInRight"
|
|
|
+ v-if="isHorizontal"
|
|
|
+ id="`移栽情况分析`"
|
|
|
+ title="移栽情况分析"
|
|
|
+ :area="HorizontalArea"
|
|
|
+ :dataArray="HorizontalArray"
|
|
|
/>
|
|
|
<wavyLineChart
|
|
|
- id="`移栽趋势分析`"
|
|
|
- :lineName="yearName"
|
|
|
- style="position: absolute; right: 50px; top: 760px"
|
|
|
- class="animated fadeInRight"
|
|
|
- v-if="isTrend"
|
|
|
- title="移栽趋势分析"
|
|
|
- :area="trendarea"
|
|
|
- :dataArray="trendDataArray"
|
|
|
+ id="`移栽趋势分析`"
|
|
|
+ :lineName="yearName"
|
|
|
+ style="position: absolute; right: 50px; top: 760px"
|
|
|
+ class="animated fadeInRight"
|
|
|
+ v-if="isTrend"
|
|
|
+ title="移栽趋势分析"
|
|
|
+ :area="trendarea"
|
|
|
+ :dataArray="trendDataArray"
|
|
|
/>
|
|
|
- <threeMap
|
|
|
- @toView="toView"
|
|
|
- class="animated zoomIn"
|
|
|
- style="
|
|
|
+ <statisticsPanel style="
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
- transform: translate(-55%, 20%);
|
|
|
+ transform: translate(-55%, 150%);
|
|
|
+ "/>
|
|
|
+ <threeMap
|
|
|
+ @toView="toView"
|
|
|
+ class="animated zoomIn"
|
|
|
+ style="
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-55%, 30%);
|
|
|
"
|
|
|
- v-if="hasGetJson"
|
|
|
- :getJson="getJson"
|
|
|
+ v-if="hasGetJson"
|
|
|
+ :getJson="getJson"
|
|
|
></threeMap>
|
|
|
</bgBox>
|
|
|
</template>
|
|
|
@@ -81,6 +86,7 @@ import cylindricalHistogram from '@/components/Customize/cylindricalHistogram'
|
|
|
import weatherForecast from '@/components/Customize/weatherForecast'
|
|
|
import wavyLineChart from '@/components/Customize/wavyLineChart'
|
|
|
import HorizontalHistogram from '@/components/Customize/HorizontalHistogram'
|
|
|
+import statisticsPanel from '@/components/statisticsPanel/index.vue'
|
|
|
import threeMap from '@/components/Customize/map/index'
|
|
|
|
|
|
export default {
|
|
|
@@ -90,6 +96,7 @@ export default {
|
|
|
weatherForecast,
|
|
|
wavyLineChart,
|
|
|
HorizontalHistogram,
|
|
|
+ statisticsPanel,
|
|
|
bgBox,
|
|
|
threeMap,
|
|
|
cake,
|
|
|
@@ -102,12 +109,12 @@ export default {
|
|
|
title: `目标完成率`,
|
|
|
value: 0,
|
|
|
acrossList: [
|
|
|
- { name: `年移栽数量`, value: undefined },
|
|
|
- { name: `年移栽面积`, value: undefined },
|
|
|
+ {name: `年移栽数量`, value: undefined},
|
|
|
+ {name: `年移栽面积`, value: undefined},
|
|
|
],
|
|
|
verticalList: [
|
|
|
- { name: `移栽区域数`, value: undefined },
|
|
|
- { name: `烟农数量`, value: undefined },
|
|
|
+ {name: `移栽区域数`, value: undefined},
|
|
|
+ {name: `烟农数量`, value: undefined},
|
|
|
],
|
|
|
},
|
|
|
yearName: {
|
|
|
@@ -185,12 +192,13 @@ export default {
|
|
|
// )
|
|
|
// this.$http.get(`https://httpbin.org/get`)
|
|
|
},
|
|
|
- mounted() {},
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
methods: {
|
|
|
async toView(code) {
|
|
|
console.log(code)
|
|
|
|
|
|
- const { id, 区域编码 } = (await this.$util.code2base(this, code)) || {}
|
|
|
+ const {id, 区域编码} = (await this.$util.code2base(this, code)) || {}
|
|
|
this.$router.push({
|
|
|
path: `/page3`,
|
|
|
query: {
|
|
|
@@ -209,41 +217,41 @@ export default {
|
|
|
},
|
|
|
getAnalysisOfTransplantYieldInVariousRegions() {
|
|
|
return this.$http
|
|
|
- .get(`/api/analysisOfTransplantYieldInVariousRegions`)
|
|
|
- .then((res) => {
|
|
|
- const area = []
|
|
|
- const dataArray = []
|
|
|
- res.forEach((element) => {
|
|
|
- area.push(element.名称.slice(0, 2))
|
|
|
- dataArray.push(element.值)
|
|
|
+ .get(`/api/analysisOfTransplantYieldInVariousRegions`)
|
|
|
+ .then((res) => {
|
|
|
+ const area = []
|
|
|
+ const dataArray = []
|
|
|
+ res.forEach((element) => {
|
|
|
+ area.push(element.名称.slice(0, 2))
|
|
|
+ dataArray.push(element.值)
|
|
|
+ })
|
|
|
+ this.Transplantarea = area
|
|
|
+ this.TransplantdataArray = dataArray
|
|
|
+ this.isGetData = true
|
|
|
})
|
|
|
- this.Transplantarea = area
|
|
|
- this.TransplantdataArray = dataArray
|
|
|
- this.isGetData = true
|
|
|
- })
|
|
|
},
|
|
|
getWeatherForecast() {
|
|
|
return this.$http
|
|
|
- .get(`/api/weatherForecast`, {
|
|
|
- params: {
|
|
|
- districtId: 0,
|
|
|
- },
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- const area = []
|
|
|
- const dataArray = {
|
|
|
- temperature: [],
|
|
|
- Weather: [],
|
|
|
- }
|
|
|
- res.forEach((element) => {
|
|
|
- area.push(element.时间)
|
|
|
- dataArray.temperature.push(element.温度)
|
|
|
- dataArray.Weather.push(element.天气)
|
|
|
+ .get(`/api/weatherForecast`, {
|
|
|
+ params: {
|
|
|
+ districtId: 0,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ const area = []
|
|
|
+ const dataArray = {
|
|
|
+ temperature: [],
|
|
|
+ Weather: [],
|
|
|
+ }
|
|
|
+ res.forEach((element) => {
|
|
|
+ area.push(element.时间)
|
|
|
+ dataArray.temperature.push(element.温度)
|
|
|
+ dataArray.Weather.push(element.天气)
|
|
|
+ })
|
|
|
+ this.Weatherarea = area
|
|
|
+ this.WeatherdataArray = dataArray
|
|
|
+ this.isWeather = true
|
|
|
})
|
|
|
- this.Weatherarea = area
|
|
|
- this.WeatherdataArray = dataArray
|
|
|
- this.isWeather = true
|
|
|
- })
|
|
|
},
|
|
|
getTransplantAreaInEachRegion() {
|
|
|
return this.$http.get(`/api/transplantAreaInEachRegion`).then((res) => {
|
|
|
@@ -291,7 +299,7 @@ export default {
|
|
|
this.statisticsData.acrossList = list1.map((item) => {
|
|
|
// eslint-disable-next-line no-prototype-builtins
|
|
|
if (res.hasOwnProperty(item.name)) {
|
|
|
- return { ...item, value: res[item.name] }
|
|
|
+ return {...item, value: res[item.name]}
|
|
|
}
|
|
|
return item
|
|
|
})
|
|
|
@@ -299,7 +307,7 @@ export default {
|
|
|
this.statisticsData.verticalList = list2.map((item) => {
|
|
|
// eslint-disable-next-line no-prototype-builtins
|
|
|
if (res.hasOwnProperty(item.name)) {
|
|
|
- return { ...item, value: res[item.name] }
|
|
|
+ return {...item, value: res[item.name]}
|
|
|
}
|
|
|
return item
|
|
|
})
|
Cooklalala
