|
|
@@ -34,13 +34,75 @@
|
|
|
</div>
|
|
|
<leftBox class="lefBox" />
|
|
|
<leftBox2 class="lefBox2" />
|
|
|
+ <cake
|
|
|
+ id="`移栽数据`"
|
|
|
+ barWidth="448px"
|
|
|
+ style="position: absolute; top: 95px; right: 550px"
|
|
|
+ title="移栽数据"
|
|
|
+ :data="statisticsData"
|
|
|
+ class="animated fadeInRight"
|
|
|
+ v-if="isCake"
|
|
|
+ />
|
|
|
+ <weatherForecast
|
|
|
+ :unit="`摄氏度`"
|
|
|
+ barWidth="448px"
|
|
|
+ style="position: absolute; right: 50px; top: 95px"
|
|
|
+ class="animated fadeInRight"
|
|
|
+ v-if="isWeather"
|
|
|
+ title="天气预报"
|
|
|
+ :area="Weatherarea"
|
|
|
+ :dataArray="WeatherdataArray"
|
|
|
+ :alertValue="30"
|
|
|
+ />
|
|
|
+ <wavyLineChart
|
|
|
+ id="`月度移栽趋势`"
|
|
|
+ barWidth="448px"
|
|
|
+ style="position: absolute; right: 550px; top: 400px; z-index: 10"
|
|
|
+ v-if="isTrend"
|
|
|
+ title="月度移栽趋势"
|
|
|
+ :area.sync="trendarea"
|
|
|
+ class="animated fadeInRight"
|
|
|
+ :dataArray.sync="trendDataArray"
|
|
|
+ />
|
|
|
+ <wavyLineChart
|
|
|
+ id="`月度移栽面积分析`"
|
|
|
+ barWidth="448px"
|
|
|
+ style="position: absolute; right: 550px; top: 730px; z-index: 10"
|
|
|
+ v-if="isTrend"
|
|
|
+ title="月度移栽面积分析"
|
|
|
+ :area.sync="trendarea"
|
|
|
+ class="animated fadeInRight"
|
|
|
+ :dataArray.sync="trendDataArray"
|
|
|
+ />
|
|
|
+ <wavyLineChart
|
|
|
+ id="`年度移栽趋势`"
|
|
|
+ barWidth="448px"
|
|
|
+ style="position: absolute; right: 50px; top: 400px; z-index: 10"
|
|
|
+ v-if="isTrend"
|
|
|
+ title="年度移栽趋势"
|
|
|
+ :area.sync="trendarea"
|
|
|
+ class="animated fadeInRight"
|
|
|
+ :dataArray.sync="trendDataArray"
|
|
|
+ />
|
|
|
+ <wavyLineChart
|
|
|
+ id="`年度移栽面积分析`"
|
|
|
+ barWidth="448px"
|
|
|
+ style="position: absolute; right: 50px; top: 730px; z-index: 10"
|
|
|
+ v-if="isTrend"
|
|
|
+ title="年度移栽面积分析"
|
|
|
+ :area.sync="trendarea"
|
|
|
+ class="animated fadeInRight"
|
|
|
+ :dataArray.sync="trendDataArray"
|
|
|
+ />
|
|
|
</div>
|
|
|
</bgBox>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import 'element-ui/lib/theme-chalk/index.css'
|
|
|
-
|
|
|
+import wavyLineChart from '@/components/Customize/wavyLineChart'
|
|
|
+import weatherForecast from '@/components/Customize/weatherForecast'
|
|
|
+import cake from '@/components/Customize/cake'
|
|
|
import bgBox from '@/components/bgBox/index.vue'
|
|
|
import leftBox from './leftBox.vue'
|
|
|
import leftBox2 from './leftBox2.vue'
|
|
|
@@ -68,6 +130,9 @@ export default {
|
|
|
leftBox,
|
|
|
leftBox2,
|
|
|
bgBox,
|
|
|
+ wavyLineChart,
|
|
|
+ weatherForecast,
|
|
|
+ cake,
|
|
|
},
|
|
|
data() {
|
|
|
const vm = this
|
|
|
@@ -92,10 +157,47 @@ export default {
|
|
|
radio: 6,
|
|
|
date: [],
|
|
|
},
|
|
|
+ trendarea: [],
|
|
|
+ trendDataArray: {
|
|
|
+ LastYear: [],
|
|
|
+ thisYear: [],
|
|
|
+ },
|
|
|
+ statisticsData: {
|
|
|
+ title: `处理率`,
|
|
|
+ value: 0,
|
|
|
+ acrossList: [{ name: `今日种植数`, value: undefined }],
|
|
|
+ verticalList: [
|
|
|
+ { name: `目标移栽数`, value: undefined },
|
|
|
+ { name: `累计移栽`, value: undefined },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ Weatherarea: [],
|
|
|
+ WeatherdataArray: [],
|
|
|
+ isCake: false,
|
|
|
+ isTrend: false,
|
|
|
+ isWeather: false,
|
|
|
}
|
|
|
},
|
|
|
computed: {},
|
|
|
- async created() {},
|
|
|
+ async created() {
|
|
|
+ this.$util.autoVueFn(
|
|
|
+ [
|
|
|
+ {
|
|
|
+ time: 1000 * 5,
|
|
|
+ fn: this.getTrendAnalysis,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: 1000 * 5,
|
|
|
+ fn: this.getStatistics,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: 1000 * 5,
|
|
|
+ fn: this.getWeatherForecast,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ this
|
|
|
+ )
|
|
|
+ },
|
|
|
watch: {
|
|
|
'query.radio': {
|
|
|
handler(val) {
|
|
|
@@ -123,6 +225,62 @@ export default {
|
|
|
getEchartData(start, end) {
|
|
|
console.log(`start, end`, start, end)
|
|
|
},
|
|
|
+ getWeatherForecast() {
|
|
|
+ return this.$http.get(`/api/weatherForecast`).then((res) => {
|
|
|
+ const area = []
|
|
|
+ const dataArray = []
|
|
|
+ res.forEach((element) => {
|
|
|
+ area.push(element.时间)
|
|
|
+ dataArray.push(element.温度)
|
|
|
+ })
|
|
|
+ this.Weatherarea = area
|
|
|
+ this.WeatherdataArray = dataArray
|
|
|
+ this.isWeather = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getTrendAnalysis() {
|
|
|
+ this.$http.get(`/api/transplantTrendAnalysis`).then((res) => {
|
|
|
+ const area = []
|
|
|
+ const dataArray = {
|
|
|
+ LastYear: [],
|
|
|
+ thisYear: [],
|
|
|
+ }
|
|
|
+ res.forEach((element) => {
|
|
|
+ area.push(element.时间)
|
|
|
+ dataArray.LastYear.push(element.去年)
|
|
|
+ dataArray.thisYear.push(element.今年)
|
|
|
+ })
|
|
|
+ this.trendarea = area
|
|
|
+ this.trendDataArray = dataArray
|
|
|
+ this.isTrend = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getStatistics() {
|
|
|
+ return this.$http.get(`/api/transplantData`).then((res) => {
|
|
|
+ const obj = this.statisticsData
|
|
|
+ // eslint-disable-next-line no-prototype-builtins
|
|
|
+ if (res.hasOwnProperty(obj.title)) {
|
|
|
+ obj.value = res[obj.title]
|
|
|
+ }
|
|
|
+ const list1 = this.statisticsData.acrossList
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ const list2 = this.statisticsData.verticalList
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ this.isCake = true
|
|
|
+ })
|
|
|
+ },
|
|
|
backFn() {
|
|
|
console.log(`backFn`)
|
|
|
},
|
Cooklalala