Skip to content

D
dashboard
Commit d0f6a001 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

广东专题地图

parent 690c0b6b
Show whitespace changes
Inline Side-by-side
Showing with 1874 additions and 98 deletions
src/App.vue
View file @ d0f6a001
......@@ -36,4 +36,23 @@ html, body
font-size 1rem
overflow: hidden
color $fontColor
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 0.5rem;
}
// /* 滚动槽 */
// ::-webkit-scrollbar-track {
// -webkit-box-shadow: inset006pxrgba(0,0,0,0.3);
// /* border-radius: 10px; */
// }
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
/* border-radius: 10px; */
background:rgba(91, 213, 255, 0.2)
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background:rgba(91, 213, 255, 0.2)
}
</style>
src/assets/images/stars.png deleted 100644 → 0
View file @ 690c0b6b
This diff is collapsed.
src/components/MonitorCard/monitor-card.vue
View file @ d0f6a001
......@@ -125,9 +125,9 @@ $size()
font-size 1.4rem
font-family $font-pang
.card-content
background $color-map(0.15)
background $color-map(0.1)
border-top 0.12rem solid $edgeColor
height calc(100% - 1.4rem)
height calc(100% - 2rem)
position relative
>.edge
position absolute
......
src/components/MonitorCount/monitor-count.vue
View file @ d0f6a001
......@@ -2,7 +2,7 @@
<ICountUp
:delay="delay"
:endVal="value"
:options="options"
:options="config"
@ready="onReady"
/>
</template>
......@@ -23,13 +23,16 @@ export default {
type: Number,
default: 0,
},
decimal: { // 默认保留2位小数点
type: Number,
default: 2,
},
options: {
type: Object,
default() {
return {
useEasing: true,
useGrouping: true,
decimalPlaces: 2,
separator: ',',
decimal: '.',
prefix: '',
......@@ -46,6 +49,11 @@ export default {
default: 1,
},
},
computed: {
config() {
return Object.assign(this.options, {decimalPlaces: this.decimal})
}
},
methods: {
onReady(instance, countup) {
if (!this.autoUpdate) return
......
src/components/MonitorProgress/monitor-progress.vue
View file @ d0f6a001
......@@ -55,7 +55,7 @@ export default {
containerStyle() {
return {
height: `${(this.size / 10).toFixed(1)}rem`,
width: `${this.percent}%`,
width: `${this.percent >= 100 ? 100 : this.percent}%`,
}
},
bgStyle() {
......
src/main.js
View file @ d0f6a001
......@@ -5,7 +5,7 @@ import Vue from 'vue'
import App from './App'
import router from './router'
import echarts from 'echarts'
import {Button, Divider} from 'view-design'
import {Button, Divider, Progress} from 'view-design'
import ajax from '@/server/ajax'
import api from '@/server/api'
import MonitorCard from '@/components/MonitorCard'
......@@ -26,6 +26,7 @@ Vue.use(MonitorBrief)
Vue.use(MonitorProgress)
Vue.component('Button', Button)
Vue.component('Divider', Divider)
Vue.component('Progress', Progress)
/* eslint-disable no-new */
new Vue({
......
src/router/index.js
View file @ d0f6a001
......@@ -2,7 +2,10 @@ import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/views/main'
import ChinaMap from '@/views/china'
import Guangdong from '@/views/guangdong/guangdong'
import GDProduction from '@/views/guangdong/gd-production'
import GDTrade from '@/views/guangdong/gd-trade'
import GDDisease from '@/views/guangdong/gd-disease'
import GDFish from '@/views/guangdong/gd-fish'
import MapTest from '@/views/map-test'
import Map3D from '@/views/3d-map'
......@@ -21,9 +24,24 @@ export default new Router({
component: ChinaMap
},
{
path: '/guangdong',
name: 'guangdong',
component: Guangdong
path: '/production',
name: 'production',
component: GDProduction
},
{
path: '/trade',
name: 'trade',
component: GDTrade
},
{
path: '/disease',
name: 'disease',
component: GDDisease
},
{
path: '/fish',
name: 'fish',
component: GDFish
},
{
path: '/map2',
......
src/views/3d-map.vue
View file @ d0f6a001
......@@ -100,7 +100,7 @@ export default {
new AMap.Polygon({
bubble:true,
fillColor: 'green',
fillColor: 'blue',
fillOpacity:0.2,
strokeWeight:1,
path:this.buildingOptions.areas[0].path,
......
src/views/guangdong/components/apply-demand-list.vue 0 → 100644
View file @ d0f6a001
<template>
<ul class="list">
<li class="row" v-for="(item, i) in list" :key="item.name + i">
<p>{{item.name}}</p>
<div class="content">
<Progress class='progress' style="width: 60%" :percent="calcPercent(item.value)" :stroke-width="12" :hide-info="true" status="active" :stroke-color="['#0176fe', '#4aecfd']" />
<div>
<b><m-count :value="item.value"/></b>
<span class="unit">{{item.unit}}</span>
</div>
</div>
</li>
</ul>
</template>
<script>
export default {
name: 'ApplyDemandList',
props: {
list: {
type: Array,
default() {
return []
}
}
},
methods: {
calcPercent(val) {
const percent = Math.round((val / 200) * 100)
return percent >= 100 ? 100 : percent
}
}
}
</script>
<style lang="stylus" scoped>
.list
height 90%
overflow auto
padding 0.5rem 1rem
list-style none
.row
color #ccc
padding 0.5rem 0
border-bottom 0.1rem solid rgba(28, 66, 95, 0.4)
>p
font-size 0.8rem
.content
display flex
align-items center
justify-content space-between
b
font-size 1.1rem
color #71C012
.unit
font-size 0.5rem
margin-left 0.2rem
</style>
<style lang="stylus">
.list
.progress
.ivu-progress-inner
background-color transparent
</style>
src/views/guangdong/components/disease-list.vue 0 → 100644
View file @ d0f6a001
<template>
<ul class="list">
<li class="row">
<p>市</p>
<p>次数</p>
<p>面积(k㎡)</p>
<p>损失(万元)</p>
</li>
<li class="row" v-for="(item, i) in list" :key="item.name + i">
<p>{{item.name}}</p>
<p><m-count :value="item.count" :decimal="0"/></p>
<p><m-count :value="item.area"/></p>
<p><b><m-count :value="item.lose"/></b></p>
</li>
</ul>
</template>
<script>
export default {
name: 'DiseaseList',
props: {
list: {
type: Array,
default() {
return []
}
}
}
}
</script>
<style lang="stylus" scoped>
.list
height 100%
overflow auto
padding 0.5rem 1rem
.row
display flex
color #ccc
padding 0.5rem 0
align-items center
justify-content space-between
border-bottom 0.1rem solid rgba(28, 66, 95, 0.4)
&:first-child
color $color-map(1)
p
width 28%
&:nth-child(2)
width 16%
b
color #FFCE34
</style>
src/views/guangdong/components/disease-pie.vue 0 → 100644
View file @ d0f6a001
// 疫病灾害分析专题 - 灾害情报
<template>
<div class="chart" ref="chart"/>
</template>
<script>
import { log } from 'util'
export default {
name: 'DiseaseTrend',
data() {
return {
data: [
{name: '广州市', value: 14, icon: 'circle'},
{name: '韶关市', value: 6, icon: 'circle'},
{name: '深圳市', value: 6, icon: 'circle'},
{name: '珠海市', value: 19, icon: 'circle'},
{name: '汕头市', value: 9, icon: 'circle'},
{name: '佛山市', value: 3, icon: 'circle'},
{name: '江门市', value: 10, icon: 'circle'},
{name: '湛江市', value: 7, icon: 'circle'},
{name: '茂名市', value: 6, icon: 'circle'},
{name: '肇庆市', value: 4, icon: 'circle'},
{name: '惠州市', value: 4, icon: 'circle'},
{name: '梅州市', value: 12, icon: 'circle'},
],
color: ['#5BD5FF','#3391FF','#005ECC','#71C012','#589C20','#F47C1F','#FF9D27','#FFCE34','#FF8080','#CC4D4D','#C15CFF','#8400FF']
}
},
mounted() {
this.init()
},
methods: {
init() {
const chart = this.$echarts.init(this.$refs.chart)
const options = {
legend: {
orient: 'vertical',
y: 'center',
left: '50%',
height: '80%',
textStyle: {
color: '#ccc',
fontSize: this.fontSize,
},
formatter: name => {
const item = this.data.find(el => el.name === name)
return `${name} ${item.value}%`
},
data: this.data,
},
tooltip: {
trigger: 'item',
},
color: this.color,
series: [
{
type: 'pie',
label: {
show: false,
},
center: ['25%', '50%'],
data: this.data,
},
],
}
chart.setOption(options)
}
},
computed: {
fontSize() {
return Math.floor(window.innerWidth / 100) - 1
},
}
}
</script>
<style lang="stylus" scoped>
.chart
height 100%
width 100%
</style>
src/views/guangdong/components/disease-trend.vue 0 → 100644
View file @ d0f6a001
// 疫病灾害分析专题 - 疫情情况趋势
<template>
<div class="chart" ref="chart"/>
</template>
<script>
export default {
name: 'DiseaseTrend',
mounted() {
this.init()
},
methods: {
init() {
const chart = this.$echarts.init(this.$refs.chart)
const options = {
grid: {
top: '50px',
left: '30px',
right: '30px',
bottom: '5px',
width: 'auto',
height: 'auto',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLabel: {
textStyle: {
color: '#ccc',
},
fontSize: this.fontSize,
},
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
}
},
yAxis: {
name: '(次)',
nameTextStyle: {
color: '#fff',
fontSize: this.fontSize,
},
type: 'value',
interval: 2,
min: 0,
max: 10,
splitLine: {
show: true,
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
axisLabel: {
textStyle: {
color: '#ccc',
},
fontSize: this.fontSize,
},
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
},
series: [
{
type: 'line',
areaStyle: {
color: 'rgba(0, 118, 255, 0.5)'
},
itemStyle: {
color: 'rgba(0, 118, 255, 1)'
},
data: [2,5,8,3,1,6,4,5,8,4,3,4],
},
],
}
chart.setOption(options)
}
},
computed: {
fontSize() {
return Math.floor(window.innerWidth / 100) - 1
},
}
}
</script>
<style lang="stylus" scoped>
.chart
height 100%
width 100%
</style>
src/views/guangdong/components/fish-map.vue 0 → 100644
View file @ d0f6a001
<template>
<div id="map" />
</template>
<script>
import guangdong from 'echarts/map/json/province/guangdong.json'
export default {
name: 'FishMap',
data() {
return {
locations: [],
testData: [
{name: 'test', value: [114.280637, 24.925178]},
{name: 'test', value: [113.280637, 23.925178]},
{name: 'test', value: [112.280637, 22.125178]},
{name: 'test', value: [111.180637, 22.125178]},
{name: 'test', value: [112.280637, 24.125178]},
{name: 'test', value: [115.280637, 23.125178]},
{name: 'test', value: [115.980637, 23.125178]},
{name: 'test', value: [114.780637, 24.125178]},
],
testData2: [
{name: 'test', value: [114.980637, 24.625178]},
{name: 'test', value: [113.980637, 23.625178]},
{name: 'test', value: [112.980637, 22.625178]},
{name: 'test', value: [111.980637, 22.625178]},
{name: 'test', value: [112.980637, 24.625178]},
{name: 'test', value: [115.980637, 23.625178]},
{name: 'test', value: [115.180637, 23.625178]},
{name: 'test', value: [114.180637, 24.625178]},
],
}
},
mounted() {
this.$nextTick(this.initMap)
},
methods: {
initMap() {
const mapName = 'guangdong'
// 调整label坐标位置
guangdong.features.forEach(el => {
switch (el.properties.name) {
case '河源市':
el.properties.cp = [114.897802, 23.946266]
break
case '清远市':
el.properties.cp = [113.051227, 24.185022]
break
case '肇庆市':
el.properties.cp = [112.172529, 23.451546]
break
case '云浮市':
el.properties.cp = [111.844439, 22.829801]
break
case '湛江市':
el.properties.cp = [110.164977, 21.274898]
break
case '茂名市':
el.properties.cp = [110.919229, 21.859751]
break
case '阳江市':
el.properties.cp = [111.775107, 21.959222]
break
case '广州市':
el.properties.cp = [113.580637, 23.325178]
break
case '江门市':
el.properties.cp = [112.694942, 22.190431]
break
case '揭阳市':
el.properties.cp = [116.055733, 23.243778]
break
case '潮州市':
el.properties.cp = [116.832301, 23.761701]
break
case '汕尾市':
el.properties.cp = [115.564238, 22.974485]
break
case '东莞市':
el.properties.cp = [113.846262, 22.946237]
break
default:
break
}
this.locations.push({name: el.properties.name, value: el.properties.cp})
})
this.$echarts.registerMap(mapName, guangdong)
const map = this.$echarts.init(document.getElementById('map'))
const config = {
geo: {
map: mapName,
top: 80,
label: {
normal: {
show: false,
color: '#fff',
fontSize: 10,
},
emphasis: {
show: false,
color: '#fff',
}
},
itemStyle: {
normal: {
areaColor: 'rgba(0, 191, 255, 0.1)',
borderColor: 'rgba(0, 191, 255, 0.6)',
borderWidth: 0.4,
},
emphasis: {
areaColor: '#5ad4ff',
color: '#fff'
}
},
},
series: [
{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
data: this.testData,
symbolSize: 10,
label: {
normal: {
show: false,
},
emphasis: {
show: true,
formatter: '{b}',
position: 'right',
rotate: 28,
}
},
itemStyle: {
normal: {
color: '#5BD5FF',
shadowColor: '#5BD5FF',
shadowBlur: 2
}
}
},
{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
data: this.testData2,
symbolSize: 10,
label: {
normal: {
show: false,
},
emphasis: {
show: true,
formatter: '{b}',
position: 'right',
rotate: 28,
}
},
itemStyle: {
normal: {
color: '#71C012',
shadowColor: '#71C012',
shadowBlur: 2
}
}
},
{
name: '市',
type: 'scatter',
coordinateSystem: 'geo',
data: this.locations,
symbolSize: 1,
label: {
normal: {
show: true,
formatter: '{b}',
rotate: 28,
color: '#fff',
fontSize: this.fontSize,
shadowColor: '#fff',
shadowBlur: 2
},
emphasis: {
show: false,
}
},
itemStyle: {
normal: {
color: 'transparent',
}
}
},
],
}
map.setOption(config)
map.on('click', (ev) => {
if (ev.name === (config.geo.regions &&config.geo.regions[0].name)) {
config.geo.regions = null
map.setOption(config)
return
}
config.geo.regions = [{
name: ev.name,
selected: true,
itemStyle: {
areaColor: '#5ad4ff',
color: 'red',
shadowColor: 'rgba(0, 0, 0, 0.8)',
shadowBlur: 10,
shadowOffsetY: 10,
shadowOffsetX: -5,
}
}]
map.setOption(config)
})
},
},
computed: {
fontSize() {
return Math.floor(window.innerWidth / 100) - 1
},
}
}
</script>
<style lang="stylus" scoped>
#map
width 100%
height 100%
position absolute
top -2rem
left -12rem
transform rotate(28deg)
</style>
src/views/guangdong/list.vue → src/views/guangdong/components/list.vue
View file @ d0f6a001
......@@ -27,13 +27,19 @@ export default {
<style lang="stylus" scoped>
.list
height 100%
overflow hidden
overflow auto
padding 0.5rem 1rem
.row
display flex
color $color-map(1)
color #ccc
padding 0.5rem 0
align-items center
justify-content space-between
border-bottom 0.1rem solid rgba(28, 66, 95, 0.4)
p
>b
font-size 1.1rem
color $color-map(1)
>span
font-size 0.5rem
</style>
src/views/guangdong/guangdong.vue → src/views/guangdong/components/map.vue
View file @ d0f6a001
<template>
<div id="container" :style="`background-image: url(${require('@/assets/images/stars.png')})`">
<div id="map" />
<div class="area">
<p>当前广东省养殖面积</p>
<b><m-flip :value="888888888"/></b>
<span>k㎡</span>
</div>
<div class="box1">
<m-card mode="2" title="各品种企业排行榜">
<DataList :list="list1"/>
</m-card>
</div>
<div class="box2">
<m-card mode="2" title="各市养殖面积"></m-card>
</div>
<div class="box3">
<m-card mode="2" title="各品种养殖/出塘数据"></m-card>
</div>
</div>
</template>
<script>
import guangdong from 'echarts/map/json/province/guangdong.json'
import DataList from './list'
export default {
name: 'Guangdong',
components: {
DataList,
},
name: 'GuangdongMap',
data() {
return {
locations: [],
testData: [
{name: 'test', value: [114.280637, 24.125178]},
{name: 'test', value: [113.280637, 23.125178]},
......@@ -40,20 +19,6 @@ export default {
{name: 'test', value: [115.980637, 23.125178]},
{name: 'test', value: [114.780637, 24.125178]},
],
list1: [
{name: '淡水鱼苗', value: 8279, unit: '亿尾'},
{name: '淡水鱼种', value: 222544, unit: '吨'},
{name: '投放鱼种', value: 193027, unit: '吨'},
{name: '稚鳖', value: 6549, unit: '万只'},
{name: '稚龟', value: 655, unit: '万只'},
{name: '鳗苗捕捞', value: 43, unit: '千克'},
{name: '海水鱼苗', value: 508510, unit: '万尾'},
{name: '虾类育苗', value: 5455, unit: '万尾'},
{name: '贝类育苗', value: 293678, unit: '万尾'},
{name: '海带', value: 100, unit: '亿株'},
{name: '紫菜', value: 0.06, unit: '亿株'},
{name: '海参', value: 0.09, unit: '亿头'},
],
}
},
mounted() {
......@@ -107,21 +72,22 @@ export default {
default:
break
}
this.locations.push({name: el.properties.name, value: el.properties.cp})
})
this.$echarts.registerMap(mapName, guangdong)
const map = this.$echarts.init(document.getElementById('map'))
const config = {
geo: {
map: mapName,
top: 120,
top: 80,
label: {
normal: {
show: true,
show: false,
color: '#fff',
fontSize: 10,
},
emphasis: {
show: true,
show: false,
color: '#fff',
}
},
......@@ -146,12 +112,13 @@ export default {
symbolSize: 10,
label: {
normal: {
show: false
show: false,
},
emphasis: {
show: true,
formatter: '{b}',
position: 'right',
rotate: 28,
}
},
itemStyle: {
......@@ -162,57 +129,49 @@ export default {
}
}
},
{
name: '市',
type: 'scatter',
coordinateSystem: 'geo',
data: this.locations,
symbolSize: 1,
label: {
normal: {
show: true,
formatter: '{b}',
rotate: 28,
color: '#fff',
fontSize: this.fontSize,
shadowColor: '#fff',
shadowBlur: 2
},
emphasis: {
show: false,
}
},
itemStyle: {
normal: {
color: 'transparent',
}
}
},
],
}
map.setOption(config)
},
},
computed: {
fontSize() {
return Math.floor(window.innerWidth / 100) - 1
},
}
}
</script>
<style lang="stylus" scoped>
#container
#map
width 100%
height 100%
background-size cover
background-position center
background-color #061627
position relative
display grid
grid-template-areas \
'box1 . box2'\
'box1 . box2'\
'box3 box3 box2'
grid-template-rows 1fr 1fr 1fr
grid-template-columns 1fr 3fr 1fr
grid-gap 0.7rem
padding 0.7rem
.box1
grid-area box1
.box2
grid-area box2
.box3
grid-area box3
#map
width 100%
height 100%
position absolute
top 0
left 0
// transform rotate(25deg)
.area
font-size 1.8rem
color $color-map(1)
position absolute
top 10%
left 0
right 0
text-align center
p
color #fff
font-family $font-pang
b
font-size 3rem
>span
font-size 1.5rem
transform rotate(28deg)
</style>
src/views/guangdong/components/marketing-chart.vue 0 → 100644
View file @ d0f6a001
// 罗非鱼专题 - 市场供需数据
<template>
<div class="chart" ref="chart"/>
</template>
<script>
export default {
name: 'MarketingChart',
mounted() {
this.init()
},
methods: {
init() {
const chart = this.$echarts.init(this.$refs.chart)
const options = {
grid: {
top: '50px',
left: '30px',
right: '30px',
bottom: '5px',
width: 'auto',
height: 'auto',
containLabel: true,
},
legend: {
top: 20,
right: 10,
data: ['市场供应量', '市场采购量', '市场供需差走势'],
textStyle: {
color: '#ccc',
fontSize: this.fontSize,
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLabel: {
textStyle: {
color: '#ccc',
},
fontSize: this.fontSize,
},
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
}
},
yAxis: {
name: '(吨)',
nameTextStyle: {
color: '#fff',
fontSize: this.fontSize,
},
type: 'value',
interval: 2000,
splitLine: {
show: true,
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
axisLabel: {
textStyle: {
color: '#ccc',
},
fontSize: this.fontSize,
},
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
},
series: [
{
name: '市场供应量',
type: 'bar',
barWidth: '30%',
barGap: 0,
itemStyle: {
shadowColor: '#0076FF',
shadowBlur: 6,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#1FECFF'},
{offset: 1, color: '#0076FF'}
])
},
data: [6500, 8500, 6000, 4600, 5600, 8500, 6000, 2500, 4500, 6500, 4500, 8000],
},
{
name: '市场采购量',
type: 'bar',
barWidth: '30%',
barGap: 0,
itemStyle: {
shadowColor: '#c16ad6',
shadowBlur: 6,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#c16ad6'},
{offset: 1, color: '#3725b2'}
])
},
data: [5500, 9000, 5000, 3600, 4600, 7500, 7000, 3500, 5500, 7500, 5500, 6700],
},
{
name: '市场供需差走势',
type: 'line',
itemStyle: {
color: '#F47C1F',
},
data: [5500, 9000, 5000, 3600, 4600, 7500, 7000, 3500, 5500, 7500, 5500, 6700],
},
],
}
chart.setOption(options)
}
},
computed: {
fontSize() {
return Math.floor(window.innerWidth / 100) - 1
},
}
}
</script>
<style lang="stylus" scoped>
.chart
height 100%
width 100%
</style>
src/views/guangdong/components/price-chart.vue 0 → 100644
View file @ d0f6a001
// 罗非鱼专题 - 市场平均价格
<template>
<div class="chart" ref="chart"/>
</template>
<script>
export default {
name: 'PriceChart',
mounted() {
this.init()
},
methods: {
init() {
const chart = this.$echarts.init(this.$refs.chart)
const options = {
grid: {
top: '50px',
left: '30px',
right: '30px',
bottom: '5px',
width: 'auto',
height: 'auto',
containLabel: true,
},
legend: {
top: 20,
right: 10,
data: ['成鱼市场均价', '鱼苗市场均价'],
textStyle: {
color: '#ccc',
fontSize: this.fontSize,
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLabel: {
textStyle: {
color: '#ccc',
},
fontSize: this.fontSize,
},
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
}
},
yAxis: {
name: '(元/公斤)',
nameTextStyle: {
color: '#fff',
fontSize: this.fontSize,
},
type: 'value',
interval: 60,
min: 0,
max: 300,
splitLine: {
show: true,
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
axisLabel: {
textStyle: {
color: '#ccc',
},
fontSize: this.fontSize,
},
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
},
series: [
{
name: '成鱼市场均价',
type: 'line',
itemStyle: {
color: '#0076FF'
},
areaStyle: {},
data: [265, 285, 160, 246, 256, 185, 160, 225, 245, 165, 245, 180],
},
{
name: '鱼苗市场均价',
type: 'line',
itemStyle: {
color: '#F47C1F',
},
areaStyle: {},
data: [155, 190, 250, 136, 146, 275, 270, 135, 155, 275, 155, 267],
},
],
}
chart.setOption(options)
}
},
computed: {
fontSize() {
return Math.floor(window.innerWidth / 100) - 1
},
}
}
</script>
<style lang="stylus" scoped>
.chart
height 100%
width 100%
</style>
src/views/guangdong/components/production-chart.vue 0 → 100644
View file @ d0f6a001
// 生产专题 - 各品种养殖/出塘数据
<template>
<div class="chart" ref="chart"/>
</template>
<script>
export default {
name: 'ProductionChart',
mounted() {
this.init()
},
methods: {
init() {
const chart = this.$echarts.init(this.$refs.chart)
const options = {
grid: {
top: '50px',
left: '80px',
right: '80px',
bottom: '5px',
width: 'auto',
height: 'auto',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['淡水育苗', '淡水鱼种', '投放鱼种', '稚鳖', '稚龟', '鳗苗捕捞', '海水鱼苗', '虾类育苗', '贝类育苗', '海带', '紫菜', '海参'],
axisLabel: {
textStyle: {
color: '#ccc',
},
fontSize: this.fontSize,
},
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
}
},
yAxis: {
name: '(吨)',
nameTextStyle: {
color: '#fff',
fontSize: this.fontSize,
},
type: 'value',
interval: 2000,
splitLine: {
show: true,
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
axisLabel: {
textStyle: {
color: '#ccc',
},
fontSize: this.fontSize,
},
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
},
series: [
{
type: 'bar',
barWidth: '50%',
barGap: 0,
itemStyle: {
shadowColor: '#0076FF',
shadowBlur: 6,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#1FECFF'},
{offset: 1, color: '#B645FF'}
])
},
data: [6500, 8500, 6000, 4600, 5600, 8500, 6000, 2500, 4500, 6500, 4500, 8000],
},
],
}
chart.setOption(options)
}
},
computed: {
fontSize() {
return Math.floor(window.innerWidth / 100) - 1
},
}
}
</script>
<style lang="stylus" scoped>
.chart
height 100%
width 100%
</style>
src/views/guangdong/components/progress-list.vue 0 → 100644
View file @ d0f6a001
<template>
<ul class="list">
<li class="row" v-for="(item, i) in list" :key="item.name + i">
<span class="name">{{item.name}}</span>
<Progress class='progress' style="width: 40%" :percent="calcPercent(item.value)" :stroke-width="12" :hide-info="true" status="active" :stroke-color="['#0176fe', '#4aecfd']" />
<div>
<b><m-count :value="item.value"/></b>
<span class="unit">{{item.unit}}</span>
</div>
</li>
</ul>
</template>
<script>
export default {
name: 'ProgressList',
props: {
list: {
type: Array,
default() {
return []
}
}
},
methods: {
calcPercent(val) {
const percent = Math.round((val / 50) * 100)
return percent >= 100 ? 100 : percent
}
}
}
</script>
<style lang="stylus" scoped>
.list
height 100%
overflow auto
padding 0.5rem 1rem
.row
display flex
color #ccc
padding 0.5rem 0
align-items center
justify-content space-between
border-bottom 0.1rem solid rgba(28, 66, 95, 0.4)
.name
width 21%
b
font-size 1.1rem
color #71C012
.unit
font-size 0.5rem
margin-left 0.2rem
</style>
<style lang="stylus">
.list
.progress
.ivu-progress-inner
background-color transparent
</style>
src/views/guangdong/components/purchase-chart.vue 0 → 100644
View file @ d0f6a001
// 交易分析专题 - 累计违规举报次数
<template>
<div class="chart" ref="chart"/>
</template>
<script>
export default {
name: 'PurchaseChart',
mounted() {
this.init()
},
methods: {
init() {
const chart = this.$echarts.init(this.$refs.chart)
const options = {
grid: {
top: '50px',
left: '30px',
right: '30px',
bottom: '5px',
width: 'auto',
height: 'auto',
containLabel: true,
},
legend: {
top: 20,
right: 10,
data: ['供应数据', '采购数据'],
textStyle: {
color: '#ccc',
fontSize: this.fontSize,
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLabel: {
textStyle: {
color: '#ccc',
},
fontSize: this.fontSize,
},
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
}
},
yAxis: {
name: '(吨)',
nameTextStyle: {
color: '#fff',
fontSize: this.fontSize,
},
type: 'value',
interval: 2000,
splitLine: {
show: true,
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
axisLabel: {
textStyle: {
color: '#ccc',
},
fontSize: this.fontSize,
},
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
},
series: [
{
name: '供应数据',
type: 'bar',
barWidth: '30%',
barGap: 0,
itemStyle: {
shadowColor: '#0076FF',
shadowBlur: 6,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#1FECFF'},
{offset: 1, color: '#0076FF'}
])
},
data: [6500, 8500, 6000, 4600, 5600, 8500, 6000, 2500, 4500, 6500, 4500, 8000],
},
{
name: '采购数据',
type: 'bar',
barWidth: '30%',
barGap: 0,
itemStyle: {
shadowColor: '#c16ad6',
shadowBlur: 6,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#c16ad6'},
{offset: 1, color: '#3725b2'}
])
},
data: [5500, 9000, 5000, 3600, 4600, 7500, 7000, 3500, 5500, 7500, 5500, 6700],
},
],
}
chart.setOption(options)
}
},
computed: {
fontSize() {
return Math.floor(window.innerWidth / 100) - 1
},
}
}
</script>
<style lang="stylus" scoped>
.chart
height 100%
width 100%
</style>
src/views/guangdong/components/report-chart.vue 0 → 100644
View file @ d0f6a001
// 交易分析专题 - 累计违规举报次数
<template>
<div class="chart" ref="chart"/>
</template>
<script>
export default {
name: 'ReportChart',
mounted() {
this.init()
},
methods: {
init() {
const chart = this.$echarts.init(this.$refs.chart)
const options = {
grid: {
top: '50px',
left: '30px',
right: '30px',
bottom: '5px',
width: 'auto',
height: 'auto',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLabel: {
textStyle: {
color: '#ccc',
},
fontSize: this.fontSize,
},
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
}
},
yAxis: {
name: '(次)',
nameTextStyle: {
color: '#fff',
fontSize: this.fontSize,
},
type: 'value',
interval: 20,
splitLine: {
show: true,
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
axisLabel: {
textStyle: {
color: '#ccc',
},
fontSize: this.fontSize,
},
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
},
series: [
{
type: 'bar',
barWidth: '50%',
barGap: 0,
itemStyle: {
shadowColor: '#0076FF',
shadowBlur: 6,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#1FECFF'},
{offset: 1, color: '#0076FF'}
])
},
data: [30, 50, 10, 60, 70, 40, 50, 70, 30, 50, 90, 58],
},
],
}
chart.setOption(options)
}
},
computed: {
fontSize() {
return Math.floor(window.innerWidth / 100) - 1
},
}
}
</script>
<style lang="stylus" scoped>
.chart
height 100%
width 100%
</style>
src/views/guangdong/components/title.vue 0 → 100644
View file @ d0f6a001
<template>
<div id="title" ref="title">
<img :src="bgImg"/>
<p><slot /></p>
</div>
</template>
<script>
const titleBg1 = require('@/assets/images/title-bg.png')
const titleBg2 = require('@/assets/images/title-bg2.png')
export default {
name: 'ThemeTitle',
data() {
return {
bgImg: titleBg1,
}
},
mounted() {
const width = this.$refs.title && this.$refs.title.style.width
if (width && Number(width.split('%')[0]) >= 90) {
this.bgImg = titleBg2
}
},
}
</script>
<style lang="stylus" scoped>
#title
display flex
align-items center
justify-content center
position relative
min-width 60%
margin 0 auto
height 4.2rem
>img
position absolute
width 100%
height 100%
top 0
left 0
>p
font-family $font-pang
font-size 2.5rem
-webkit-background-clip text
-webkit-text-fill-color transparent
background-image linear-gradient(to right, #1efbff, #0094ff)
</style>
src/views/guangdong/gd-disease.vue 0 → 100644
View file @ d0f6a001
<template>
<div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`">
<GuangdongMap />
<ThemeTitle style="width: 300%;">全省疫病灾害数据分析专题</ThemeTitle>
<div class="sum">
<p>全省水产疫病爆发<b><m-count :value="2" :decimal="0"/></b>次</p>
<p>面积<b><m-count :value="11.24"/></b>k㎡</p>
<p>损失<b><m-count :value="67.15"/></b>万元</p>
</div>
<div class="box1">
<m-card mode="2" title="各品种受灾严重程度">
<DataList :list="list1"/>
</m-card>
</div>
<div class="box2">
<m-card mode="2" title="各市疫病情况">
<DiseaseList :list="list2"/>
</m-card>
</div>
<div class="box3">
<m-card mode="2" title="疫情情况趋势">
<DiseaseTrend />
</m-card>
</div>
<div class="box4">
<m-card mode="2" title="疫病立春灾害情报">
<DiseasePie />
</m-card>
</div>
</div>
</template>
<script>
import DataList from './components/list'
import DiseaseList from './components/disease-list'
import ThemeTitle from './components/title'
import DiseaseTrend from './components/disease-trend.vue'
import DiseasePie from './components/disease-pie.vue'
import GuangdongMap from './components/map'
export default {
name: 'GDDisease',
components: {
DataList,
DiseaseList,
ThemeTitle,
DiseaseTrend,
DiseasePie,
GuangdongMap,
},
data() {
return {
list1: [
{name: '淡水鱼苗', value: 8279, unit: '亿尾'},
{name: '淡水鱼种', value: 222544, unit: '吨'},
{name: '投放鱼种', value: 193027, unit: '吨'},
{name: '稚鳖', value: 6549, unit: '万只'},
{name: '稚龟', value: 655, unit: '万只'},
{name: '鳗苗捕捞', value: 43, unit: '千克'},
{name: '海水鱼苗', value: 508510, unit: '万尾'},
{name: '虾类育苗', value: 5455, unit: '万尾'},
{name: '贝类育苗', value: 293678, unit: '万尾'},
{name: '海带', value: 100, unit: '亿株'},
{name: '紫菜', value: 0.06, unit: '亿株'},
{name: '海参', value: 0.09, unit: '亿头'},
],
list2: [
{name: '广州市', area: 74.40, count: 7, lose: 74},
{name: '韶关市', area: 118.06, count: 1, lose: 11},
{name: '深圳市', area: 16.85, count: 1, lose: 16},
{name: '珠海市', area: 11.24, count: 1, lose: 11},
{name: '汕头市', area: 28.70, count: 2, lose: 28},
{name: '佛山市', area: 35, count: 3, lose: 35},
{name: '江门市', area: 95, count: 9, lose: 95},
{name: '湛江市', area: 125.44, count: 1, lose: 12},
{name: '茂名市', area: 158, count: 1, lose: 15},
{name: '肇庆市', area: 74.40, count: 7, lose: 74},
{name: '惠州市', area: 199, count: 1, lose: 19},
{name: '梅州市', area: 164.5, count: 1, lose: 16},
{name: '汕尾市', area: 51, count: 5, lose: 51},
{name: '河源市', area: 142, count: 1, lose: 14},
{name: '阳江市', area: 75.9, count: 7, lose: 75},
{name: '清远市', area: 100, count: 1, lose: 10},
{name: '东莞市', area: 20.10, count: 2, lose: 20},
{name: '中山市', area: 13.67, count: 1, lose: 13},
{name: '潮州市', area: 39, count: 3, lose: 39},
{name: '揭阳市', area: 50.5, count: 5, lose: 50},
{name: '云浮市', area: 75.11, count: 7, lose: 75},
]
}
},
}
</script>
<style lang="stylus" scoped>
#container
width 100%
height 100%
background-size cover
background-position center
background-color #061627
position relative
display grid
grid-template-areas \
'box1 . . . box2'\
'box1 . . . box2'\
'box3 box3 box4 box4 box2'
grid-template-rows 1fr 1fr 1fr
grid-template-columns 1.2fr 1fr 1fr 1fr 1.2fr
grid-gap 0.7rem
padding 0.7rem
.sum
display flex
justify-content space-around
width 40%
margin 0 auto
font-family $font-pang
font-size 1.4rem
color #fff
position absolute
top 10%
left 0
right 0
text-align center
b
font-family $font-din
color $color-map(1)
font-size 1.8rem
margin 0 0.5rem
.box1
grid-area box1
.box2
grid-area box2
.box3
grid-area box3
.box4
grid-area box4
</style>
src/views/guangdong/gd-fish.vue 0 → 100644
View file @ d0f6a001
<template>
<div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`">
<FishMap />
<ThemeTitle style="width: 120%;">广东省罗非鱼专题</ThemeTitle>
<div class="flag">
<p><span/>供应量</p>
<p><span/>采购量</p>
</div>
<div class="box1">
<m-card mode="2" title="排名">
<div class="apply-demand">
<div>
<p>市场供应量排行</p>
<ApplyDemandList :list="list1"/>
</div>
<div>
<p>市场需求量排行</p>
<ApplyDemandList :list="list1"/>
</div>
</div>
</m-card>
</div>
<div class="box2">
<m-card mode="2" title="市场供需数据">
<MarketingChart />
</m-card>
</div>
<div class="box3">
<m-card mode="2" title="市场平均价格">
<PriceChart />
</m-card>
</div>
</div>
</template>
<script>
import ApplyDemandList from './components/apply-demand-list'
import ThemeTitle from './components/title'
import MarketingChart from './components/marketing-chart.vue'
import PriceChart from './components/price-chart.vue'
import FishMap from './components/fish-map'
export default {
name: 'GDFish',
components: {
ApplyDemandList,
ThemeTitle,
MarketingChart,
PriceChart,
FishMap,
},
data() {
return {
list1: [
{name: '绿色泉水养殖专业合作社', value: 200, unit: '吨'},
{name: '明基水产品有限公司', value: 192, unit: '吨'},
{name: '茂南三高良种繁殖基地', value: 159, unit: '吨'},
{name: '强匠冷冻食品经营部', value: 121, unit: '吨'},
{name: '新吉奥罗非鱼苗繁育场', value: 115, unit: '吨'},
{name: '阳西益豪水产食品加工厂', value: 101, unit: '吨'},
{name: '中恒食品添加剂有限公司', value: 69, unit: '吨'},
{name: '北京自伍鑫发水产商贸有限公司', value: 59, unit: '吨'},
]
}
},
}
</script>
<style lang="stylus" scoped>
#container
width 100%
height 100%
background-size cover
background-position center
background-color #061627
position relative
display grid
grid-template-areas \
'. . . box1'\
'. . . box1'\
'box2 box2 box3 box3'
grid-template-rows 1fr 1fr 1fr
grid-template-columns 2fr 1fr 1fr 2fr
grid-gap 0.7rem
padding 0.7rem
.flag
display flex
position absolute
top 15%
left 5%
font-family $font-pang
font-size 1.2rem
p
display flex
align-items center
&:first-child
color #5BD5FF
span
background #5BD5FF
&:last-child
color #71C012
margin-left 3rem
span
background #71C012
span
display inline-block
width 0.8rem
height 0.8rem
border-radius 50%
margin-right 0.5rem
.box1
grid-area box1
.box2
grid-area box2
.box3
grid-area box3
.apply-demand
display flex
height 100%
>div
width 50%
height 100%
overflow hidden
>p
font-family $font-pang
font-size 1.4rem
color $color-map(1)
padding 0.5rem 1rem 0
</style>
src/views/guangdong/gd-production.vue 0 → 100644
View file @ d0f6a001
<template>
<div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`">
<GuangdongMap />
<ThemeTitle>广东省生产专题</ThemeTitle>
<div class="area">
<p>当前广东省养殖面积</p>
<b><m-flip :value="888888888"/></b>
<span>k㎡</span>
</div>
<div class="box1">
<m-card mode="2" title="各品种企业排行榜">
<DataList :list="list1"/>
</m-card>
</div>
<div class="box2">
<m-card mode="2" title="各市养殖面积">
<DataList :list="list2"/>
</m-card>
</div>
<div class="box3">
<m-card mode="2" title="各品种养殖/出塘数据">
<ProductionChart />
</m-card>
</div>
</div>
</template>
<script>
import DataList from './components/list'
import ThemeTitle from './components/title'
import ProductionChart from './components/production-chart.vue'
import GuangdongMap from './components/map'
export default {
name: 'GDProduction',
components: {
DataList,
ThemeTitle,
ProductionChart,
GuangdongMap,
},
data() {
return {
list1: [
{name: '淡水鱼苗', value: 8279, unit: '亿尾'},
{name: '淡水鱼种', value: 222544, unit: '吨'},
{name: '投放鱼种', value: 193027, unit: '吨'},
{name: '稚鳖', value: 6549, unit: '万只'},
{name: '稚龟', value: 655, unit: '万只'},
{name: '鳗苗捕捞', value: 43, unit: '千克'},
{name: '海水鱼苗', value: 508510, unit: '万尾'},
{name: '虾类育苗', value: 5455, unit: '万尾'},
{name: '贝类育苗', value: 293678, unit: '万尾'},
{name: '海带', value: 100, unit: '亿株'},
{name: '紫菜', value: 0.06, unit: '亿株'},
{name: '海参', value: 0.09, unit: '亿头'},
],
list2: [
{name: '广州市', value: 7434.40, unit: 'k㎡'},
{name: '韶关市', value: 18218.06, unit: 'k㎡'},
{name: '深圳市', value: 1996.85, unit: 'k㎡'},
{name: '珠海市', value: 1711.24, unit: 'k㎡'},
{name: '汕头市', value: 2198.70, unit: 'k㎡'},
{name: '佛山市', value: 3875, unit: 'k㎡'},
{name: '江门市', value: 9505, unit: 'k㎡'},
{name: '湛江市', value: 13225.44, unit: 'k㎡'},
{name: '茂名市', value: 11458, unit: 'k㎡'},
{name: '肇庆市', value: 7434.40, unit: 'k㎡'},
{name: '惠州市', value: 11599, unit: 'k㎡'},
{name: '梅州市', value: 15864.5, unit: 'k㎡'},
{name: '汕尾市', value: 5271, unit: 'k㎡'},
{name: '河源市', value: 15642, unit: 'k㎡'},
{name: '阳江市', value: 7955.9, unit: 'k㎡'},
{name: '清远市', value: 19000, unit: 'k㎡'},
{name: '东莞市', value: 2460.10, unit: 'k㎡'},
{name: '中山市', value: 1783.67, unit: 'k㎡'},
{name: '潮州市', value: 3679, unit: 'k㎡'},
{name: '揭阳市', value: 5240.5, unit: 'k㎡'},
{name: '云浮市', value: 7785.11, unit: 'k㎡'},
]
}
},
}
</script>
<style lang="stylus" scoped>
#container
width 100%
height 100%
background-size cover
background-position center
background-color #061627
position relative
display grid
grid-template-areas \
'box1 . box2'\
'box1 . box2'\
'box3 box3 box2'
grid-template-rows 1fr 1fr 1fr
grid-template-columns 1fr 3fr 1fr
grid-gap 0.7rem
padding 0.7rem
.box1
grid-area box1
.box2
grid-area box2
.box3
grid-area box3
.area
font-size 1.8rem
color $color-map(1)
position absolute
top 10%
left 0
right 0
text-align center
p
color #fff
font-family $font-pang
b
font-size 3rem
>span
font-size 1.5rem
</style>
src/views/guangdong/gd-trade.vue 0 → 100644
View file @ d0f6a001
<template>
<div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`">
<GuangdongMap />
<ThemeTitle style="width: 200%;">渔业种业综合交易平台交易分析专题</ThemeTitle>
<div class="box1">
<m-card mode="2" title="排名">
<DataList :list="list1"/>
</m-card>
</div>
<div class="box2">
<m-card mode="2" title="各品种成交均价">
<ProgressList :list="list2"/>
</m-card>
</div>
<div class="box3">
<m-card mode="2" title="采购供应数据">
<PurchaseChart />
</m-card>
</div>
<div class="box4">
<m-card mode="2" title="累计违规举报次数">
<ReportChart />
</m-card>
</div>
</div>
</template>
<script>
import DataList from './components/list'
import ProgressList from './components/progress-list'
import ThemeTitle from './components/title'
import ReportChart from './components/report-chart.vue'
import PurchaseChart from './components/purchase-chart.vue'
import GuangdongMap from './components/map'
export default {
name: 'GDProduction',
components: {
DataList,
ProgressList,
ThemeTitle,
PurchaseChart,
ReportChart,
GuangdongMap,
},
data() {
return {
list1: [
{name: '淡水鱼苗', value: 8279, unit: '亿尾'},
{name: '淡水鱼种', value: 222544, unit: '吨'},
{name: '投放鱼种', value: 193027, unit: '吨'},
{name: '稚鳖', value: 6549, unit: '万只'},
{name: '稚龟', value: 655, unit: '万只'},
{name: '鳗苗捕捞', value: 43, unit: '千克'},
{name: '海水鱼苗', value: 508510, unit: '万尾'},
{name: '虾类育苗', value: 5455, unit: '万尾'},
{name: '贝类育苗', value: 293678, unit: '万尾'},
{name: '海带', value: 100, unit: '亿株'},
{name: '紫菜', value: 0.06, unit: '亿株'},
{name: '海参', value: 0.09, unit: '亿头'},
],
list2: [
{name: '淡水鱼苗', value: 15, unit: '元/斤'},
{name: '淡水鱼种', value: 12, unit: '元/斤'},
{name: '投放鱼种', value: 29, unit: '元/斤'},
{name: '稚鳖', value: 21, unit: '元/斤'},
{name: '稚龟', value: 15, unit: '元/斤'},
{name: '鳗苗捕捞', value: 11, unit: '元/斤'},
{name: '海水鱼苗', value: 19, unit: '元/斤'},
{name: '虾类育苗', value: 9, unit: '元/斤'},
{name: '贝类育苗', value: 21, unit: '元/斤'},
{name: '海带', value: 28, unit: '元/斤'},
{name: '紫菜', value: 4, unit: '元/斤'},
{name: '海参', value: 200, unit: '元/斤'},
]
}
},
}
</script>
<style lang="stylus" scoped>
#container
width 100%
height 100%
background-size cover
background-position center
background-color #061627
position relative
display grid
grid-template-areas \
'box1 . . box2'\
'box1 . . box2'\
'box3 box3 box4 box4'
grid-template-rows 1fr 1fr 1fr
grid-template-columns 1fr 1.2fr 1.2fr 1fr
grid-gap 0.7rem
padding 0.7rem
.box1
grid-area box1
.box2
grid-area box2
.box3
grid-area box3
.box4
grid-area box4
</style>
src/views/map-test.vue
View file @ d0f6a001
<template>
<div id="map" :style="`background-image: url(${require('@/assets/images/stars.png')})`"/>
<div id="map" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`"/>
</template>
<script>
......
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