Skip to content

N
national-dashboard
Commit c97e23b3 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

添加数据

parent ae467204
Expand all Show whitespace changes
Inline Side-by-side
Showing with 4137 additions and 309 deletions
src/App.vue
View file @ c97e23b3
<template> <template>
<div id="app"> <div id="app">
<!-- <transition name="custom-classes-transition" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut"> --> <transition name="custom-classes-transition" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
<router-view :key="$route.fullPath"/> <router-view :key="$route.fullPath"/>
<!-- </transition> --> </transition>
</div> </div>
</template> </template>
...@@ -11,42 +11,42 @@ export default { ...@@ -11,42 +11,42 @@ export default {
name: 'App', name: 'App',
data() { data() {
return { return {
routes: ['home', 'industry', 'special', 'production', 'trade', 'fish', 'disease', 'enterprise', 'flow'], routes: ['farming', 'fishing'],
cur: 0, cur: 0,
timer: null, timer: null,
timeOuter: null, timeOuter: null,
seconds: 1000 * 10 seconds: 1000 * 10
} }
}, },
// mounted() { mounted() {
// // this.$router.push({ this.$router.push({
// // name: this.routes[this.cur] name: this.routes[this.cur]
// // }) })
// // this.setTimer() this.setTimer()
// // document.body.addEventListener('mousemove', this.removeTimer) document.body.addEventListener('mousemove', this.removeTimer)
// }, },
// beforeDestroy() { beforeDestroy() {
// clearInterval(this.timer) clearInterval(this.timer)
// }, },
// methods: { methods: {
// setTimer() { setTimer() {
// this.timer = setInterval(() => { this.timer = setInterval(() => {
// this.cur += 1 this.cur += 1
// if (this.cur >= this.routes.length) { if (this.cur >= this.routes.length) {
// this.cur = 0 this.cur = 0
// } }
// this.$router.push({ this.$router.push({
// name: this.routes[this.cur] name: this.routes[this.cur]
// }) })
// }, this.seconds) }, this.seconds)
// }, },
// removeTimer() { removeTimer() {
// clearTimeout(this.timeOuter) clearTimeout(this.timeOuter)
// clearInterval(this.timer) clearInterval(this.timer)
// this.timer = null this.timer = null
// this.timeOuter = setTimeout(this.setTimer, this.seconds / 10) this.timeOuter = setTimeout(this.setTimer, this.seconds / 10)
// }, },
// }, },
// watch: { // watch: {
// $route(to, from) { // $route(to, from) {
// if (to.name && this.cur != this.routes.indexOf(to.name)) { // if (to.name && this.cur != this.routes.indexOf(to.name)) {
......
src/assets/css/reset.styl
View file @ c97e23b3
...@@ -4,10 +4,11 @@ $color-main = #5BD5FF ...@@ -4,10 +4,11 @@ $color-main = #5BD5FF
.ivu-select-selection .ivu-select-selection
.ivu-select-dropdown .ivu-select-dropdown
font-size 0.8rem font-size 0.8rem
background-color rgba(0,0,0,0.2) background-color $color-map(0.8)
border-radius 0 border-radius 0
border 0.1rem solid $color-main border 0.1rem solid $color-main
color $color-main // color $color-main
color #fff
padding 0 padding 0
.ivu-select-arrow .ivu-select-arrow
color $color-main color $color-main
...@@ -15,10 +16,12 @@ $color-main = #5BD5FF ...@@ -15,10 +16,12 @@ $color-main = #5BD5FF
font-size 0.8rem font-size 0.8rem
.ivu-select-item .ivu-select-item
.ivu-dropdown-item .ivu-dropdown-item
font-size 0.8rem !important font-size 1rem !important
text-align center text-align center
color $color-main color #fff
&:hover &:hover
&.ivu-select-item-selected &.ivu-select-item-selected
color #fff color #fff
background $color-main background $color-map(1)
// color $color-main
// background #fff
src/assets/css/variables.styl
View file @ c97e23b3
...@@ -4,7 +4,7 @@ $font-din = DIN, 'Avenir', Helvetica, Arial, sans-serif ...@@ -4,7 +4,7 @@ $font-din = DIN, 'Avenir', Helvetica, Arial, sans-serif
$color-map(opacity = 0.3) $color-map(opacity = 0.3)
rgba(91, 213, 255, opacity) rgba(91, 213, 255, opacity)
$color-green = #71C012 $color-green = #71C012
$gd-layout() $gd-layout(gap = 1rem)
width 100% width 100%
height 100% height 100%
background-size cover background-size cover
...@@ -12,7 +12,7 @@ $gd-layout() ...@@ -12,7 +12,7 @@ $gd-layout()
background-color #061627 background-color #061627
position relative position relative
display grid display grid
grid-gap 1rem grid-gap gap
padding 1rem padding 1rem
......
src/views/china-farming.vue
View file @ c97e23b3
This diff is collapsed.
src/views/china-fishing.vue
View file @ c97e23b3
This diff is collapsed.
src/views/components/area-card.vue
View file @ c97e23b3
...@@ -3,14 +3,17 @@ ...@@ -3,14 +3,17 @@
<template v-if="list && list.length > 0"> <template v-if="list && list.length > 0">
<div v-for="(item, index) in list" :key="item.name"> <div v-for="(item, index) in list" :key="item.name">
<div :class="`area-card ${index === curIndex ? 'on' : ''}`" @click="handleSelect(index)"> <div :class="`area-card ${index === curIndex ? 'on' : ''}`" @click="handleSelect(index)">
<i-circle :trail-color="switchColor(item.value).trail" :stroke-color="switchColor(item.value).stroke" :percent="item.value" :size="size"> <i-circle v-if="mode == 1" :trail-color="switchColor(calcPercent(item)).trail" :stroke-color="switchColor(calcPercent(item)).stroke" :percent="calcPercent(item)" :size="size">
<span style="font-size:0.8rem">{{item.value | pipe}}</span> <span style="font-size:0.8rem;">{{calcPercent(item) | pipe}}</span>
</i-circle>
<i-circle v-if="mode == 2" :trail-color="switchColor(calcPercent2(item).value).trail" :stroke-color="switchColor(calcPercent2(item).value).stroke" :percent="item.value" :size="size">
<span :style="`font-size:0.8rem;color:${calcPercent2(item).isUp ? '#B4EC51' : 'red'}`">{{calcPercent2(item).value | pipe}}</span>
</i-circle> </i-circle>
<div> <div>
<p>{{item.name}}</p> <p>{{item.name}}</p>
<p v-if="item.output"><b><m-count :value="item.output"/></b><i>万元</i></p> <p v-if="mode == 1"><b><m-count :value="item.area" :decimal="0"/></b><i>公顷</i></p>
<p v-if="item.area"><b><m-count :value="item.area" :decimal="0"/></b><i>公顷</i></p> <p v-if="mode == 1"><b><m-count :value="item.farm" :decimal="0"/></b>/<b><m-count :value="item.water" :decimal="0"/></b><i>吨</i></p>
<p v-if="item.water || item.farm"><b><m-count :value="item.water" :decimal="0"/></b> / <b><m-count :value="item.farm" :decimal="0"/></b><i>吨</i></p> <p v-if="mode == 2"><b><m-count :value="item.output"/></b><i>万元</i></p>
</div> </div>
</div> </div>
</div> </div>
...@@ -27,7 +30,11 @@ export default { ...@@ -27,7 +30,11 @@ export default {
default() { default() {
return [] return []
} }
} },
mode: {
type: [String, Number],
default: '1',
},
}, },
data() { data() {
return { return {
...@@ -43,33 +50,44 @@ export default { ...@@ -43,33 +50,44 @@ export default {
} }
this.$emit('select', this.curIndex) this.$emit('select', this.curIndex)
}, },
calcPercent({farm, water}) {
return Number(((farm / water) * 100).toFixed(1))
},
calcPercent2({output, secondaryOutput}) {
const max = Math.max.apply(null, [output, secondaryOutput])
const min = Math.min.apply(null, [output, secondaryOutput])
return {
value: Number(((max - min) * 100 / (secondaryOutput || 1)).toFixed(1)),
isUp: output >= secondaryOutput,
}
},
switchColor(val) { switchColor(val) {
if (val <= 20) { if (val <= 5) {
return { return {
stroke: '#DBF6FF', stroke: '#DBF6FF',
trail: '#85CDFF', trail: '#85CDFF',
} }
} else if (val <= 35) { } else if (val <= 10) {
return { return {
stroke: '#5BD5FF', stroke: '#5BD5FF',
trail: '#0076FF', trail: '#0076FF',
} }
} else if (val <= 50) { } else if (val <= 15) {
return { return {
stroke: '#8ED617', stroke: '#8ED617',
trail: '#3F772F', trail: '#3F772F',
} }
} else if (val <= 65) { } else if (val <= 20) {
return { return {
stroke: '#FFCE34', stroke: '#FFCE34',
trail: '#E06536', trail: '#E06536',
} }
} else if (val <= 80) { } else if (val <= 25) {
return { return {
stroke: '#FF6161', stroke: '#FF6161',
trail: '#A02929', trail: '#A02929',
} }
} else if (val <= 100) { } else if (val <= 30) {
return { return {
stroke: '#8623EB', stroke: '#8623EB',
trail: '#C691FF', trail: '#C691FF',
...@@ -80,12 +98,13 @@ export default { ...@@ -80,12 +98,13 @@ export default {
trail: '#C691FF', trail: '#C691FF',
} }
} }
} },
}, },
filters: { filters: {
pipe(val) { pipe(val) {
const result = val > 100 ? 100 : val const result = val > 100 ? 100 : val
return `${result}%` // return `${result}%`
return result
} }
}, },
computed: { computed: {
......
src/views/components/map.vue
View file @ c97e23b3
...@@ -101,11 +101,13 @@ export default { ...@@ -101,11 +101,13 @@ export default {
itemStyle: { itemStyle: {
normal: { normal: {
areaColor: 'rgba(0, 191, 255, 0.1)', areaColor: 'rgba(0, 191, 255, 0.1)',
borderColor: 'rgba(0, 191, 255, 0.6)', borderColor: 'rgba(0, 191, 255, 0.9)',
borderWidth: 0.4, borderWidth: 0.4,
}, },
emphasis: { emphasis: {
areaColor: '#5ad4ff', // areaColor: '#5ad4ff',
areaColor: 'rgba(0, 191, 255, 0.9)',
// areaColor: 'rgba(91, 213, 255, 0.9)',
color: '#fff' color: '#fff'
} }
}, },
...@@ -145,7 +147,6 @@ export default { ...@@ -145,7 +147,6 @@ export default {
selected: true, selected: true,
itemStyle: { itemStyle: {
areaColor: '#5ad4ff', areaColor: '#5ad4ff',
color: 'red',
shadowColor: 'rgba(0, 0, 0, 1)', shadowColor: 'rgba(0, 0, 0, 1)',
shadowBlur: 10, shadowBlur: 10,
shadowOffsetY: 10, shadowOffsetY: 10,
...@@ -176,7 +177,7 @@ export default { ...@@ -176,7 +177,7 @@ export default {
show: false, show: false,
inRange: { inRange: {
opacity: 0.5, opacity: 0.5,
color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.6)'] color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.8)']
} }
}, this.visualConfig) }, this.visualConfig)
this.map.setOption(this.config) this.map.setOption(this.config)
...@@ -203,5 +204,5 @@ export default { ...@@ -203,5 +204,5 @@ export default {
.bar .bar
width 2rem width 2rem
height 6rem height 6rem
background linear-gradient(to bottom, rgba(91, 213, 255, 0.6), rgba(91, 213, 255, 0.1)) background linear-gradient(to bottom, rgba(91, 213, 255, 0.8), rgba(91, 213, 255, 0.1))
</style> </style>
src/views/components/year-selector.vue 0 → 100644
View file @ c97e23b3
<template>
<div class="year-select">
<Dropdown @on-click="handleChange($event, 'primaryYear')">
<p>
主显示
<span class="year">
{{primaryYear}}
<Icon type="md-arrow-dropdown"></Icon>
</span>
</p>
<DropdownMenu slot="list">
<DropdownItem :class="year == primaryYear ? 'ivu-select-item-selected' : ''" v-for="year in years" :key="year" :name="year">{{year}}</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown @on-click="handleChange($event, 'secondaryYear')">
<p>
对比
<span class="year">
{{secondaryYear}}
<Icon type="md-arrow-dropdown"></Icon>
</span>
</p>
<DropdownMenu slot="list">
<DropdownItem :class="year == secondaryYear ? 'ivu-select-item-selected' : ''" v-for="year in years" :key="year" :name="year">{{year}}</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</template>
<script>
export default {
name: 'YearSelector',
props: {
years: {
type: Array,
default() {
return []
}
},
primaryYear: {
type: [Number, String],
default: 2018,
},
secondaryYear: {
type: [Number, String],
default: 2017,
},
},
methods: {
handleChange(val, type) {
this.$emit('select', val, type)
},
},
}
</script>
<style lang="stylus" scoped>
.year-select
position absolute
z-index 100
top 0
right 1rem
color #fff
>div
margin-left 0.5rem
.year
color $color-map(1)
cursor pointer
font-size 1.6rem
font-weight bold
</style>
static/farming.json 0 → 100644
View file @ c97e23b3
This diff is collapsed.
static/fishing.json 0 → 100644
View file @ c97e23b3
This source diff could not be displayed because it is too large. You can view the blob instead.
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