Commit f7753991 authored by 郭铭瑶's avatar 郭铭瑶 🤘

改版

parent da697a87
...@@ -2416,6 +2416,11 @@ ...@@ -2416,6 +2416,11 @@
} }
} }
}, },
"comutils": {
"version": "1.1.19",
"resolved": "https://registry.npm.taobao.org/comutils/download/comutils-1.1.19.tgz",
"integrity": "sha1-PgfzBqv0joNyZRFxOnKyBWUDREM="
},
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz", "resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz",
...@@ -4585,7 +4590,7 @@ ...@@ -4585,7 +4590,7 @@
}, },
"esprima": { "esprima": {
"version": "2.7.3", "version": "2.7.3",
"resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz", "resolved": "https://registry.npm.taobao.org/esprima/download/esprima-2.7.3.tgz",
"integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=", "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=",
"dev": true "dev": true
}, },
...@@ -6937,7 +6942,7 @@ ...@@ -6937,7 +6942,7 @@
}, },
"js-yaml": { "js-yaml": {
"version": "3.7.0", "version": "3.7.0",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz", "resolved": "https://registry.npm.taobao.org/js-yaml/download/js-yaml-3.7.0.tgz",
"integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=", "integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=",
"dev": true, "dev": true,
"requires": { "requires": {
...@@ -13338,6 +13343,14 @@ ...@@ -13338,6 +13343,14 @@
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.3.tgz", "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.3.tgz",
"integrity": "sha1-5rFPq8DA7p/aDiy72nSzUOKOQSs=" "integrity": "sha1-5rFPq8DA7p/aDiy72nSzUOKOQSs="
}, },
"vue-seamless-scroll": {
"version": "1.1.17",
"resolved": "https://registry.npm.taobao.org/vue-seamless-scroll/download/vue-seamless-scroll-1.1.17.tgz",
"integrity": "sha1-CORbFV9GdzAwnqSpiT4F59aCqxc=",
"requires": {
"comutils": "^1.1.9"
}
},
"vue-style-loader": { "vue-style-loader": {
"version": "3.1.2", "version": "3.1.2",
"resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-3.1.2.tgz", "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-3.1.2.tgz",
......
...@@ -25,7 +25,8 @@ ...@@ -25,7 +25,8 @@
"vue": "^2.5.2", "vue": "^2.5.2",
"vue-countup-v2": "^4.0.0", "vue-countup-v2": "^4.0.0",
"vue-odometer": "^1.0.2", "vue-odometer": "^1.0.2",
"vue-router": "^3.0.1" "vue-router": "^3.0.1",
"vue-seamless-scroll": "^1.1.17"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^7.1.2", "autoprefixer": "^7.1.2",
......
<template> <template>
<div id="app"> <div id="app">
<router-view :key="$route.name"/> <transition name="custom-classes-transition" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
<router-view :key="$route.fullPath"/>
</transition>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'App', name: 'App',
data() {
return {
routes: ['industry', 'production', 'trade', 'fish', 'disease', 'enterprise'],
cur: 0,
timer: null,
timeOuter: null,
seconds: 1000 * 10
}
},
mounted() {
this.$router.push({
name: this.routes[this.cur]
})
this.setTimer()
document.body.addEventListener('mousemove', this.removeTimer)
},
beforeDestroy() {
clearInterval(this.timer)
},
methods: {
setTimer() {
this.timer = setInterval(() => {
this.cur += 1
if (this.cur >= this.routes.length) {
this.cur = 0
}
this.$router.push({
name: this.routes[this.cur]
})
}, this.seconds)
},
removeTimer() {
clearTimeout(this.timeOuter)
clearInterval(this.timer)
this.timeOuter = setTimeout(this.setTimer, this.seconds / 10)
},
},
} }
</script> </script>
......
...@@ -122,7 +122,7 @@ $size() ...@@ -122,7 +122,7 @@ $size()
$size() $size()
.card-title .card-title
color #fff color #fff
font-size 1.8rem font-size 1.4rem
font-family $font-pang font-family $font-pang
.card-content .card-content
background $color-map(0.1) background $color-map(0.1)
......
...@@ -10,7 +10,7 @@ const GDTrade = () => import('@/views/guangdong/gd-trade') // 广东 - 交易专 ...@@ -10,7 +10,7 @@ const GDTrade = () => import('@/views/guangdong/gd-trade') // 广东 - 交易专
const GDDisease = () => import('@/views/guangdong/gd-disease') // 广东 - 疫病专题 const GDDisease = () => import('@/views/guangdong/gd-disease') // 广东 - 疫病专题
const GDFish = () => import('@/views/guangdong/gd-fish') // 广发 - 罗非鱼专题 const GDFish = () => import('@/views/guangdong/gd-fish') // 广发 - 罗非鱼专题
const GDIndustry = () => import('@/views/guangdong/gd-industry') // 广东 - 产业分析专题 const GDIndustry = () => import('@/views/guangdong/gd-industry') // 广东 - 产业分析专题
const Map3D = () => import('@/views/3d-map') // 浦东 - 街镇电梯地图 // const Map3D = () => import('@/views/3d-map') // 浦东 - 街镇电梯地图
Vue.use(Router) Vue.use(Router)
...@@ -50,11 +50,11 @@ export default new Router({ ...@@ -50,11 +50,11 @@ export default new Router({
name: 'enterprise', name: 'enterprise',
component: GDEnterprise component: GDEnterprise
}, },
{ // {
path: '/map3d', // path: '/map3d',
name: 'map3d', // name: 'map3d',
component: Map3D // component: Map3D
}, // },
// { // {
// path: '/main', // path: '/main',
// name: 'main', // name: 'main',
......
<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 $color-green
.unit
font-size 0.5rem
margin-left 0.2rem
</style>
<style lang="stylus">
.list
.progress
.ivu-progress-inner
background-color transparent
</style>
...@@ -45,8 +45,10 @@ export default { ...@@ -45,8 +45,10 @@ export default {
color $color-map(1) color $color-map(1)
p p
width 28% width 28%
&:nth-child(2) text-align right
&:first-child
width 16% width 16%
text-align center
b b
color #FFCE34 color #FFCE34
</style> </style>
<template>
<div class="enterprise-card">
<template v-if="mode == 'simple'">
<div class="enterprise-card-simple">
<div class="base simple-base">
<p class="title">联系方式</p>
<p class="detail">{{enterprise.address}}</p>
<p class="detail">{{enterprise.contact}}</p>
</div>
<div class="logo simple-logo">
<img width="60%" :src="$api.FILE_URL+enterprise.logoPath" />
</div>
</div>
</template>
<template v-if="mode=='complete'">
<div class="enterprise-card enterprise-card-complete">
<div class="base complete-base">
<p class="enterprise-name">{{enterprise.name}}</p>
<p class="detail">{{enterprise.address}}</p>
<p class="detail">{{enterprise.contact}}</p>
</div>
<div class="logo complete-logo">
<img width="60%" :src="$api.FILE_URL+enterprise.logoPath" />
</div>
<div class="productions">
<p class="title">主要产品</p>
<span class="item" v-for="(item,i) in enterprise.productions" :key='i'>{{enterprise.productions[i]}}</span>
</div>
<!-- <div class="honors" v-if="enterprise.honors.length>0">
<p class="title">主要荣誉</p>
<ul class="list">
<li class="row" v-for="(honor,j) in enterprise.honors" :key="j">
<p class="content">{{honor.intro}}</p><p class="time">{{honor.date}}</p>
</li>
</ul>
</div> -->
<div class="intros">
<p class="title">公司介绍</p>
<div class="content" v-html="enterprise.introHtml"></div>
</div>
</div>
</template>
</div>
</template>
<script>
export default {
name: 'enterpriseCard',
props: {
enterprise: {
type: Object,
default() {
return {}
}
},
mode:{
type:String,
default: 'simple',
validator (value) {
// simple-简易 complete-完整
return ['simple', 'complete'].indexOf(value) >= 0
}
}
},
data(){
return {
newEnterprise:{}
}
},
watch:{
enterprise: {
handler: function(val) {
console.log('enterprise',val)
this.newEnterprise = val
},
deep: true
},
},
mounted(){
// console.log(this.enterprise)
}
}
</script>
<style lang="stylus" scoped>
.enterprise-card
color #fff
.base
font-size 1.4rem
.detail
padding-bottom 0.5rem
.logo
background-color rgba(255,255,255,1)
margin 0.5rem 0
width 100%
display flex
align-items center
justify-content center
border-radius 1rem
.title
font-family $font-pang
font-size 1.6rem
color $color-map(1)
padding 1rem 0
.enterprise-card-simple
$gd-layout()
background-color transparent
grid-template-areas \
'base logo'
grid-template-columns 2.2fr 0.8fr
.simple-base
grid-area base
.simple-logo
grid-area logo
.enterprise-card-complete
$gd-layout()
padding 2rem
background-color transparent
grid-template-areas \
'complete-base complete-logo'\
'productions complete-logo'\
'intros intros'
grid-template-rows 0.5fr 0.5fr 2fr
grid-template-columns 2fr 1fr
.complete-base
grid-area complete-base
font-size 1.6rem
.complete-logo
grid-area complete-logo
.productions
grid-area productions
.item
display inline-block
word-wrap none
padding 0.2rem 0.5rem
font-size 1.3rem
.honors
grid-area honors
.list
height 100%
overflow auto
padding 0 0.5rem
.row
display flex
color #ccc
padding 0.5rem 0
align-items top
justify-content space-between
border-bottom 0.1rem solid rgba(28, 66, 95, 0.4)
font-size 1.3rem
.time
padding-left 1rem
word-wrap none
width 12rem
text-align right
.intros
grid-area intros
.content
font-size 1.2rem
height 15rem
overflow-y scroll
line-height 1.5
p
text-indent 2em
.enterprise-name
font-family $font-pang
font-size 2.4rem
color #71c012
padding 1rem 0
</style>
<template> <template>
<div class="enterprise-card"> <div class="enterprise-card">
<template v-if="mode=='simple'"> <template v-if="mode == 'simple'">
<div class="enterprise-card enterprise-card-simple"> <div class="enterprise-card-simple">
<div class="base simple-base"> <div class="simple-logo">
<p class="title">联系方式</p> <div class="img-wrapper">
<p class="detail">{{enterprise.address}}</p>
<p class="detail">{{enterprise.contact}}</p>
</div>
<div class="logo simple-logo">
<img width="60%" :src="$api.FILE_URL+enterprise.logoPath" /> <img width="60%" :src="$api.FILE_URL+enterprise.logoPath" />
</div> </div>
</div> </div>
<div class="simple-base">
<p class="name small">地址</p>
<p>{{enterprise.address}}</p>
<p class="name small">联系方式</p>
<p>{{enterprise.contact}}</p>
</div>
</div>
</template> </template>
<template v-if="mode=='complete'"> <template v-if="mode=='complete'">
<div class="enterprise-card enterprise-card-complete"> <div class="enterprise-card-complete">
<div class="base complete-base"> <section>
<p class="enterprise-name">{{enterprise.name}}</p> <div class="complete-base">
<p class="detail">{{enterprise.address}}</p> <p class="name title">{{enterprise.name}}</p>
<p class="detail">{{enterprise.contact}}</p> <p>{{enterprise.address}}</p>
</div> <br/>
<div class="logo complete-logo"> <p class="name">公司介绍</p>
<img width="60%" :src="$api.FILE_URL+enterprise.logoPath" /> <div class="introduction" v-html="enterprise.introHtml" />
</div> </div>
<div class="productions"> <div class="complete-logo">
<p class="title">主要产品</p> <div class="img-wrapper">
<span class="item" v-for="(item,i) in enterprise.productions" :key='i'>{{enterprise.productions[i]}}</span> <img :src="$api.FILE_URL+enterprise.logoPath" />
</div> </div>
<!-- <div class="honors" v-if="enterprise.honors.length>0">
<p class="title">主要荣誉</p>
<ul class="list">
<li class="row" v-for="(honor,j) in enterprise.honors" :key="j">
<p class="content">{{honor.intro}}</p><p class="time">{{honor.date}}</p>
</li>
</ul>
</div> -->
<div class="intros">
<p class="title">公司介绍</p>
<div class="content" v-html="enterprise.introHtml"></div>
</div> </div>
</section>
<section>
<p class="name">主要产品</p>
<EnterpriseProductions :list="enterprise.productions"/>
</section>
</div> </div>
</template> </template>
</div> </div>
</template> </template>
<script> <script>
import Common from '@/util/common' import EnterpriseProductions from './enterprise-productions'
export default { export default {
name: 'enterpriseCard', name: 'enterpriseCard',
components: {
EnterpriseProductions,
},
props: { props: {
enterprise: { enterprise: {
type: Object, type: Object,
...@@ -59,113 +59,66 @@ export default { ...@@ -59,113 +59,66 @@ export default {
default: 'simple', default: 'simple',
validator (value) { validator (value) {
// simple-简易 complete-完整 // simple-简易 complete-完整
return Common.oneOf(value, ['simple', 'complete']) return ['simple', 'complete'].indexOf(value) >= 0
} }
} }
}, },
data(){
newEnterprise:{}
},
watch:{
enterprise: {
handler: function(val) {
console.log('enterprise',val)
this.newEnterprise = val
},
deep: true
},
},
mounted(){
// console.log(this.enterprise)
}
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.enterprise-card .enterprise-card
color #fff color #ccc
line-height 1.5 height 100%
.base overflow hidden
font-size 1.4rem >div
.detail height 100%
padding-bottom 0.5rem .img-wrapper
.logo background $color-map(0.1)
background-color rgba(255,255,255,1) height 100%
margin 0.5rem 0
width 100%
display flex display flex
align-items center align-items center
justify-content center justify-content center
border-radius 1rem img
.title width 80%
font-family $font-pang padding 1rem
font-size 1.6rem background-color #fff
.name
color $color-map(1) color $color-map(1)
padding 1rem 0 font-family $font-pang
font-size 1.8rem
&.small
font-size 1.4rem
margin-top 0.5rem
&.title
color $color-green
.enterprise-card-simple .enterprise-card-simple
$gd-layout() display flex
background-color transparent padding 1rem
grid-template-areas \ align-items center
'base logo'
grid-template-columns 2.2fr 0.8fr
.simple-base
grid-area base
.simple-logo .simple-logo
grid-area logo flex 1
.simple-base
flex 2
margin-left 1rem
.enterprise-card-complete .enterprise-card-complete
$gd-layout() display flex
padding 2rem flex-direction column
background-color transparent padding 1rem
grid-template-areas \ section
'complete-base complete-logo'\ display flex
'productions complete-logo'\ flex 1
'intros intros' margin-bottom 2rem
grid-template-rows 0.5fr 0.5fr 2fr &:last-child
grid-template-columns 2fr 1fr flex-direction column
flex 2
.complete-base .complete-base
grid-area complete-base flex 2
font-size 1.6rem .introduction
.complete-logo height 8rem
grid-area complete-logo
.productions
grid-area productions
.item
display inline-block
word-wrap none
padding 0.2rem 0.5rem
font-size 1.3rem
.honors
grid-area honors
.list
height 100%
overflow auto overflow auto
padding 0 0.5rem .complete-logo
.row flex 1
display flex .img-wrapper
color #ccc margin-left 3rem
padding 0.5rem 0
align-items top
justify-content space-between
border-bottom 0.1rem solid rgba(28, 66, 95, 0.4)
font-size 1.3rem
.time
padding-left 1rem
word-wrap none
width 12rem
text-align right
.intros
grid-area intros
.content
font-size 1.2rem
height 15rem
overflow-y scroll
line-height 1.5
p
text-indent 2em
.enterprise-name
font-family $font-pang
font-size 2.4rem
color #71c012
padding 1rem 0
</style> </style>
<template>
<ul class="list">
<template v-if="list.length > 0 && list[0].price">
<li class="row title">
<p>主要品种</p>
<p>品种优势</p>
<p>价格</p>
<p>供苗期</p>
<p>联系方式</p>
</li>
<VueSeamlessScroll v-if="list.length > 0" :autoPlay="true" :class-option="{step: 0.5, limitMoveNum: 3}" :data="list" class="seamless-wrap">
<li class="row" v-for="(item, i) in list" :key="item.name + i">
<p>
{{item.name}}
<img :src="$api.FILE_URL+ item.img" />
</p>
<p class="over">{{item.advantage}}</p>
<p>
{{item.price && item.price.split(' ')[0]}}
<br/>
{{item.price && item.price.split(' ')[1]}}
</p>
<p>{{item.date}}</p>
<p>
{{item.contact && item.contact.split(' ')[0]}}
<br/>
{{item.contact && item.contact.split(' ')[1]}}
</p>
</li>
</VueSeamlessScroll>
</template>
<template v-else>
<VueSeamlessScroll v-if="list.length > 0" :autoPlay="true" :class-option="{step: 0.5, limitMoveNum: 3}" :data="list" class="seamless-wrap">
<li class="section" v-for="(item, i) in list" :key="item.name + i">
<section>
<h3 class="title">{{item.name}}</h3>
<b>优势:</b>
<p>{{item.advantage}}</p>
</section>
<section>
<img :src="$api.FILE_URL+ item.img" />
</section>
</li>
</VueSeamlessScroll>
</template>
</ul>
</template>
<script>
import VueSeamlessScroll from 'vue-seamless-scroll'
export default {
name: 'EnterpriseProductions',
components: {VueSeamlessScroll},
props: {
list: {
type: Array,
default() {
return []
}
}
},
}
</script>
<style lang="stylus" scoped>
.list
height 100%
.section
display flex
align-items center
background $color-map(0.1)
margin-top 1rem
border-top 0.1rem solid $color-map(1)
padding 1rem
>section
flex 3
&:last-child
flex 1
.title
color #fff
b
display block
color $color-map(1)
margin 0.5rem 0
>p
padding-right 2rem
img
width 100%
.row
display flex
color #ccc
padding 0.5rem
align-items center
justify-content space-between
border-bottom 0.1rem solid rgba(28, 66, 95, 0.4)
background $color-map(0.05)
&.title
font-weight bold
color #fff
background $color-map(0.2)
position sticky
top 0
&:nth-child(2n)
background transparent
p
text-align left
font-size 0.5rem
width 20%
padding 0 0.5rem
img
width 100%
&:nth-child(2)
width 50%
&:nth-child(4)
width 15%
.over
max-height 8rem
overflow auto
.seamless-wrap
overflow hidden
</style>
<template>
<ul class="list">
<li class="row">
<p>月份</p>
<p>0.6-1斤</p>
<p>1斤以上</p>
<p>1.2斤以上</p>
</li>
<li class="row" v-for="(item, i) in list" :key="item.name + i">
<p>{{item.name}}</p>
<p><b><m-count :value="item.one"/></b></p>
<p><b><m-count :value="item.two"/></b></p>
<p><b><m-count :value="item.three"/></b></p>
</li>
</ul>
</template>
<script>
export default {
name: 'FishList',
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 30%
text-align right
&:first-child
width 20%
text-align center
b
color #FFCE34
</style>
<template> <template>
<div class="map-wrapper"> <div class="map-wrapper">
<div id="map" /> <div ref="map" id="map"/>
<div v-if="data.length > 0" class="visualmap"> <div v-if="data.length > 0" class="visualmap">
<p></p> <p>{{visualLabel[0]}}</p>
<div class="bar" /> <div class="bar" />
<p></p> <p>{{visualLabel[1]}}</p>
</div> </div>
</div> </div>
</template> </template>
...@@ -19,8 +19,24 @@ export default { ...@@ -19,8 +19,24 @@ export default {
default() { default() {
return [] return []
} }
},
visualLabel: {
type: Array,
default() {
return ['高', '低']
} }
}, },
visualFormatter: {
type: String,
default: '{b}<br/>疫病发生面积:{c}亩'
},
visualConfig: {
type: Object,
default() {
return {}
}
},
},
data() { data() {
return { return {
locations: [], locations: [],
...@@ -92,7 +108,7 @@ export default { ...@@ -92,7 +108,7 @@ export default {
this.locations.push({name: el.properties.name, value: el.properties.cp}) this.locations.push({name: el.properties.name, value: el.properties.cp})
}) })
this.$echarts.registerMap(this.mapName, guangdong) this.$echarts.registerMap(this.mapName, guangdong)
this.map = this.$echarts.init(document.getElementById('map')) this.map = this.$echarts.init(this.$refs.map)
this.config = { this.config = {
geo: { geo: {
map: this.mapName, map: this.mapName,
...@@ -193,9 +209,9 @@ export default { ...@@ -193,9 +209,9 @@ export default {
this.config.tooltip = { this.config.tooltip = {
trigger: 'item', trigger: 'item',
extraCssText: 'transform: rotate(-28deg);', extraCssText: 'transform: rotate(-28deg);',
formatter: '{b}<br/>疫病发生面积:{c}亩' formatter: this.visualFormatter,
}, }
this.config.visualMap = { this.config.visualMap = Object.assign({
show: false, show: false,
// min: 0, // min: 0,
// max: 60000, // max: 60000,
...@@ -206,9 +222,9 @@ export default { ...@@ -206,9 +222,9 @@ export default {
// realtime: false, // realtime: false,
// calculable: true, // calculable: true,
inRange: { inRange: {
color: ['rgba(91, 213, 255, 0.3)', 'rgba(91, 213, 255, 0.8)'] color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.6)']
}
} }
}, this.visualConfig)
this.map.setOption(this.config) this.map.setOption(this.config)
} }
} }
......
...@@ -3,12 +3,12 @@ ...@@ -3,12 +3,12 @@
<li class="row"> <li class="row">
<p></p> <p></p>
<p>养殖面积(公顷)</p> <p>养殖面积(公顷)</p>
<p>值(万元)</p> <p>量(吨)</p>
</li> </li>
<li class="row" v-for="(item, i) in list" :key="item.name + i"> <li class="row" v-for="(item, i) in list" :key="item.name + i">
<p>{{item.name}}</p> <p>{{item.name}}</p>
<p><b><m-count :value="item.area" :decimal="0"/></b></p> <p><b><m-count :value="item.area" :decimal="0"/></b></p>
<p><b><m-count :value="item.output"/></b></p> <p><b><m-count :value="item.output" :decimal="0"/></b></p>
</li> </li>
</ul> </ul>
</template> </template>
......
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<ul class="list"> <ul class="list">
<li class="row" v-for="(item, i) in list" :key="item.name + i"> <li class="row" v-for="(item, i) in list" :key="item.name + i">
<span class="name">{{item.name}}</span> <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']" /> <!-- <Progress class='progress' style="width: 40%" :percent="calcPercent(item.value)" :stroke-width="12" :hide-info="true" status="active" :stroke-color="['#0176fe', '#4aecfd']" /> -->
<div> <div>
<b><m-count :value="item.value"/></b> <b :style="`color:${color}`"><m-count :value="item.value"/></b>
<span class="unit">{{item.unit}}</span> <span class="unit">{{item.unit}}</span>
</div> </div>
</li> </li>
...@@ -20,15 +20,19 @@ export default { ...@@ -20,15 +20,19 @@ export default {
default() { default() {
return [] return []
} }
}
}, },
methods: { color: {
calcPercent(val) { type: String,
if (!val || val < 0) return 0 default: '#71C012',
const percent = Math.round((val / 50) * 100)
return percent >= 100 ? 100 : percent
}
} }
},
// methods: {
// calcPercent(val) {
// if (!val || val < 0) return 0
// const percent = Math.round((val / 50) * 100)
// return percent >= 100 ? 100 : percent
// }
// }
} }
</script> </script>
...@@ -44,10 +48,10 @@ export default { ...@@ -44,10 +48,10 @@ export default {
align-items center align-items center
justify-content space-between justify-content space-between
border-bottom 0.1rem solid rgba(28, 66, 95, 0.4) border-bottom 0.1rem solid rgba(28, 66, 95, 0.4)
.name // .name
width 21% // width 21%
b b
font-size 1.1rem font-size 1.2rem
color $color-green color $color-green
.unit .unit
font-size 0.5rem font-size 0.5rem
......
<template>
<ul class="list">
<li class="row title">
<p>品种</p>
<p>供/求</p>
<p>数量</p>
<!-- <p>最小价格</p>
<p>最大价格</p> -->
<p>价格</p>
<p>价格单位</p>
</li>
<VueSeamlessScroll v-if="list.length > 0" :autoPlay="true" :class-option="{step: 0.5}" :data="list" class="seamless-wrap">
<li class="row" v-for="(item, i) in list" :key="item.name + i">
<p>{{item.name}}</p>
<p :style="whichColor(item.type)">{{item.type}}</p>
<p>{{item.count}}</p>
<!-- <p><b><m-count :value="item.min"/></b></p>
<p><b><m-count :value="item.max"/></b></p> -->
<p><b><m-count :value="item.price"/></b></p>
<p>{{item.unit}}</p>
</li>
</VueSeamlessScroll>
</ul>
</template>
<script>
import VueSeamlessScroll from 'vue-seamless-scroll'
export default {
name: 'SupplyDemandList',
components: {VueSeamlessScroll},
props: {
list: {
type: Array,
default() {
return []
}
}
},
methods: {
whichColor(type) {
return {
color: type == '供' ? 'green' : 'red',
fontWeight: 'bold',
}
}
}
}
</script>
<style lang="stylus" scoped>
.list
height 100%
overflow hidden
padding 0.5rem
.row
display flex
color #ccc
padding 0.5rem 0 0.5rem 1rem
align-items center
justify-content space-between
border-bottom 0.1rem solid rgba(28, 66, 95, 0.4)
background $color-map(0.05)
&.title
// color $color-map(1)
font-weight bold
color #fff
background $color-map(0.2)
position sticky
top 0
&:nth-child(2n)
background transparent
p
text-align left
width 15%
&:first-child
width 40%
.seamless-wrap
overflow hidden
</style>
<template>
<ul class="list">
<li class="row title">
<p>品种</p>
<p>一季度</p>
<p>二季度</p>
<p>涨跌率</p>
</li>
<VueSeamlessScroll v-if="list.length > 0" :autoPlay="true" :class-option="{step: 0.5}" :data="list" class="seamless-wrap">
<li class="row" v-for="(item, i) in list" :key="item.name + i">
<p>{{item.name}}</p>
<p><b><m-count :value="item.first"/></b></p>
<p><b><m-count :value="item.second"/></b></p>
<p><b :style="whichColor(item.rate)"><m-count :value="item.rate"/></b></p>
</li>
</VueSeamlessScroll>
</ul>
</template>
<script>
import VueSeamlessScroll from 'vue-seamless-scroll'
export default {
name: 'TradeTrend',
components: {VueSeamlessScroll},
props: {
list: {
type: Array,
default() {
return []
}
}
},
methods: {
whichColor(num) {
return {
color: num >= 0 ? 'green' : 'red'
}
}
}
}
</script>
<style lang="stylus" scoped>
.list
height 100%
overflow hidden
padding 0.5rem
.row
display flex
color #ccc
padding 0.5rem 0 0.5rem 1rem
align-items center
justify-content space-between
border-bottom 0.1rem solid rgba(28, 66, 95, 0.4)
background $color-map(0.05)
&.title
// color $color-map(1)
font-weight bold
color #fff
background $color-map(0.2)
position sticky
top 0
&:nth-child(2n)
background transparent
p
text-align left
width 15%
&:first-child
width 55%
.seamless-wrap
overflow hidden
</style>
...@@ -77,7 +77,7 @@ export default { ...@@ -77,7 +77,7 @@ export default {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
}, },
color: ['#3391FF', '#71C012', '#F47C1F','#CC4D4D','#C15CFF','#8400FF'], color: ['#1fecff', '#3391FF', '#71C012', 'gold', '#F47C1F', '#C15CFF'],
series: { series: {
type: 'pie', type: 'pie',
radius: ['45%', '70%'], radius: ['45%', '70%'],
......
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
<div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`"> <div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`">
<ThemeTitle class="theme">广东省渔业企业介绍专题</ThemeTitle> <ThemeTitle class="theme">广东省渔业企业介绍专题</ThemeTitle>
<template v-if="enterpriseList.length>0"> <template v-if="enterpriseList.length>0">
<div v-for="(enterprise,i) in enterpriseList" :key="i" :class="index==i?('box'+(i+1)+' cur'):('box'+(i+1))" @mouseenter="showOne(i)" @mouseleave="startTimer"> <div v-for="(enterprise,i) in enterpriseList" :key="enterprise.name + i" :class="index == i ? `box box${i + 1} cur` : `box box${i + 1}`" @mouseenter="showOne(i)" @mouseleave="startTimer">
<m-card mode="2" :title="enterprise.name"> <m-card mode="2" :title="enterprise.name">
<EnterpriseCard :enterprise='enterprise'></EnterpriseCard> <EnterpriseCard :enterprise="enterprise" />
</m-card> </m-card>
</div> </div>
<div class="box7"> <div class="box7">
<m-card mode="2" :title="' '" style="margin-top:3rem"> <m-card mode="2" title="产品信息">
<EnterpriseCard :mode="'complete'" :enterprise='firstEnterprise'></EnterpriseCard> <EnterpriseCard mode="complete" :enterprise="enterpriseList[index]" />
</m-card> </m-card>
</div> </div>
</template> </template>
...@@ -30,7 +30,6 @@ export default { ...@@ -30,7 +30,6 @@ export default {
return { return {
index: 0, index: 0,
enterpriseList: [], enterpriseList: [],
firstEnterprise: {},
timerHanlder:null, timerHanlder:null,
timeInterval:5000 timeInterval:5000
} }
...@@ -38,35 +37,28 @@ export default { ...@@ -38,35 +37,28 @@ export default {
mounted() { mounted() {
this.getData() this.getData()
}, },
beforeDestroy() {
clearInterval(this.timerHanlder)
},
methods: { methods: {
getData() { getData() {
axios.get(this.$api.FILE_URL + 'gd-enterprise.json').then(res => { axios.get(this.$api.FILE_URL + 'gd-enterprise.json').then(res => {
this.enterpriseList = res.data.enterprise this.enterpriseList = res.data.enterprise
this.firstEnterprise = this.enterpriseList[0]
this.startTimer() this.startTimer()
}) })
}, },
showOne(index){ showOne(index){
clearInterval(this.timerHanlder) clearInterval(this.timerHanlder)
this.index = index this.index = index
this.firstEnterprise = this.enterpriseList[this.index]
}, },
startTimer(){ startTimer(){
let _vm = this this.timerHanlder = setInterval(this.changeEnterprise, this.timeInterval)
this.timerHanlder = setInterval(function() {
_vm.changeEnterprise()
}, this.timeInterval)
}, },
changeEnterprise(){ changeEnterprise(){
if(this.index === -1){ this.index += 1
this.index = 0 if (this.index >= this.enterpriseList.length) {
}else if(this.index<(this.enterpriseList.length-1)){
this.index ++
}else{
this.index = 0 this.index = 0
} }
this.firstEnterprise = this.enterpriseList[this.index]
} }
} }
} }
...@@ -75,7 +67,6 @@ export default { ...@@ -75,7 +67,6 @@ export default {
<style lang="stylus" scoped> <style lang="stylus" scoped>
#container #container
$gd-layout() $gd-layout()
grid-gap 1.5rem
grid-template-areas \ grid-template-areas \
'. theme .'\ '. theme .'\
'box1 box7 box2'\ 'box1 box7 box2'\
...@@ -85,42 +76,23 @@ export default { ...@@ -85,42 +76,23 @@ export default {
grid-template-columns 1fr 2fr 1fr grid-template-columns 1fr 2fr 1fr
.theme .theme
grid-area theme grid-area theme
width 60% width 80%
.box
opacity 0.3
&.cur
opacity 1
.box1 .box1
grid-area box1 grid-area box1
opacity 0.3
.box2 .box2
grid-area box2 grid-area box2
opacity 0.3
.box3 .box3
grid-area box3 grid-area box3
opacity 0.3
.box4 .box4
grid-area box4 grid-area box4
opacity 0.3
.box5 .box5
grid-area box5 grid-area box5
opacity 0.3
.box6 .box6
grid-area box6 grid-area box6
opacity 0.3
.box7 .box7
grid-area box7 grid-area box7
.cur
opacity 1
.area
font-size 1.8rem
position absolute
width 60%
top 10%
left 30%
right 30%
text-align center
p
color #fff
font-family $font-pang
b
font-size 3rem
>span
font-family $font-pang
</style> </style>
<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="当年罗非鱼各规格均价">
<m-chart :options="options1" :data="data1"/>
</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 FishMap from './components/fish-map'
import axios from 'axios'
export default {
name: 'GDFish',
components: {
ApplyDemandList,
ThemeTitle,
MarketingChart,
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: '吨'},
],
options1: {
colors: ['#0076FF', '#F47C1F', '#21640D'],
legend: {
left: '60%'
},
xAxis: {
data: [],
boundaryGap: false,
},
yAxis: {
name: '(元)',
max: 8,
},
series: {
type: 'line',
symbol: 'circle',
areaStyle: {
opacity: 0.5,
},
}
},
data1: [],
}
},
mounted() {
this.getData()
},
methods: {
getData() {
axios.get(this.$api.FILE_URL + 'gd-fish.json').then(res => {
const {comparison} = res.data
this.options1.xAxis.data = comparison.name
this.data1 = comparison.value.reverse()
})
}
}
}
</script>
<style lang="stylus" scoped>
#container
$gd-layout()
grid-template-areas \
'. . . box1'\
'. . . box1'\
'box2 box2 box3 box3'
grid-template-rows 1fr 1fr 1fr
grid-template-columns 2fr 1fr 1fr 2fr
.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 $color-green
margin-left 3rem
span
background $color-green
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>
<template> <template>
<div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`"> <div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`">
<FishMap /> <ThemeTitle class="theme">广东省罗非鱼专题</ThemeTitle>
<ThemeTitle style="width: 120%;">广东省罗非鱼专题</ThemeTitle>
<div class="flag">
<p><span/>供应量</p>
<p><span/>采购量</p>
</div>
<div class="box1"> <div class="box1">
<m-card mode="2" title="排名"> <m-card mode="2" title="2019罗非鱼各规格均价(元)">
<div class="apply-demand"> <FishList :list="fishList"/>
<div>
<p>市场供应量排行</p>
<ApplyDemandList :list="list1"/>
</div>
<div>
<p>市场需求量排行</p>
<ApplyDemandList :list="list1"/>
</div>
</div>
</m-card> </m-card>
</div> </div>
<div class="box2"> <div class="box2">
<m-card mode="2" title="市场供需数据"> <m-card mode="2" title="罗非鱼生产加工数量趋势(万吨)">
<MarketingChart /> <m-chart :options="options" :data="data"/>
</m-card> </m-card>
</div> </div>
<div class="box3"> <div class="box3">
<m-card mode="2" title="当年罗非鱼各规格均价"> <m-card mode="2" title="罗非鱼国内外价格走势(元/斤)">
<m-chart :options="options1" :data="data1"/> <m-chart :options="options1" :data="data1"/>
</m-card> </m-card>
</div> </div>
<div class="box4">
<m-card mode="2" title="2019罗非鱼各规格趋势">
<m-chart :options="options2" :data="data2"/>
</m-card>
</div>
<div class="box5">
<m-card mode="2" title="各规格罗非鱼价格比对">
<m-chart :options="options3" :data="data3"/>
<Select v-model="curType" class="select" size="small" @on-change="handleSelect">
<Option v-for="item in types" :value="item" :key="item">{{ item }}</Option>
</Select>
</m-card>
</div>
</div> </div>
</template> </template>
<script> <script>
import ApplyDemandList from './components/apply-demand-list'
import ThemeTitle from './components/title' import ThemeTitle from './components/title'
import MarketingChart from './components/marketing-chart.vue' import FishList from './components/fish-list'
import FishMap from './components/fish-map'
import axios from 'axios' import axios from 'axios'
export default { export default {
name: 'GDFish', name: 'GDFish',
components: { components: {
ApplyDemandList,
ThemeTitle, ThemeTitle,
MarketingChart, FishList,
FishMap,
}, },
data() { data() {
return { return {
list1: [ types: ['0.6-1斤', '1斤以上', '1.2斤以上'],
{name: '绿色泉水养殖专业合作社', value: 200, unit: '吨'}, curType: '0.6-1斤',
{name: '明基水产品有限公司', value: 192, unit: '吨'}, options: {
{name: '茂南三高良种繁殖基地', value: 159, unit: '吨'}, colors: ['#1fecff', 'gold'],
{name: '强匠冷冻食品经营部', value: 121, unit: '吨'}, legend: {
{name: '新吉奥罗非鱼苗繁育场', value: 115, unit: '吨'}, top: '15%',
{name: '阳西益豪水产食品加工厂', value: 101, unit: '吨'}, left: '70%',
{name: '中恒食品添加剂有限公司', value: 69, unit: '吨'}, },
{name: '北京自伍鑫发水产商贸有限公司', value: 59, unit: '吨'}, grid: {
], bottom: '10%',
},
xAxis: {
data: [],
},
yAxis: {
name: '(万吨)',
},
series: {
type: 'bar',
barWidth: '40%',
stack: '总量',
}
},
data: [],
fishList: [],
options1: { options1: {
colors: ['#0076FF', '#F47C1F', '#21640D'], colors: ['#71C012', '#FFCE34', '#F47C1F'],
legend: { legend: {
left: '60%' // top: '2%',
top: '15%',
left: '40%',
},
grid: {
right: '5%',
bottom: '10%',
}, },
xAxis: { xAxis: {
data: [], data: [],
boundaryGap: false, boundaryGap: false,
}, },
yAxis: { yAxis: {
name: '(元)', name: '(元/斤)',
max: 8,
}, },
series: { series: {
type: 'line', type: 'line',
symbol: 'circle', stack: '总量',
areaStyle: { areaStyle: {
opacity: 0.5, opacity: 0.5,
}, },
symbol: 'circle',
} }
}, },
data1: [], data1: [],
options2: {
colors: ['#71C012', '#1fecff', '#F47C1F'],
legend: {
left: '60%'
},
xAxis: {
data: [],
boundaryGap: false,
},
yAxis: {
name: '(元)',
max: 5,
min: 2.5,
interval: 0.5,
},
series: {
type: 'line',
symbol: 'circle',
}
},
data2: [],
options3: {
colors: ['#71C012', '#1fecff', '#F47C1F'],
legend: {
left: '45%'
},
xAxis: {
data: [],
boundaryGap: false,
},
yAxis: {
name: '(元)',
// max: 4,
min: 3,
// interval: 0.2,
},
series: {
type: 'line',
symbol: 'circle',
}
},
data3: [],
comparisonData: [],
} }
}, },
mounted() { mounted() {
...@@ -89,11 +148,29 @@ export default { ...@@ -89,11 +148,29 @@ export default {
methods: { methods: {
getData() { getData() {
axios.get(this.$api.FILE_URL + 'gd-fish.json').then(res => { axios.get(this.$api.FILE_URL + 'gd-fish.json').then(res => {
const {comparison} = res.data const {comparison, processTrend, priceTrend, comparison1, comparison2, comparison3} = res.data
this.options1.xAxis.data = comparison.name this.fishList = comparison.name.map((item, index) => {
this.data1 = comparison.value.reverse() return {
}) name: item,
one: comparison.value[0].data[index],
two: comparison.value[1].data[index],
three: comparison.value[2].data[index],
} }
})
this.options.xAxis.data = processTrend.name
this.data = processTrend.value
this.options1.xAxis.data = priceTrend.name
this.data1 = priceTrend.value
this.options2.xAxis.data = comparison.name
this.data2 = comparison.value
this.options3.xAxis.data = comparison1.name
this.data3 = comparison1.value
this.comparisonData = [comparison1, comparison2, comparison3]
})
},
handleSelect(type) {
this.data3 = this.comparisonData[this.types.indexOf(type)].value
},
} }
} }
</script> </script>
...@@ -102,52 +179,26 @@ export default { ...@@ -102,52 +179,26 @@ export default {
#container #container
$gd-layout() $gd-layout()
grid-template-areas \ grid-template-areas \
'. . . box1'\ '. theme theme theme theme .'\
'. . . box1'\ 'box1 box1 box2 box2 box3 box3'\
'box2 box2 box3 box3' 'box4 box4 box4 box5 box5 box5'
grid-template-rows 1fr 1fr 1fr grid-template-rows 4rem 35rem auto
grid-template-columns 2fr 1fr 1fr 2fr grid-template-columns 0.5fr 0.5fr 1fr 0.5fr 1fr 0.5fr
.flag .theme
display flex grid-area theme
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 $color-green
margin-left 3rem
span
background $color-green
span
display inline-block
width 0.8rem
height 0.8rem
border-radius 50%
margin-right 0.5rem
.box1 .box1
grid-area box1 grid-area box1
.box2 .box2
grid-area box2 grid-area box2
.box3 .box3
grid-area box3 grid-area box3
.apply-demand .box4
display flex grid-area box4
height 100% .box5
>div grid-area box5
width 50% .select
height 100% position absolute
overflow hidden top 1rem
>p right 1rem
font-family $font-pang width 9rem
font-size 1.4rem
color $color-map(1)
padding 0.5rem 1rem 0
</style> </style>
...@@ -36,7 +36,11 @@ export default { ...@@ -36,7 +36,11 @@ export default {
return { return {
options1: { options1: {
legend: { legend: {
top: '2%', // top: '2%',
left: '24%',
top: '10%',
itemWidth: 10,
itemHeight: 10,
}, },
xAxis: { xAxis: {
data: [], data: [],
...@@ -53,7 +57,11 @@ export default { ...@@ -53,7 +57,11 @@ export default {
data1: [], data1: [],
options2: { options2: {
legend: { legend: {
top: '2%', // top: '2%',
left: '38%',
top: '10%',
itemWidth: 10,
itemHeight: 10,
}, },
xAxis: { xAxis: {
data: [], data: [],
...@@ -69,9 +77,13 @@ export default { ...@@ -69,9 +77,13 @@ export default {
}, },
data2: [], data2: [],
options3: { options3: {
colors: ['#21640D', '#FFCE34', '#F47C1F'], colors: ['#71C012', '#FFCE34', '#F47C1F'],
legend: { legend: {
top: '2%', // top: '2%',
left: '32%',
top: '10%',
itemWidth: 10,
itemHeight: 10,
}, },
grid: { grid: {
right: '5%', right: '5%',
...@@ -104,11 +116,18 @@ export default { ...@@ -104,11 +116,18 @@ export default {
getData() { getData() {
axios.get(this.$api.FILE_URL + 'gd-industry.json').then(res => { axios.get(this.$api.FILE_URL + 'gd-industry.json').then(res => {
const {output, production, processProduction, fishProduction} = res.data const {output, production, processProduction, fishProduction} = res.data
const textStyle = {
color: '#ccc',
fontSize: this.fontSize,
}
this.options1.xAxis.data = output.name this.options1.xAxis.data = output.name
this.options1.legend.textStyle = textStyle
this.data1 = output.value this.data1 = output.value
this.options2.xAxis.data = production.name this.options2.xAxis.data = production.name
this.options2.legend.textStyle = textStyle
this.data2 = production.value this.data2 = production.value
this.options3.xAxis.data = processProduction.name this.options3.xAxis.data = processProduction.name
this.options3.legend.textStyle = textStyle
this.data3 = processProduction.value this.data3 = processProduction.value
this.fishChartData = fishProduction this.fishChartData = fishProduction
}) })
...@@ -128,6 +147,11 @@ export default { ...@@ -128,6 +147,11 @@ export default {
} }
} }
}, },
},
computed: {
fontSize() {
return Math.floor(screen.height * 1.48 / 100) / 1.2
},
} }
} }
</script> </script>
......
<template> <template>
<div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`"> <div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`">
<GuangdongMap /> <GuangdongMap key="production" :data="mapData" :visualConfig="visualConfig" visualFormatter="{b}<br/>养殖面积:{c}公顷"/>
<ThemeTitle>广东省生产专题</ThemeTitle> <ThemeTitle style="width: 150%;margin-left:20%;">广东省生产专题</ThemeTitle>
<div class="area"> <div class="area">
<p>当前广东省养殖面积</p> <p>当前广东省养殖面积</p>
<b v-if="area"><m-flip :value="area"/></b> <b v-if="area"><m-flip :value="area"/></b>
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</div> </div>
<div class="box1"> <div class="box1">
<m-card mode="2" title="各种类养殖产量(吨)"> <m-card mode="2" title="各种类养殖产量(吨)">
<DataList :list="production"/> <DataList :list="production" :decimal="0"/>
</m-card> </m-card>
</div> </div>
<div class="box2"> <div class="box2">
...@@ -17,10 +17,25 @@ ...@@ -17,10 +17,25 @@
<ProductionList :list="cityData"/> <ProductionList :list="cityData"/>
</m-card> </m-card>
</div> </div>
<div class="box3"> <!-- <div class="box3">
<m-card mode="2" title="特色品种养殖产量"> <m-card mode="2" title="特色品种养殖产量">
<m-chart :showLegend="false" :options="options" :data="data" /> <m-chart :showLegend="false" :options="options" :data="data" />
</m-card> </m-card>
</div> -->
<div class="box4">
<m-card mode="2" title="养殖总面积对比">
<m-chart :showLegend="false" :options="options1" :data="data1"/>
</m-card>
</div>
<div class="box5">
<m-card mode="2" title="海水养殖面积对比">
<m-chart :showLegend="false" :options="options2" :data="data2"/>
</m-card>
</div>
<div class="box6">
<m-card mode="2" title="淡水养殖面积对比">
<m-chart :showLegend="false" :options="options3" :data="data3"/>
</m-card>
</div> </div>
</div> </div>
</template> </template>
...@@ -45,20 +60,64 @@ export default { ...@@ -45,20 +60,64 @@ export default {
production: [], production: [],
specialProduction: [], specialProduction: [],
cityData: [], cityData: [],
options: { options1: {
colors: [['#1FECFF', '#B645FF']], colors: [['#1FECFF', '#0076FF']],
xAxis: {
data: [],
},
yAxis: {
name: '(公顷)',
min: 450000,
max: 600000,
},
series: {
type: 'bar',
barWidth: '40%',
}
},
options2: {
colors: [['#1FECFF', '#0076FF']],
xAxis: { xAxis: {
data: [], data: [],
}, },
yAxis: { yAxis: {
name: '(吨)', name: '(公顷)',
min: 150000,
max: 200000,
}, },
series: { series: {
type: 'bar', type: 'bar',
barWidth: '40%', barWidth: '40%',
} }
}, },
options3: {
colors: [['#1FECFF', '#0076FF']],
xAxis: {
data: [], data: [],
},
yAxis: {
name: '(公顷)',
min: 300000,
max: 400000,
},
series: {
type: 'bar',
barWidth: '40%',
}
},
data1: [],
data2: [],
data3: [],
visualConfig: {
pieces: [
{min:0, max: 10000},
{min:10001, max: 20000},
{min:20001, max: 30000},
{min:30001, max: 40000},
{min:40001},
]
},
mapData: [],
} }
}, },
mounted() { mounted() {
...@@ -70,12 +129,24 @@ export default { ...@@ -70,12 +129,24 @@ export default {
for(let key in res.data) { for(let key in res.data) {
this[key] = res.data[key] this[key] = res.data[key]
} }
const chartData = [] const data1 = [], data2 = [], data3 = []
this.specialProduction.forEach(item => { this.totalArea.forEach((item, index) => {
this.options.xAxis.data.push(item.name) this.options1.xAxis.data.push(item.name)
chartData.push(item.value) this.options2.xAxis.data.push(item.name)
this.options3.xAxis.data.push(item.name)
data1.push(item.value)
data2.push(this.seaArea[index].value)
data3.push(this.waterArea[index].value)
})
this.data1 = [{data: data1}]
this.data2 = [{data: data2}]
this.data3 = [{data: data3}]
this.mapData = this.cityData.map(item => {
return {
name: item.name,
value: item.area,
}
}) })
this.data = [{data: chartData}]
}) })
} }
} }
...@@ -86,17 +157,24 @@ export default { ...@@ -86,17 +157,24 @@ export default {
#container #container
$gd-layout() $gd-layout()
grid-template-areas \ grid-template-areas \
'box1 . box2'\ 'box1 . . box2'\
'box1 . box2'\ 'box1 . . box2'\
'box3 box3 box2' 'box4 box5 box6 box2'
grid-template-rows 1fr 1fr 1fr grid-template-rows 1fr 1fr 1fr
grid-template-columns 1fr 3fr 1fr grid-template-columns 1fr 1fr 1fr 1fr
.box1 .box1
grid-area box1 grid-area box1
width 80%
.box2 .box2
grid-area box2 grid-area box2
.box3 // .box3
grid-area box3 // grid-area box3
.box4
grid-area box4
.box5
grid-area box5
.box6
grid-area box6
.area .area
font-size 1.8rem font-size 1.8rem
color $color-map(1) color $color-map(1)
......
<template> <template>
<div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`"> <div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`">
<GuangdongMap /> <GuangdongMap :data="tradeSituation" :visualConfig="visualConfig" visualFormatter="{b}<br/>水产苗种交易产值:{c}万元"/>
<ThemeTitle style="width: 200%;">渔业种业综合交易平台交易分析专题</ThemeTitle> <ThemeTitle style="width: 310%;">渔业种业综合交易平台交易分析专题</ThemeTitle>
<div class="box1"> <div class="box1">
<m-card mode="2" title="排名"> <m-card mode="2" title="各市水产苗种交易产值">
<DataList :list="list1"/> <ProgressList :list="tradeSituation"/>
</m-card> </m-card>
</div> </div>
<div class="box2"> <div class="box2">
<m-card mode="2" title="各品种成交均价"> <m-card mode="2" title="价格情况">
<ProgressList :list="list2"/> <ProgressList :list="priceSituation" color="gold"/>
</m-card> </m-card>
</div> </div>
<div class="box3"> <div class="box3">
<m-card mode="2" title="采购供应数据"> <m-card mode="2" title="一二季度各水产品成交价格涨跌情况">
<m-chart :options="options1" :data="data1" /> <div class="trend-wrapper">
<TradeTrend :list="trendData.slice(0,17)"/>
<TradeTrend :list="trendData.slice(17)"/>
</div>
</m-card> </m-card>
</div> </div>
<div class="box4"> <div class="box4">
<m-card mode="2" title="累计违规举报次数"> <m-card mode="2" title="供求信息">
<m-chart :showLegend="false" :options="options2" :data="data2" /> <SupplyDemandList :list="randomData"/>
</m-card> </m-card>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import DataList from './components/list' import axios from 'axios'
import ProgressList from './components/progress-list' import ProgressList from './components/progress-list'
import ThemeTitle from './components/title' import ThemeTitle from './components/title'
import SupplyDemandList from './components/supply-demand-list'
import TradeTrend from './components/trade-trend'
import GuangdongMap from './components/map' import GuangdongMap from './components/map'
export default { export default {
name: 'GDProduction', name: 'GDProduction',
components: { components: {
DataList,
ProgressList, ProgressList,
ThemeTitle, ThemeTitle,
SupplyDemandList,
TradeTrend,
GuangdongMap, GuangdongMap,
}, },
data() { data() {
return { return {
list1: [ priceSituation: [],
{name: '淡水鱼苗', value: 8279, unit: '亿尾'}, tradeSituation: [],
{name: '淡水鱼种', value: 222544, unit: '吨'}, trendData: [],
{name: '投放鱼种', value: 193027, unit: '吨'}, randomData: [],
{name: '稚鳖', value: 6549, unit: '万只'}, visualConfig: {
{name: '稚龟', value: 655, unit: '万只'}, pieces: [
{name: '鳗苗捕捞', value: 43, unit: '千克'}, {min:0, max: 10000},
{name: '海水鱼苗', value: 508510, unit: '万尾'}, {min:10001, max: 20000},
{name: '虾类育苗', value: 5455, unit: '万尾'}, {min:20001, max: 30000},
{name: '贝类育苗', value: 293678, unit: '万尾'}, {min:30001, max: 40000},
{name: '海带', value: 100, unit: '亿株'}, {min:40001},
{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: '元/斤'},
],
options1: {
colors: [['#1FECFF', '#0076FF'], ['#c16ad6', '#3725b2']],
legend: {
top: 20,
right: 10,
left: 'auto',
},
xAxis: {
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
}, },
yAxis: {
name: '(吨)',
interval: 2000,
},
series: {
type: 'bar',
barWidth: '30%',
barGap: 0,
} }
}, },
data1: [ mounted() {
{name: '供应数据', data: [6500, 8500, 6000, 4600, 5600, 8500, 6000, 2500, 4500, 6500, 4500, 8000]}, this.getData()
{name: '采购数据', data: [5500, 9000, 5000, 3600, 4600, 7500, 7000, 3500, 5500, 7500, 5500, 6700]},
],
options2: {
xAxis: {
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
},
yAxis: {
name: '(次)',
interval: 20,
},
series: {
type: 'bar',
itemStyle: {
shadowColor: '#0076FF',
shadowBlur: 6,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#1FECFF'},
{offset: 1, color: '#0076FF'}
])
}, },
methods: {
getData() {
axios.get(this.$api.FILE_URL + 'gd-trade.json').then(res => {
for(let key in res.data) {
this[key] = res.data[key]
}
})
} }
},
data2: [
{data: [30, 50, 10, 60, 70, 40, 50, 70, 30, 50, 90, 58]},
],
} }
},
} }
</script> </script>
...@@ -124,11 +80,11 @@ export default { ...@@ -124,11 +80,11 @@ export default {
#container #container
$gd-layout() $gd-layout()
grid-template-areas \ grid-template-areas \
'box1 . . box2'\ 'box1 . . . box2'\
'box1 . . box2'\ 'box1 . . . box2'\
'box3 box3 box4 box4' 'box3 box3 box3 box4 box4'
grid-template-rows 1fr 1fr 1fr grid-template-rows 1fr 1fr 18rem
grid-template-columns 1fr 1.2fr 1.2fr 1fr grid-template-columns 1.4fr 1fr 1fr 1fr 1.5fr
.box1 .box1
grid-area box1 grid-area box1
.box2 .box2
...@@ -137,4 +93,10 @@ export default { ...@@ -137,4 +93,10 @@ export default {
grid-area box3 grid-area box3
.box4 .box4
grid-area box4 grid-area box4
.trend-wrapper
display flex
height 100%
width 100%
>ul
width 50%
</style> </style>
This diff is collapsed.
static/enterpriseLogo/en-logo-guolian.png

319 KB | W: | H:

static/enterpriseLogo/en-logo-guolian.png

63.4 KB | W: | H:

static/enterpriseLogo/en-logo-guolian.png
static/enterpriseLogo/en-logo-guolian.png
static/enterpriseLogo/en-logo-guolian.png
static/enterpriseLogo/en-logo-guolian.png
  • 2-up
  • Swipe
  • Onion skin
static/enterpriseLogo/en-logo-holdor.png

591 KB | W: | H:

static/enterpriseLogo/en-logo-holdor.png

217 KB | W: | H:

static/enterpriseLogo/en-logo-holdor.png
static/enterpriseLogo/en-logo-holdor.png
static/enterpriseLogo/en-logo-holdor.png
static/enterpriseLogo/en-logo-holdor.png
  • 2-up
  • Swipe
  • Onion skin
static/enterpriseLogo/en-logo-hx.png

114 KB | W: | H:

static/enterpriseLogo/en-logo-hx.png

28.1 KB | W: | H:

static/enterpriseLogo/en-logo-hx.png
static/enterpriseLogo/en-logo-hx.png
static/enterpriseLogo/en-logo-hx.png
static/enterpriseLogo/en-logo-hx.png
  • 2-up
  • Swipe
  • Onion skin
This diff is collapsed.
static/enterpriseLogo/en-logo-sy.png

265 KB | W: | H:

static/enterpriseLogo/en-logo-sy.png

72.2 KB | W: | H:

static/enterpriseLogo/en-logo-sy.png
static/enterpriseLogo/en-logo-sy.png
static/enterpriseLogo/en-logo-sy.png
static/enterpriseLogo/en-logo-sy.png
  • 2-up
  • Swipe
  • Onion skin
This diff is collapsed.
...@@ -6,5 +6,44 @@ ...@@ -6,5 +6,44 @@
{"name": "1斤以上", "data": [4.18 , 0, 4.36, 4.58 , 4.34, 4.16, 4.21, 4.08, 4.13, 4.1, 3.94, 0]}, {"name": "1斤以上", "data": [4.18 , 0, 4.36, 4.58 , 4.34, 4.16, 4.21, 4.08, 4.13, 4.1, 3.94, 0]},
{"name": "1.2-1.6斤以上", "data": [4.4, 0, 4.69, 4.94, 4.88, 4.93, 4.95, 4.59, 4.56, 4.41, 4.13, 0]} {"name": "1.2-1.6斤以上", "data": [4.4, 0, 4.69, 4.94, 4.88, 4.93, 4.95, 4.59, 4.56, 4.41, 4.13, 0]}
] ]
},
"processTrend": {
"name": ["2015年","2016年","2017年","2018年"],
"value": [
{"name": "产量", "unit": "万吨", "data": [76.2,76.7,78,75.2]},
{"name": "加工量", "unit": "万吨", "data": [20.7,21.4,23.1,20.2]}
]
},
"priceTrend": {
"name": ["2015年","2016年","2017年","2018年"],
"value": [
{"name": "塘头价格", "unit": "元/斤", "data": [4.1,4,4.1,3.8]},
{"name": "国内价格", "unit": "元/斤", "data": [5.2,5.1,5.2,5]},
{"name": "国外价格(加工品)", "unit": "元/斤", "data": [11.5,12,12,11]}
]
},
"comparison1": {
"name": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
"value": [
{"name": "2017年", "data": [3.37, 3.31, 3.49, 3.62, 3.51, 3.19, 3.33, 3.23, 3.16, 3.25, 3.28, 3.47]},
{"name": "2018年", "data": [3.16, 3.45, 3.63, 3.43, 3.14, 3.13, 3.36, 3.35, 3.51, 3.53, 3.25, 3.33]},
{"name": "2019年", "data": [3.2, 0, 3.35, 3.47, 3.3, 3.24, 3.12, 3.07, 3.03, 3.05, 2.84, 0]}
]
},
"comparison2": {
"name": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
"value": [
{"name": "2017年", "data": [4.31, 4.19, 4.47, 4.57, 4.57, 4.3, 4.34, 4.25, 4.15, 4.16, 4.06, 4.04]},
{"name": "2018年", "data": [4.12, 4.25, 4.89, 4.37, 4.22, 4.13, 4.21, 4.36, 4.46, 4.42, 4.16, 4.28]},
{"name": "2019年", "data": [4.18, 0, 4.36, 4.58, 4.34, 4.16, 4.21, 4.08, 4.13, 4.1, 3.94, 0]}
]
},
"comparison3": {
"name": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
"value": [
{"name": "2017年", "data": [4.52, 4.66,0,0,0,0,0,0, 4.63, 0, 4.6, 4.4]},
{"name": "2018年", "data": [0,0,0,5.08, 4.72, 4.71, 4.88, 4.85, 4.89, 4.8, 4.52, 4.53]},
{"name": "2019年", "data": [4.4,0, 4.69, 4.94, 4.88, 4.93, 4.95, 4.59, 4.56, 4.41, 4.13]}
]
} }
} }
{ {
"area": 478897, "area": 478897,
"cityData": [ "cityData": [
{"name": "广州市", "area": 23010, "output": 338068.2145}, {"name": "广州市", "area": 23010, "output": 454214},
{"name": "韶关市", "area": 15968, "output": 101234.3071}, {"name": "韶关市", "area": 15968, "output": 81037},
{"name": "深圳市", "area": 1126, "output": 211927.7261}, {"name": "深圳市", "area": 1126, "output": 78453},
{"name": "珠海市", "area": 25697, "output": 786416.7286}, {"name": "珠海市", "area": 25697, "output": 313635},
{"name": "汕头市", "area": 15330, "output": 603102.5457}, {"name": "汕头市", "area": 15330, "output": 465237},
{"name": "佛山市", "area": 34888, "output": 1704450.882}, {"name": "佛山市", "area": 34888, "output": 675086},
{"name": "江门市", "area": 55194, "output": 1783605.536}, {"name": "江门市", "area": 55194, "output": 765695},
{"name": "湛江市", "area": 81382, "output": 2472339.802}, {"name": "湛江市", "area": 81382, "output": 1234025},
{"name": "茂名市", "area": 37383, "output": 852607.1035}, {"name": "茂名市", "area": 37383, "output": 900108},
{"name": "肇庆市", "area": 33945, "output": 549175.9952}, {"name": "肇庆市", "area": 33945, "output": 462347},
{"name": "惠州市", "area": 17670, "output": 277631.0517}, {"name": "惠州市", "area": 17670, "output": 158055},
{"name": "梅州市", "area": 10697, "output": 122771.9367}, {"name": "梅州市", "area": 10697, "output": 107078},
{"name": "汕尾市", "area": 18408, "output": 706701.8312}, {"name": "汕尾市", "area": 18408, "output": 567008},
{"name": "河源市", "area": 5664, "output": 46794.78575}, {"name": "河源市", "area": 5664, "output": 42612},
{"name": "阳江市", "area": 31472, "output": 2101692.311}, {"name": "阳江市", "area": 31472, "output": 1182625},
{"name": "清远市", "area": 16861, "output": 187195.4563}, {"name": "清远市", "area": 16861, "output": 131113},
{"name": "东莞市", "area": 5596, "output": 70267.57092}, {"name": "东莞市", "area": 5596, "output": 45991},
{"name": "中山市", "area": 20596, "output": 623650.283}, {"name": "中山市", "area": 20596, "output": 329656},
{"name": "潮州市", "area": 13030, "output": 246433.1558}, {"name": "潮州市", "area": 13030, "output": 196665},
{"name": "揭阳市", "area": 8219, "output": 245622.1037}, {"name": "揭阳市", "area": 8219, "output": 144416},
{"name": "云浮市", "area": 6762, "output": 122186.4332} {"name": "云浮市", "area": 6762, "output": 99915}
], ],
"production": [ "production": [
{"name": "海水养殖产量", "unit": "", "value": 3167259}, {"name": "海水养殖产量", "unit": "", "value": 3167259},
...@@ -50,5 +50,23 @@ ...@@ -50,5 +50,23 @@
{"name": "草鱼", "unit": "吨", "value": 892370}, {"name": "草鱼", "unit": "吨", "value": 892370},
{"name": "鳜鱼", "unit": "吨", "value": 92363}, {"name": "鳜鱼", "unit": "吨", "value": 92363},
{"name": "黄颡鱼", "unit": "吨", "value": 54065} {"name": "黄颡鱼", "unit": "吨", "value": 54065}
],
"totalArea": [
{"name": "2015年", "unit": "公顷", "value": 569042 },
{"name": "2016年", "unit": "公顷", "value": 558617 },
{"name": "2017年", "unit": "公顷", "value": 477064 },
{"name": "2018年", "unit": "公顷", "value": 482540 }
],
"seaArea": [
{"name": "2015年", "unit": "公顷", "value": 194861 },
{"name": "2016年", "unit": "公顷", "value": 196065 },
{"name": "2017年", "unit": "公顷", "value": 161690 },
{"name": "2018年", "unit": "公顷", "value": 165614 }
],
"waterArea": [
{"name": "2015年", "unit": "公顷", "value": 374181 },
{"name": "2016年", "unit": "公顷", "value": 362552 },
{"name": "2017年", "unit": "公顷", "value": 315374 },
{"name": "2018年", "unit": "公顷", "value": 316926 }
] ]
} }
This diff is collapsed.
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