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>
<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"/>
<!-- </transition> -->
</transition>
</div>
</template>
......@@ -11,42 +11,42 @@ export default {
name: 'App',
data() {
return {
routes: ['home', 'industry', 'special', 'production', 'trade', 'fish', 'disease', 'enterprise', 'flow'],
routes: ['farming', 'fishing'],
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.timer = null
// this.timeOuter = setTimeout(this.setTimer, this.seconds / 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.timer = null
this.timeOuter = setTimeout(this.setTimer, this.seconds / 10)
},
},
// watch: {
// $route(to, from) {
// 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
.ivu-select-selection
.ivu-select-dropdown
font-size 0.8rem
background-color rgba(0,0,0,0.2)
background-color $color-map(0.8)
border-radius 0
border 0.1rem solid $color-main
color $color-main
// color $color-main
color #fff
padding 0
.ivu-select-arrow
color $color-main
......@@ -15,10 +16,12 @@ $color-main = #5BD5FF
font-size 0.8rem
.ivu-select-item
.ivu-dropdown-item
font-size 0.8rem !important
font-size 1rem !important
text-align center
color $color-main
color #fff
&:hover
&.ivu-select-item-selected
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
$color-map(opacity = 0.3)
rgba(91, 213, 255, opacity)
$color-green = #71C012
$gd-layout()
$gd-layout(gap = 1rem)
width 100%
height 100%
background-size cover
......@@ -12,7 +12,7 @@ $gd-layout()
background-color #061627
position relative
display grid
grid-gap 1rem
grid-gap gap
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 @@
<template v-if="list && list.length > 0">
<div v-for="(item, index) in list" :key="item.name">
<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">
<span style="font-size:0.8rem">{{item.value | pipe}}</span>
<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;">{{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>
<div>
<p>{{item.name}}</p>
<p v-if="item.output"><b><m-count :value="item.output"/></b><i>万元</i></p>
<p v-if="item.area"><b><m-count :value="item.area" :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 == 1"><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="mode == 2"><b><m-count :value="item.output"/></b><i>万元</i></p>
</div>
</div>
</div>
......@@ -27,7 +30,11 @@ export default {
default() {
return []
}
}
},
mode: {
type: [String, Number],
default: '1',
},
},
data() {
return {
......@@ -43,33 +50,44 @@ export default {
}
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) {
if (val <= 20) {
if (val <= 5) {
return {
stroke: '#DBF6FF',
trail: '#85CDFF',
}
} else if (val <= 35) {
} else if (val <= 10) {
return {
stroke: '#5BD5FF',
trail: '#0076FF',
}
} else if (val <= 50) {
} else if (val <= 15) {
return {
stroke: '#8ED617',
trail: '#3F772F',
}
} else if (val <= 65) {
} else if (val <= 20) {
return {
stroke: '#FFCE34',
trail: '#E06536',
}
} else if (val <= 80) {
} else if (val <= 25) {
return {
stroke: '#FF6161',
trail: '#A02929',
}
} else if (val <= 100) {
} else if (val <= 30) {
return {
stroke: '#8623EB',
trail: '#C691FF',
......@@ -80,12 +98,13 @@ export default {
trail: '#C691FF',
}
}
}
},
},
filters: {
pipe(val) {
const result = val > 100 ? 100 : val
return `${result}%`
// return `${result}%`
return result
}
},
computed: {
......
src/views/components/map.vue
View file @ c97e23b3
......@@ -101,11 +101,13 @@ export default {
itemStyle: {
normal: {
areaColor: 'rgba(0, 191, 255, 0.1)',
borderColor: 'rgba(0, 191, 255, 0.6)',
borderColor: 'rgba(0, 191, 255, 0.9)',
borderWidth: 0.4,
},
emphasis: {
areaColor: '#5ad4ff',
// areaColor: '#5ad4ff',
areaColor: 'rgba(0, 191, 255, 0.9)',
// areaColor: 'rgba(91, 213, 255, 0.9)',
color: '#fff'
}
},
......@@ -145,7 +147,6 @@ export default {
selected: true,
itemStyle: {
areaColor: '#5ad4ff',
color: 'red',
shadowColor: 'rgba(0, 0, 0, 1)',
shadowBlur: 10,
shadowOffsetY: 10,
......@@ -176,7 +177,7 @@ export default {
show: false,
inRange: {
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.map.setOption(this.config)
......@@ -203,5 +204,5 @@ export default {
.bar
width 2rem
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>
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