Skip to content

Y
yuji-dataview
Commit b20ccf4a authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

稻鱼种养全国与省切换

parent 8d0bf3a8
Show whitespace changes
Inline Side-by-side
Showing with 447 additions and 150 deletions
src/assets/images/bg.png
View replaced file @ 8d0bf3a8 View file @ b20ccf4a
This image diff could not be displayed because it is too large. You can view the blob instead.
src/components/MonitorComponents/MonitorTitle/monitor-title.vue
View file @ b20ccf4a
......@@ -111,7 +111,7 @@ export default {
if (path === '/') {
this.curIndex = 0
} else {
this.curIndex = this.menus.findIndex(menu => path === menu.path)
this.curIndex = this.menus.findIndex(menu => path.startsWith(menu.path))
}
}
}
......@@ -174,10 +174,10 @@ $color = #25e7f6
transform translateY(-80%)
img
position absolute
width 120%
width 110%
height 100%
top 0
left -10%
left -5%
>p
color $color
z-index 9
......
src/views/components/rice-fish/data-comparison.vue
View file @ b20ccf4a
......@@ -9,6 +9,14 @@
<script>
export default {
name: 'DataComparison',
props: {
data: {
type: Array,
default() {
return []
}
}
},
data() {
return {
showChart: false,
......@@ -25,13 +33,6 @@ export default {
key: 'year',
},
},
data: [
{year: '2015', area: 200000, product: 300000},
{year: '2016', area: 300000, product: 450000},
{year: '2017', area: 400000, product: 500000},
{year: '2018', area: 500000, product: 650000},
{year: '2019', area: 600000, product: 750000},
],
}
},
mounted() {
......
src/views/components/rice-fish/mode-rate.vue
View file @ b20ccf4a
......@@ -36,12 +36,12 @@ export default {
type: '水稻',
options: ['水稻'],
config: {
colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb', 'transparent'],
legend: {
hide: true,
},
shape: [
{type: 'pie', radius: [20 * Number((screen.height / 800).toFixed(1)), 70 * Number((screen.height / 800).toFixed(1))], roseType: 'radius', center: ['50%', '50%']}
{type: 'pie', startAngle: 0, clockWise: false, radius: [10 * Number((screen.height / 800).toFixed(1)), 700 * Number((screen.height / 800).toFixed(1))], roseType: 'radius', center: ['40%', '80%']}
]
},
data: [
......@@ -54,6 +54,7 @@ export default {
{name: '稻蛙', value: 300},
{name: '稻螺', value: 200},
{name: '其他', value: 100},
{value: 4500}
],
config2: {
colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
......@@ -135,8 +136,8 @@ export default {
>div
flex 1
.border
width 9rem
height 9rem
width 8rem
height @width
border 0.2rem solid #00f2ff
position absolute
top 50%
......@@ -148,11 +149,11 @@ export default {
.title
position absolute
left 1rem
top -0.5rem
top 0
display flex
align-items center
font-weight bold
font-size 1.2rem
font-size 1rem
>span
display block
width .3rem
......
src/views/components/rice-fish/mode-rate2.vue 0 → 100644
View file @ b20ccf4a
<template>
<div class="mode-rate">
<div class="legend">
<p v-for="(item, i) in data" :key="item.name"><span :style="`background:${config.colors[i]}`"/> {{item.name}}</p>
</div>
<div class="chart-wrapper" v-if="showChart">
<div>
<p class="title"><span/>面积</p>
<m-chart :config="config" :data="data"/>
</div>
<div>
<p class="title"><span/>水稻产量</p>
<m-chart style="z-index:99;" :config="config2" :data="data2"/>
<div class="border" />
</div>
<div>
<p class="title"><span/>水稻产值</p>
<m-chart style="z-index:99;" :config="config3" :data="data3"/>
<div class="border" />
</div>
<div>
<p class="title"><span/>水产品产量</p>
<m-chart style="z-index:99;" :config="config2" :data="data2"/>
<div class="border" />
</div>
<div>
<p class="title"><span/>水产品产值</p>
<m-chart style="z-index:99;" :config="config3" :data="data3"/>
<div class="border" />
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ModeRate2',
data() {
return {
showChart: false,
config: {
colors: ['#fe3c3a', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
legend: {
hide: true,
},
shape: [
{type: 'pie', radius: [35 * Number((screen.height / 800).toFixed(1)), 55 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
]
},
data: [
{name: '稻小龙虾', value: 900},
{name: '稻青虾', value: 800},
{name: '稻蟹', value: 700},
{name: '稻鲤', value: 600},
{name: '稻鳅', value: 500},
{name: '稻鳖', value: 400},
{name: '稻蛙', value: 300},
{name: '稻螺', value: 200},
{name: '其他', value: 100},
],
config2: {
colors: ['#fe3c3a', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
legend: {
hide: true,
},
shape: [
{type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
]
},
data2: [
{name: '稻小龙虾', value: 900},
{name: '稻青虾', value: 800},
{name: '稻蟹', value: 700},
{name: '稻鲤', value: 600},
{name: '稻鳅', value: 500},
{name: '稻鳖', value: 400},
{name: '稻蛙', value: 300},
{name: '稻螺', value: 200},
{name: '其他', value: 100},
],
config3: {
colors: ['#fe3c3a', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
legend: {
hide: true,
},
shape: [
{type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
]
},
data3: [
{name: '稻小龙虾', value: 900},
{name: '稻青虾', value: 800},
{name: '稻蟹', value: 700},
{name: '稻鲤', value: 600},
{name: '稻鳅', value: 500},
{name: '稻鳖', value: 400},
{name: '稻蛙', value: 300},
{name: '稻螺', value: 200},
{name: '其他', value: 100},
],
}
},
mounted() {
setTimeout(() => this.showChart = true)
},
}
</script>
<style lang="stylus" scoped>
.mode-rate
width 100%
height 100%
overflow hidden
.legend
display flex
align-items center
justify-content space-around
width 80%
margin 0 auto .5rem
span
display inline-block
width .8rem
height @width
border-radius 50%
margin-right .4rem
.chart-wrapper
width inherit
height inherit
display flex
>div
position relative
flex 1
height calc(100% - 1rem)
.border
width 8rem
height @width
border 0.2rem solid #00f2ff
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
border-radius 50%
box-shadow 0 0 1rem 0.2rem rgba(255,255,255,0.3), inset 0 0 1rem 0.2rem rgba(255,255,255,0.3)
opacity .9
.title
position absolute
left 1rem
top 0
display flex
align-items center
font-weight bold
font-size 1rem
>span
display block
width .3rem
height 1.2rem
background $edgeColor
margin-right .6rem
</style>
src/views/components/rice-fish/nation.vue 0 → 100644
View file @ b20ccf4a
<template>
<m-grid
area="grid"
:template="[
'select select',
'box1 box1',
'box2 box3',
'box4 box4',
]"
columns="1fr 1fr"
rows="2rem 1fr 1fr 1fr"
gap="0.5rem">
<div class="year-select-wrapper" area="select">
<p>主显示</p>
<Select class="year-select" @on-change="$store.commit('SET_MAIN_YEAR', $event)" v-model="disease" transfer>
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select>
</div>
<m-card area="box1" title="养殖模式数据占比">
<ModeRate />
</m-card>
<m-card area="box2" title="各面积占比">
<AreaRate />
</m-card>
<m-card area="box3" title="稻小龙虾数据对比">
<DataComparison :data="dataComparison"/>
</m-card>
<m-card area="box4" title="稻虾加工情况统计">
<ProcessSituation />
</m-card>
</m-grid>
</template>
<script>
import ModeRate from './mode-rate'
import AreaRate from './area-rate'
import DataComparison from './data-comparison'
import ProcessSituation from './process-situation'
export default {
name: 'NationRiceFish',
components: {
ModeRate,
AreaRate,
DataComparison,
ProcessSituation,
},
data() {
return {
disease: '2019',
options: ['2019', '2018', '2017'],
dataComparison: [
{year: '2015', area: 200000, product: 300000},
{year: '2016', area: 300000, product: 450000},
{year: '2017', area: 400000, product: 500000},
{year: '2018', area: 500000, product: 650000},
{year: '2019', area: 600000, product: 750000},
]
}
},
}
</script>
<style lang="stylus" scoped>
.year-select-wrapper
display flex
align-items center
justify-content flex-end
p
font-size 1.2rem
font-weight bold
margin-right 1rem
.year-select
width 15%
</style>
src/views/components/rice-fish/process-situation2.vue 0 → 100644
View file @ b20ccf4a
<template>
<div class="process-situation" v-if="showChart">
<m-chart :config="config" :data="data"/>
</div>
</template>
<script>
export default {
name: 'ProcessSituation2',
data() {
return {
showChart: false,
config: {
colors: ['#7e78f8', '#40bdf9', '#21f4f9', '#4ffb8b', '#faef3a'],
legend: {
align: 'right',
orient: 'horizontal',
},
shape: [
{name: '整虾加工量', key: 'val1', type: 'bar', stack: '1', barWidth: '50%', borderRadius: [0, 0, 3, 3]},
{name: '虾仁加工量', key: 'val2', type: 'bar', stack: '1', barWidth: '50%', },
{name: '虾尾加工量', key: 'val3', type: 'bar', stack: '1', barWidth: '50%', },
{name: '精深加工量', key: 'val4', type: 'bar', stack: '1', barWidth: '50%', },
{name: '其他产品加工量', key: 'val5', type: 'bar', stack: '1', barWidth: '50%', borderRadius: [3, 3, 0, 0]},
],
xAxis: {
key: 'month',
},
yAxis: {
name: '单位：吨'
}
},
data: [
{month: '1月', val1: 20000, val2: 12000, val3: 14000, val4: 26000, val5: 4000},
{month: '2月', val1: 22000, val2: 14000, val3: 18000, val4: 20000, val5: 6000},
{month: '3月', val1: 24000, val2: 16000, val3: 24000, val4: 24000, val5: 8000},
{month: '4月', val1: 26000, val2: 18000, val3: 24000, val4: 20000, val5: 10000},
{month: '5月', val1: 28000, val2: 20000, val3: 20000, val4: 22000, val5: 8000},
{month: '6月', val1: 20000, val2: 22000, val3: 22000, val4: 23000, val5: 4000},
{month: '7月', val1: 28000, val2: 22000, val3: 20000, val4: 24000, val5: 5000},
{month: '8月', val1: 26000, val2: 18000, val3: 18000, val4: 25000, val5: 6000},
{month: '9月', val1: 20000, val2: 20000, val3: 24000, val4: 26000, val5: 7000},
{month: '10月', val1: 28000, val2: 22000, val3: 28000, val4: 27000, val5: 8000},
{month: '11月', val1: 20000, val2: 20000, val3: 20000, val4: 28000, val5: 9000},
{month: '12月', val1: 23000, val2: 20000, val3: 24000, val4: 29000, val5: 10000},
],
}
},
mounted() {
setTimeout(() => this.showChart = true)
},
}
</script>
<style lang="stylus" scoped>
.process-situation
width 100%
height 100%
</style>
src/views/components/rice-fish/province.vue 0 → 100644
View file @ b20ccf4a
<template>
<m-grid
area="grid"
:template="[
'select select',
'box1 box1',
'box2 box3',
'box4 box4',
]"
columns="1fr 1.3fr"
rows="2rem 1fr 1fr 1fr"
gap="0.5rem">
<div class="year-select-wrapper" area="select">
<p>主显示</p>
<Select class="year-select" @on-change="$store.commit('SET_MAIN_YEAR', $event)" v-model="disease" transfer>
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select>
</div>
<m-card area="box1" title="养殖模式数据占比">
<ModeRate2 />
</m-card>
<m-card area="box2" title="各面积占比">
<AreaRate />
</m-card>
<m-card area="box3" title="稻小龙虾数据对比">
<DataComparison :data="dataComparison"/>
</m-card>
<m-card area="box4" title="稻虾加工情况统计">
<ProcessSituation2 />
</m-card>
</m-grid>
</template>
<script>
import ModeRate2 from './mode-rate2'
import AreaRate from './area-rate'
import DataComparison from './data-comparison'
import ProcessSituation2 from './process-situation2'
export default {
name: 'ProvinceRiceFish',
components: {
ModeRate2,
AreaRate,
DataComparison,
ProcessSituation2,
},
data() {
return {
disease: '2019',
options: ['2019', '2018', '2017'],
dataComparison: [
{year: '2013', area: 100000, product: 200000},
{year: '2014', area: 150000, product: 280000},
{year: '2015', area: 200000, product: 300000},
{year: '2016', area: 300000, product: 450000},
{year: '2017', area: 400000, product: 500000},
{year: '2018', area: 500000, product: 650000},
{year: '2019', area: 600000, product: 750000},
]
}
},
}
</script>
<style lang="stylus" scoped>
.year-select-wrapper
display flex
align-items center
justify-content flex-end
p
font-size 1.2rem
font-weight bold
margin-right 1rem
.year-select
width 15%
</style>
src/views/components/rice-fish/rice-fish-map.vue
View file @ b20ccf4a
<template>
<div class="map-wrapper">
<BorderBox class="sum">
<p>示范区数量</p>
<p>{{curProvince ? `${curProvince}示范企业数量` : '示范区数量'}}</p>
<h2><m-count class="count" :value="54874589" :decimal="0"/> 个</h2>
</BorderBox>
<div class="map" ref="map"/>
<!-- <div class="visual-range">
<p>
采集点数量<br/>
<span>（单位：个）</span>
</p>
<div class="slider-wrapper">
<Slider class="slider" v-model="range" range :max="80"/>
<m-count class="count" :value="0" :decimal="0"/>
<m-count class="count" :value="80" :decimal="0"/>
</div>
</div> -->
</div>
</template>
......@@ -205,7 +194,7 @@ export default {
map: 'china',
// left: '1%',
// right: '1%',
layoutCenter: ['50%', '50%'],
layoutCenter: ['50%', '40%'],
layoutSize: '100%',
zoom: 1, //当前视角的缩放比例
label: {
......@@ -249,13 +238,17 @@ export default {
this.$echarts.registerMap(this.mapName, china)
this.map = this.$echarts.init(this.$refs.map)
this.addEvent()
this.config.series.push({
this.loadNationMap()
},
loadNationMap() {
this.curProvince = null
this.map.clear()
this.config.series = [{
type: 'map',
map: this.mapName,
geoIndex: 0,
data: provinceData,
})
this.config.series.push({
}, {
type: 'scatter', // series图表类型
coordinateSystem: 'geo', // series坐标系类型
data: mock,
......@@ -265,7 +258,7 @@ export default {
symbolSize: 20 * this.sizeRate,
symbol: 'pin',
geoIndex: 0,
})
}]
this.config.tooltip = {
trigger: 'item',
formatter: this.visualFormatter,
......@@ -297,7 +290,7 @@ export default {
const config = {
geo: {
map: name,
layoutCenter: ['40%', '50%'],
layoutCenter: ['50%', '40%'],
layoutSize: '90%',
zoom: 1, //当前视角的缩放比例
itemStyle: {
......@@ -322,76 +315,13 @@ export default {
addEvent() {
this.map.on('click', ({name}) => {
if (this.isProvince(name)) {
this.$emit('select', name)
this.curProvince = name
this.loadMapSource(name)
}
})
// // 监听地图点击事件
// this.map.on('click', (ev) => {
// const {name} = ev.data
// console.log(name)
// this.setRegions(name)
// this.curProvince = name
// this.$emit('select', name)
// })
// // 点击空白处则取消选中状态
// this.map.getZr().on('click', e => {
// if (!e.target && this.curProvince) {
// const name = this.curProvince
// this.setRegions(null)
// this.$emit('select', name)
// }
// })
},
// setRegions(name) {
// this.curProvince = name
// if (!name) {
// this.config.geo.regions = []
// this.map.setOption(this.config)
// return
// }
// let regions = [{
// name,
// selected: true,
// itemStyle: {
// areaColor: '#5ad4ff',
// shadowColor: 'rgba(0, 0, 0, 1)',
// shadowBlur: 10,
// shadowOffsetY: 10,
// shadowOffsetX: -5,
// }
// }]
// if (this.config.geo.regions.length > 0 && this.config.geo.regions[0].name == name) {
// regions = []
// }
// this.config.geo.regions = regions
// this.map.setOption(this.config)
// },
},
// watch: {
// data(cur, past) {
// if (cur && cur !== past && cur.length > 0) {
// this.config.series.push({
// type: 'scatter',
// coordinateSystem: 'geo',
// // map: this.mapName,
// // geoIndex: 0,
// data: cur,
// })
// this.config.tooltip = {
// trigger: 'item',
// formatter: this.visualFormatter,
// }
// // this.config.visualMap = Object.assign({
// // show: false,
// // inRange: {
// // opacity: 0.5,
// // color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.8)']
// // }
// // }, this.visualConfig)
// this.map.setOption(this.config)
// }
// }
// }
}
</script>
......@@ -399,12 +329,10 @@ export default {
.map-wrapper
width 100%
height 100%
position relative
padding-top 3rem
>.map
position absolute
width 45%
height 250%
width 100%
height 100%
z-index 99
>.sum
width 40%
......
src/views/rice-fish.vue
View file @ b20ccf4a
<template>
<m-grid
:template="[
'map select select',
'map box1 box1',
'map box2 box3',
'map box4 box4',
]"
columns="1fr 0.6fr 0.6fr"
rows="2rem 1fr 1fr 1fr"
gap="0.5rem"
>
<div class="year-select-wrapper" area="select">
<p>主显示</p>
<Select class="year-select" @on-change="$store.commit('SET_MAIN_YEAR', $event)" v-model="disease" transfer>
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select>
<div class="rice-fish">
<div style="flex:1">
<RiceFishMap ref="map" @select="handleMapSelect" area="map" />
</div>
<RiceFishMap area="map" />
<m-card area="box1" title="养殖模式数据占比">
<ModeRate />
</m-card>
<m-card area="box2" title="各面积占比">
<AreaRate />
</m-card>
<m-card area="box3" title="稻小龙虾数据对比">
<DataComparison />
</m-card>
<m-card area="box4" title="稻虾加工情况统计">
<ProcessSituation />
</m-card>
</m-grid>
<div v-if="showProvince" class="back" @click="handleBack">
<Icon type="md-arrow-round-back" /> 返回
</div>
<div style="flex:1.3">
<m-animate enter="fadeInRight" leave="fadeOutRight">
<Nation v-if="!showProvince"></Nation>
<Province v-else></Province>
</m-animate>
</div>
</div>
</template>
<script>
import RiceFishMap from './components/rice-fish/rice-fish-map'
import ModeRate from './components/rice-fish/mode-rate'
import AreaRate from './components/rice-fish/area-rate'
import DataComparison from './components/rice-fish/data-comparison'
import ProcessSituation from './components/rice-fish/process-situation'
import Nation from './components/rice-fish/nation'
import Province from './components/rice-fish/province'
export default {
name: 'RiceFish',
components: {
RiceFishMap,
ModeRate,
AreaRate,
DataComparison,
ProcessSituation,
Nation,
Province,
},
data() {
return {
showProvince: false,
disease: '2019',
options: ['2019', '2018', '2017'],
}
},
computed: {
flex() {
return this.showProvince ? '0.5' : '1'
}
},
methods: {
handleMapSelect() {
this.showProvince = true
},
handleBack() {
this.showProvince = false
this.$refs.map.loadNationMap()
},
}
}
</script>
<style lang="stylus" scoped>
.year-select-wrapper
.rice-fish
width 100%
height 100%
display flex
align-items center
justify-content flex-end
p
font-size 1.2rem
.back
position absolute
top .6rem
left 2rem
z-index 9999
color $edgeColor
font-weight bold
margin-right 1rem
.year-select
width 15%
cursor pointer
font-size 1.1rem
&:hover
text-shadow 0 0 0.8rem $edgeColor
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment