Skip to content

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

病害防控

parent 9d107014
Show whitespace changes
Inline Side-by-side
Showing with 1458 additions and 82 deletions
src/App.vue
View file @ 95a84f90
<template> <template>
<div id="app"> <div id="app">
<m-loader v-show="$store.state.showLoading"/> <m-loader v-show="$store.state.showLoading"/>
<m-title hideDate hideTime :bgImg="require('@/assets/images/title-bg3.png')"/>
<DiseaseMap />
<router-view :key="$route.fullPath"/> <router-view :key="$route.fullPath"/>
</div> </div>
</template> </template>
<script> <script>
import DiseaseMap from './views/components/disease-map'
export default { export default {
name: 'App', name: 'App',
components: {
DiseaseMap,
}
} }
</script> </script>
<style lang="stylus" scoped>
#app
background url('./assets/images/bg.png') no-repeat
background-size 110%
background-position 90% -50%
</style>
<style lang="stylus"> <style lang="stylus">
@import './assets/css/reset.styl' @import './assets/css/reset.styl'
@font-face @font-face
font-family DIN font-family DIN
src url(./assets/font/DIN-Medium.otf) src url(./assets/font/DIN-Medium.otf)
// @font-face @font-face
// font-family Microsoft YaHei UI font-family Microsoft YaHei UI
// src url(./assets/font/Microsoft-YaHei-UI-Bold.ttf) src url(./assets/font/Hei.ttf)
@font-face @font-face
font-family Pangmenzhengdao font-family Pangmenzhengdao
src url(./assets/font/pangmenzhengdao.ttf) src url(./assets/font/pangmenzhengdao.ttf)
html, body html, body
background-color #000 !important background-color #000 !important
width 100% width 100%
height 100% height 100vh
overflow hidden
user-select none user-select none
#app #app
font-family DIN, 'Avenir', Helvetica, Arial, sans-serif font-family Microsoft YaHei UI, DIN, 'Avenir', Helvetica, Arial, sans-serif
-webkit-font-smoothing antialiased -webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale -moz-osx-font-smoothing grayscale
width 100% width 100%
height 100% height 100%
font-size 1rem font-size 1rem
overflow: hidden overflow: hidden
color #ccc color #fff
user-select none
/* 设置滚动条的样式 */ /* 设置滚动条的样式 */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0.5rem; width: 0.5rem;
......
src/assets/css/reset.styl
View file @ 95a84f90
...@@ -12,9 +12,9 @@ $color-main = #5BD5FF ...@@ -12,9 +12,9 @@ $color-main = #5BD5FF
height 100% height 100%
.ivu-select-selected-value .ivu-select-selected-value
height 100% height 100%
font-size 1rem font-size .8rem
font-weight bold // font-weight bold
line-height 2 line-height 1.5
.ivu-select-selection .ivu-select-selection
.ivu-select-dropdown .ivu-select-dropdown
font-size 1rem font-size 1rem
...@@ -28,11 +28,11 @@ $color-main = #5BD5FF ...@@ -28,11 +28,11 @@ $color-main = #5BD5FF
$blur() $blur()
.ivu-select-arrow .ivu-select-arrow
color $color-main color $color-main
line-height 2 line-height 1.5
font-size 1rem font-size .8rem
.ivu-select-item .ivu-select-item
.ivu-dropdown-item .ivu-dropdown-item
font-size 1rem !important font-size .8rem !important
text-align center text-align center
color #fff color #fff
background rgba(0,0,0,0.8) background rgba(0,0,0,0.8)
...@@ -40,3 +40,8 @@ $color-main = #5BD5FF ...@@ -40,3 +40,8 @@ $color-main = #5BD5FF
&.ivu-select-item-selected &.ivu-select-item-selected
color $edgeColor color $edgeColor
font-weight bold font-weight bold
.custom-select
position absolute
top 1rem
right 1rem
width 7rem
src/assets/images/bg.png 0 → 100644
View file @ 95a84f90
This diff is collapsed.
src/components/MonitorComponents/MonitorCard/mode1.vue
View file @ 95a84f90
<template> <template>
<div class="card-wrapper"> <div class="card-wrapper" :style="`background-image:url(${require('@/assets/images/card-bg.png')})`">
<div class="card-title" :style="`color:${color}`"> <div class="card-title" :style="`color:${color}`">
<img src="@/assets/images/arrow.png"/>
{{title}} {{title}}
<div class="dot"/> <img src="@/assets/images/arrow.png" style="transform:rotate(180deg)"/>
<div class="line"/>
</div> </div>
<div class="card-content"> <div class="card-content">
<slot /> <slot />
...@@ -28,24 +28,18 @@ export default { ...@@ -28,24 +28,18 @@ export default {
<style lang="stylus" scoped> <style lang="stylus" scoped>
.card-wrapper .card-wrapper
background $cardBg background-size cover
border-right 0.2rem solid $edgeColor
.card-title .card-title
display flex display flex
align-items center align-items center
color $cardFontColor justify-content space-around
font-size 1.4rem color $edgeColor
font-family $font-pang font-size 1.2rem
.dot font-weight bold
width 0.4rem width 50%
height 1rem margin .5rem auto
background $edgeColor img
margin 0 0.5rem width 1rem
.line // .card-content
height 1px // padding 0.5rem 1rem
flex 1
background $edgeColor
opacity 0.3
.card-content
padding 0.5rem 1rem
</style> </style>
src/components/MonitorComponents/MonitorChart/monitor-chart.vue
View file @ 95a84f90
...@@ -116,7 +116,7 @@ export default { ...@@ -116,7 +116,7 @@ export default {
Object.assign({}, this.defaultOptions.yAxis, {min: 0, max: y2Max, interval: y2Max / 5}), Object.assign({}, this.defaultOptions.yAxis, {min: 0, max: y2Max, interval: y2Max / 5}),
] ]
} else { } else {
options.yAxis = Object.assign({}, this.defaultOptions.yAxis, yAxis) options.yAxis = Object.assign({}, this.defaultOptions.yAxis, yAxis, this.options.yAxis)
} }
// 如果key在yAxis上则x、y轴对调 // 如果key在yAxis上则x、y轴对调
......
src/components/MonitorComponents/MonitorGrid/monitor-grid.vue
View file @ 95a84f90
...@@ -73,7 +73,7 @@ export default { ...@@ -73,7 +73,7 @@ export default {
height 100% height 100%
background-size cover background-size cover
background-position center background-position center
background-color #061627 // background-color #061627
position relative position relative
display grid display grid
grid-gap 1rem grid-gap 1rem
......
src/components/MonitorComponents/MonitorTitle/monitor-title.vue
View file @ 95a84f90
...@@ -7,7 +7,13 @@ ...@@ -7,7 +7,13 @@
</span> </span>
<span v-if="!hideTime" class="moment time">{{time}}</span> <span v-if="!hideTime" class="moment time">{{time}}</span>
<img :src="bgImg" draggable="false"/> <img :src="bgImg" draggable="false"/>
<p :style="style"><slot /></p> <p :style="style">{{menus[curIndex].title}}</p>
<div class="menu menu-left">
<div @click="curIndex = menus.indexOf(item)" v-for="item in menus.slice(0,3)" :key="item.name" :class="`${menus[curIndex].name === item.name ? 'on' : ''}`"><span>{{item.name}}</span></div>
</div>
<div class="menu menu-right">
<div @click="curIndex = menus.indexOf(item)" v-for="item in menus.slice(3)" :key="item.name" :class="`${menus[curIndex].name === item.name ? 'on' : ''}`"><span>{{item.name}}</span></div>
</div>
</div> </div>
</template> </template>
...@@ -35,7 +41,7 @@ export default { ...@@ -35,7 +41,7 @@ export default {
}, },
size: { size: {
type: String, type: String,
default: '2.8rem', default: '1.4rem',
}, },
}, },
data() { data() {
...@@ -44,6 +50,15 @@ export default { ...@@ -44,6 +50,15 @@ export default {
timer: null, timer: null,
time: null, time: null,
style: {}, style: {},
curIndex: 0,
menus: [
{name: '病害防控', title: '病害防控大数据管理与服务平台'},
{name: '质量安全'},
{name: '稻鱼种养'},
{name: '海洋牧场'},
{name: '水产价格', title: '水产品价格分析驾驶舱'},
{name: '苗种数据'},
],
} }
}, },
mounted() { mounted() {
...@@ -54,9 +69,9 @@ export default { ...@@ -54,9 +69,9 @@ export default {
} }
if (this.color) { if (this.color) {
this.style = { this.style = {
'text-shadow': `0 0.2rem 0.4rem ${this.color}`, // 'text-shadow': `0 0.2rem 0.4rem ${this.color}`,
'color': this.color, 'color': this.color,
'background-image': `linear-gradient(to bottom, #fff, ${this.color})` // 'background-image': `linear-gradient(to bottom, #fff, ${this.color})`
} }
} }
this.style = {...this.style, 'font-size': this.size} this.style = {...this.style, 'font-size': this.size}
...@@ -88,6 +103,7 @@ export default { ...@@ -88,6 +103,7 @@ export default {
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
$color = #25e7f6
.monitor-title .monitor-title
display flex display flex
align-items center align-items center
...@@ -95,7 +111,36 @@ export default { ...@@ -95,7 +111,36 @@ export default {
position relative position relative
background-size cover background-size cover
background-position center background-position center
font-family $font-pang // font-family $font-pang
height 4rem
.menu
position absolute
display flex
align-items center
justify-content space-around
color $color
font-weight bold
width 20%
padding-top 1rem
&.menu-left
left 15%
&.menu-right
right 15%
>div
cursor pointer
padding .3rem 1rem
border .1rem solid transparent
box-sizing content-box
transform skew(30deg)
>span
display inline-block
transform skew(-30deg)
&:hover,
&.on
border-color $color
background $color-map()
&.on
color #fff
.moment .moment
z-index 100 z-index 100
position absolute position absolute
...@@ -113,27 +158,13 @@ export default { ...@@ -113,27 +158,13 @@ export default {
transform translateY(-80%) transform translateY(-80%)
img img
position absolute position absolute
width 100% width 120%
height 100% height 100%
top 0 top 0
left 0 left -10%
animation shine 2.5s linear reverse infinite
>p >p
text-shadow 0 0.2rem 0.4rem #25e7f6 color $color
background-clip text z-index 9
-webkit-background-clip text letter-spacing .1rem
color #25e7f6 font-weight bold
-webkit-text-fill-color transparent
background-image linear-gradient(to bottom, #fff, #25e7f6)
@keyframes shine {
0% {
opacity 1
}
50% {
opacity 0.7
}
100% {
opacity 1
}
}
</style> </style>
src/main.js
View file @ 95a84f90
...@@ -5,11 +5,12 @@ import Vue from 'vue' ...@@ -5,11 +5,12 @@ import Vue from 'vue'
import App from './App' import App from './App'
import router from './router' import router from './router'
import store from './store' import store from './store'
import {Row, Col, Select, Option, DatePicker} from 'view-design' import {Row, Col, Select, Option, DatePicker, Icon} from 'view-design'
import ajax from '@/server/ajax' import ajax from '@/server/ajax'
import api from '@/server/api' import api from '@/server/api'
import common from '@/util/common' import common from '@/util/common'
import moment from 'moment' import moment from 'moment'
import echarts from 'echarts'
import MonitorComponents from '@/components/MonitorComponents' import MonitorComponents from '@/components/MonitorComponents'
import 'view-design/dist/styles/iview.css' import 'view-design/dist/styles/iview.css'
import 'moment/locale/zh-cn' import 'moment/locale/zh-cn'
...@@ -20,12 +21,14 @@ Vue.prototype.$ajax = ajax ...@@ -20,12 +21,14 @@ Vue.prototype.$ajax = ajax
Vue.prototype.$api = api Vue.prototype.$api = api
Vue.prototype.$com = common Vue.prototype.$com = common
Vue.prototype.$moment = moment Vue.prototype.$moment = moment
Vue.prototype.$echarts = echarts
Vue.use(MonitorComponents) Vue.use(MonitorComponents)
Vue.component('Row', Row) Vue.component('Row', Row)
Vue.component('i-col', Col) Vue.component('i-col', Col)
Vue.component('Select', Select) Vue.component('Select', Select)
Vue.component('Option', Option) Vue.component('Option', Option)
Vue.component('DatePicker', DatePicker) Vue.component('DatePicker', DatePicker)
Vue.component('Icon', Icon)
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
el: '#app', el: '#app',
......
src/views/components/border-box.vue 0 → 100644
View file @ 95a84f90
<template>
<div class="border-box">
<div class="edge"></div>
<div class="edge"></div>
<div class="edge"></div>
<div class="edge"></div>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'BorderBox',
data() {
return {}
},
}
</script>
<style lang="stylus" scoped>
.border-box
border .1rem solid $color-map(.8)
position relative
padding 1rem 2rem
background-color rgba(0,0,0,.5)
>.edge
width 0
height 0
border .3rem solid $edgeColor
position absolute
&:nth-of-type(1)
top 0
left 0
border-right-color transparent
border-bottom-color transparent
&:nth-of-type(2)
top 0
right 0
border-left-color transparent
border-bottom-color transparent
&:nth-of-type(3)
bottom 0
left 0
border-right-color transparent
border-top-color transparent
&:nth-of-type(4)
bottom 0
right 0
border-left-color transparent
border-top-color transparent
</style>
src/views/components/china-map.vue 0 → 100644
View file @ 95a84f90
<template>
<div class="map-wrapper">
<div id="map" ref="map"/>
<div v-if="data.length > 0" class="visualmap">
<p>{{visualLabel[0]}}</p>
<div class="bar" />
<p>{{visualLabel[1]}}</p>
</div>
</div>
</template>
<script>
import china from 'echarts/map/json/china.json'
const mapData = [
{ name: '北京', value: 177 },
{ name: '天津', value: 42 },
{ name: '河北', value: 102 },
{ name: '山西', value: 81 },
{ name: '内蒙古', value: 17 },
{ name: '辽宁', value: 67 },
{ name: '吉林', value: 182 },
{ name: '黑龙江', value: 100 },
{ name: '上海', value: 24 },
{ name: '江苏', value: 299 },
{ name: '浙江', value: 114 },
{ name: '安徽', value: 29 },
{ name: '福建', value: 316 },
{ name: '江西', value: 91 },
{ name: '山东', value: 19 },
{ name: '河南', value: 137 },
{ name: '湖北', value: 26 },
{ name: '湖南', value: 114 },
{ name: '重庆', value: 91 },
{ name: '四川', value: 25 },
{ name: '贵州', value: 62 },
{ name: '云南', value: 83 },
{ name: '西藏', value: 9 },
{ name: '陕西', value: 80 },
{ name: '甘肃', value: 256 },
{ name: '青海', value: 10 },
{ name: '宁夏', value: 18 },
{ name: '新疆', value: 67 },
{ name: '广东', value: 123 },
{ name: '广西', value: 59 },
{ name: '海南', value: 14 }
]
export default {
name: 'ChinaMap',
props: {
data: {
type: Array,
default() {
return []
}
},
visualLabel: {
type: Array,
default() {
return ['高', '低']
}
},
visualFormatter: {
type: [String, Function],
// default: '{b}<br/>综合种养产量：{c}吨'
default() {
return (e) => {
const {data} = e
return `
<h3>${data.name}</h3>
<p>养殖面积：${data.area || 0}（公顷）</p>
<p>淡水养殖产量：${data.water || 0}（吨）</p>
<p>稻田产量：${data.farm || 0}（吨）</p>
`
}
}
},
visualConfig: {
type: Object,
default() {
return {}
}
},
},
data() {
return {
map: null,
mapName: 'china',
config: {
geo: {
map: 'china',
left: '1%',
right: '1%',
bottom: '3%',
top: 'auto',
zoom: 1, //当前视角的缩放比例
// roam: true, //是否开启平游或缩放
// scaleLimit: { //滚轮缩放的极限控制
// min: 0.8,
// max: 2,
// },
label: {
show: true,
color: '#fff',
fontSize: 12 * this.sizeRate,
// normal: {
// show: false,
// color: '#cfcfcf',
// },
emphasis: {
color: '#fff',
// fontSize: Math.floor(screen.height * 2 / 100),
// fontFamily: 'Pangmenzhengdao',
}
},
itemStyle: {
normal: {
areaColor: 'rgba(0, 191, 255, 0.1)',
borderColor: 'rgba(0, 191, 255, 0.9)',
borderWidth: 0.4,
},
emphasis: {
areaColor: 'rgba(0, 191, 255, 0.9)',
}
},
regions: [],
},
series: []
},
curProvince: null,
}
},
mounted() {
this.$nextTick(this.initMap)
},
computed: {
sizeRate() {
return Number((screen.height / 800).toFixed(1))
},
},
methods: {
initMap() {
// 初始化echarts
this.$echarts.registerMap(this.mapName, china)
this.map = this.$echarts.init(this.$refs.map)
this.map.setOption(this.config)
this.addEvent()
this.config.series.push({
type: 'map',
map: this.mapName,
geoIndex: 0,
data: mapData,
})
this.config.tooltip = {
trigger: 'item',
formatter: this.visualFormatter,
}
this.config.visualMap = Object.assign({
show: false,
inRange: {
opacity: 0.5,
color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.8)']
}
}, this.visualConfig)
this.map.setOption(this.config)
},
addEvent() {
// 监听地图点击事件
this.map.on('click', (ev) => {
const {name} = ev.data
console.log(name)
this.setRegions(name)
this.curProvince = name
this.$emit('select', name)
})
// 点击空白处则取消选中状态
this.map.getZr().on('click', e => {
if (!e.target && this.curProvince) {
const name = this.curProvince
this.setRegions(null)
this.$emit('select', name)
}
})
},
setRegions(name) {
this.curProvince = name
if (!name) {
this.config.geo.regions = []
this.map.setOption(this.config)
return
}
let regions = [{
name,
selected: true,
itemStyle: {
areaColor: '#5ad4ff',
shadowColor: 'rgba(0, 0, 0, 1)',
shadowBlur: 10,
shadowOffsetY: 10,
shadowOffsetX: -5,
}
}]
if (this.config.geo.regions.length > 0 && this.config.geo.regions[0].name == name) {
regions = []
}
this.config.geo.regions = regions
this.map.setOption(this.config)
},
},
watch: {
data(cur, past) {
if (cur && cur !== past && cur.length > 0) {
this.config.series.push({
type: 'map',
map: this.mapName,
geoIndex: 0,
data: cur,
})
this.config.tooltip = {
trigger: 'item',
formatter: this.visualFormatter,
}
this.config.visualMap = Object.assign({
show: false,
inRange: {
opacity: 0.5,
color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.8)']
}
}, this.visualConfig)
this.map.setOption(this.config)
}
}
}
}
</script>
<style lang="stylus" scoped>
.map-wrapper
width 42%
height 94%
position absolute
#map
width 100%
height 100%
z-index 99
.visualmap
color #fff
position absolute
top 50%
left 5%
text-align center
.bar
width 2rem
height 6rem
background linear-gradient(to bottom, rgba(91, 213, 255, 0.8), rgba(91, 213, 255, 0.1))
</style>
src/views/components/consultation-sum.vue 0 → 100644
View file @ 95a84f90
<template>
<div class="consultation-sum">
<div>
<p>区域会诊统计</p><span>单位：个</span>
<div class="list-wrapper">
<div v-for="(item, index) in areas" :key="item.name">
<p>{{index + 1}}.{{item.name}}</p>
<div class="bar-wrapper"><div :style="`width:${item.rate}%;background-color:${colors[index]}`"></div></div>
<m-count :value="item.count" :decimal="0"/>
</div>
</div>
</div>
<div>
<p>病种会诊统计</p><span>单位：个</span>
<div class="list-wrapper">
<div v-for="(item, index) in areas" :key="item.name">
<p>{{index + 1}}.{{item.name}}</p>
<div class="bar-wrapper"><div :style="`width:${item.rate}%;background-color:${colors[index]}`"></div></div>
<m-count :value="item.count" :decimal="0"/>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ConsultationSum',
data() {
return {
colors: ['#f24044', '#fca53a', '#edcd3c', '#eee53a', '#83dc29', '#1fcea9', '#25add1'],
areas: [
{name: '广东', count: 33240, rate: 90},
{name: '辽宁', count: 23450, rate: 80},
{name: '四川', count: 13423, rate: 70},
{name: '江苏', count: 2342, rate: 60},
{name: '甘肃', count: 2098, rate: 50},
{name: '陕西', count: 1342, rate: 40},
{name: '青海', count: 876, rate: 30},
],
diseases: [
{name: '小瓜虫病', count: 23423, rate: 60},
{name: '出血性腐烂病', count: 21002, rate: 55},
{name: '烂鳍病', count: 14532, rate: 50},
{name: '烂腮病', count: 9834, rate: 45},
{name: '棉口病', count: 8723, rate: 40},
{name: '水霉病', count: 6789, rate: 30},
{name: '锚头虱病', count: 345, rate: 20},
],
}
},
}
</script>
<style lang="stylus" scoped>
.consultation-sum
width 100%
height 100%
overflow hidden
display flex
>div
flex 1
padding-right .5rem
>p
color $edgeColor
font-weight bold
>span
display block
text-align right
font-size .9rem
.list-wrapper
height 80%
overflow-y auto
padding-right .5rem
>div
display flex
align-items center
justify-content space-between
line-height 1.8
.bar-wrapper
flex 1
margin 0 .5rem
>div
height .5rem
border-radius .5rem
</style>
src/views/components/disease-forecast.vue 0 → 100644
View file @ 95a84f90
<template>
<div class="disease-forecast">
<div class="chart" ref="chart" />
<Select class="custom-select" v-model="type">
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'DiseaseForecast',
data() {
return {
type: '小龙虾',
options: ['小龙虾'],
chart: null,
option: {
tooltip: {
trigger: 'axis',
},
grid: {
top: '15%',
left: '5%',
right: '5%',
bottom: '10%',
width: 'auto',
height: 'auto',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.1)'
}
},
axisLabel: {
textStyle: {
color: '#ccc',
},
fontSize: this.fontSize,
},
data: ['2014', '2015', '2016', '2017', '2018', '2019', '2020'],
},
yAxis: {
type: 'value',
// name: '单位：个',
max: 500,
min: 0,
interval: 100,
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#fff',
},
fontSize: this.fontSize,
},
nameTextStyle: {
color: '#ccc',
fontSize: this.fontSize,
},
splitLine: {
lineStyle: {
color: 'rgba(91,213,255,0.1)'
}
},
},
series: [
{itemStyle: {color: 'gold'}, areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: 'rgba(255,215,0,0.8)'},
{offset: 1, color: 'rgba(255,215,0,0.1)'}
])},
smooth: true, type: 'line', data: [300, 280, 400, 380, 360, 320, 300]},
],
dataZoom: [{
start: 10,
end: 80,
backgroundColor: '#105179',
fillerColor: '#46b9ef',
borderColor: 'transparent',
bottom: '2%',
height: 10,
borderRadius: 10,
handleSize: '200%',
handleStyle: {
color: '#fff',
},
textStyle: {
color: '#fff',
},
}],
}
}
},
mounted() {
this.$nextTick(this.init)
},
computed: {
fontSize() {
return Math.floor(screen.height * 1.48 / 100)
},
},
methods: {
init() {
this.chart = this.$echarts.init(this.$refs.chart)
this.chart.setOption(this.option)
}
}
}
</script>
<style lang="stylus" scoped>
.disease-forecast
width 100%
height 100%
>.chart
width 100%
height 70%
</style>
src/views/components/disease-map.vue 0 → 100644
View file @ 95a84f90
<template>
<div class="map-wrapper">
<div id="map" ref="map"/>
</div>
</template>
<script>
import china from 'echarts/map/json/china.json'
const mapData = [
{name: '海门', value: [121.15, 31.89, 90]},
{name: '鄂尔多斯', value: [109.781327, 39.608266, 120]},
{name: '招远', value: [120.38, 37.35, 142]},
{name: '舟山', value: [122.207216, 29.985295, 123]},
// { name: '北京', value: 177 },
// { name: '天津', value: 42 },
// { name: '河北', value: 102 },
// { name: '山西', value: 81 },
// { name: '内蒙古', value: 17 },
// { name: '辽宁', value: 67 },
// { name: '吉林', value: 182 },
// { name: '黑龙江', value: 100 },
// { name: '上海', value: 24 },
// { name: '江苏', value: 299 },
// { name: '浙江', value: 114 },
// { name: '安徽', value: 29 },
// { name: '福建', value: 316 },
// { name: '江西', value: 91 },
// { name: '山东', value: 19 },
// { name: '河南', value: 137 },
// { name: '湖北', value: 26 },
// { name: '湖南', value: 114 },
// { name: '重庆', value: 91 },
// { name: '四川', value: 25 },
// { name: '贵州', value: 62 },
// { name: '云南', value: 83 },
// { name: '西藏', value: 9 },
// { name: '陕西', value: 80 },
// { name: '甘肃', value: 256 },
// { name: '青海', value: 10 },
// { name: '宁夏', value: 18 },
// { name: '新疆', value: 67 },
// { name: '广东', value: 123 },
// { name: '广西', value: 59 },
// { name: '海南', value: 14 }
]
export default {
name: 'DiseaseMap',
props: {
data: {
type: Array,
default() {
return []
}
},
visualLabel: {
type: Array,
default() {
return ['高', '低']
}
},
visualFormatter: {
type: [String, Function],
// default: '{b}<br/>综合种养产量：{c}吨'
default() {
return () => {
// const {data} = e
return `
<div class="disease-map-tooltip-info">
<h3>养殖场名称</h3>
<p><span>联系人：</span>陆建平</p>
<p><span>联系电话：</span>15623547899</p>
<p><span>地址：</span>苏州市吴中区金庭镇</p>
<p><span>监测点类型：</span>成鱼、虾、蟹、贝等养殖场</p>
<p><span>养殖品种：</span>中华绒螯蟹（河蟹）</p>
</div>
`
// return `
// <h3>${data.name}</h3>
// <p>养殖面积：${data.area || 0}（公顷）</p>
// <p>淡水养殖产量：${data.water || 0}（吨）</p>
// <p>稻田产量：${data.farm || 0}（吨）</p>
// `
}
}
},
visualConfig: {
type: Object,
default() {
return {}
}
},
},
data() {
return {
map: null,
mapName: 'china',
config: {
geo: {
map: 'china',
left: '1%',
right: '1%',
bottom: '3%',
top: 'auto',
zoom: 1, //当前视角的缩放比例
// roam: true, //是否开启平游或缩放
// scaleLimit: { //滚轮缩放的极限控制
// min: 0.8,
// max: 2,
// },
label: {
show: true,
color: '#fff',
fontSize: 12 * this.sizeRate,
// normal: {
// show: false,
// color: '#cfcfcf',
// },
emphasis: {
color: '#fff',
// fontSize: Math.floor(screen.height * 2 / 100),
// fontFamily: 'Pangmenzhengdao',
}
},
itemStyle: {
normal: {
areaColor: 'rgba(91, 213, 255, 0.2)',
borderColor: 'rgba(91, 213, 255, 0.9)',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(91, 213, 255, 0.2)',
borderColor: 'rgba(91, 213, 255, 0.9)',
}
},
regions: [],
},
series: []
},
curProvince: null,
}
},
mounted() {
this.$nextTick(this.initMap)
},
computed: {
sizeRate() {
return Number((screen.height / 800).toFixed(1))
},
},
methods: {
initMap() {
// 初始化echarts
this.$echarts.registerMap(this.mapName, china)
this.map = this.$echarts.init(this.$refs.map)
// this.addEvent()
this.config.series.push({
type: 'scatter', // series图表类型
coordinateSystem: 'geo', // series坐标系类型
data: mapData,
itemStyle: {
color: 'gold'
},
symbolSize: 20 * this.sizeRate,
symbol: 'pin',
})
this.config.tooltip = {
trigger: 'item',
formatter: this.visualFormatter,
// extraCssText: `background-image:url(${require('@/assets/images/tooltip.png')});background-size:cover;`,
}
this.map.setOption(this.config)
},
addEvent() {
// 监听地图点击事件
this.map.on('click', (ev) => {
const {name} = ev.data
console.log(name)
this.setRegions(name)
this.curProvince = name
this.$emit('select', name)
})
// 点击空白处则取消选中状态
this.map.getZr().on('click', e => {
if (!e.target && this.curProvince) {
const name = this.curProvince
this.setRegions(null)
this.$emit('select', name)
}
})
},
setRegions(name) {
this.curProvince = name
if (!name) {
this.config.geo.regions = []
this.map.setOption(this.config)
return
}
let regions = [{
name,
selected: true,
itemStyle: {
areaColor: '#5ad4ff',
shadowColor: 'rgba(0, 0, 0, 1)',
shadowBlur: 10,
shadowOffsetY: 10,
shadowOffsetX: -5,
}
}]
if (this.config.geo.regions.length > 0 && this.config.geo.regions[0].name == name) {
regions = []
}
this.config.geo.regions = regions
this.map.setOption(this.config)
},
},
// watch: {
// data(cur, past) {
// if (cur && cur !== past && cur.length > 0) {
// this.config.series.push({
// type: 'scatter',
// coordinateSystem: 'geo',
// // map: this.mapName,
// // geoIndex: 0,
// data: cur,
// })
// this.config.tooltip = {
// trigger: 'item',
// formatter: this.visualFormatter,
// }
// // this.config.visualMap = Object.assign({
// // show: false,
// // inRange: {
// // opacity: 0.5,
// // color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.8)']
// // }
// // }, this.visualConfig)
// this.map.setOption(this.config)
// }
// }
// }
}
</script>
<style lang="stylus" scoped>
.map-wrapper
width 42%
height 94%
position absolute
#map
width 100%
height 100%
z-index 99
</style>
<style lang="stylus">
.disease-map-tooltip-info
color $edgeColor
padding 1rem
border .1rem solid $edgeColor
span
color #fff
</style>
src/views/components/disease-sum.vue 0 → 100644
View file @ 95a84f90
<template>
<div class="disease-summary">
<div class="btn-wrapper">
<div v-for="btn in btns" :key="btn" @click="handleSelect(btn)" :class="`${btn === curBtn ? 'on' : ''}`">{{btn}}</div>
</div>
<div class="card-box">
<BorderBox>
<h3>远程诊断</h3>
<div class="wrapper">
<div v-for="item in long" :key="item.title">
<p>{{item.title}}</p>
<m-count class="count" :value="item.count" :decimal="0" color="#00f2ff"/>
</div>
</div>
</BorderBox>
<BorderBox>
<h3>专项检测</h3>
<div class="wrapper">
<div v-for="item in special" :key="item.title">
<p>{{item.title}}</p>
<m-count class="count" :value="item.count" :decimal="0" color="#00f2ff"/>
</div>
</div>
</BorderBox>
<BorderBox>
<h3>病情测报</h3>
<div class="wrapper">
<div v-for="item in disease" :key="item.title">
<p>{{item.title}}</p>
<m-count class="count" :value="item.count" :decimal="0" color="#00f2ff"/>
</div>
</div>
</BorderBox>
</div>
</div>
</template>
<script>
import BorderBox from './border-box'
export default {
name: 'DiseaseSum',
components: {
BorderBox,
},
data() {
return {
curBtn: '测报点',
btns: ['测报点', '鱼病医院'],
long: [
{'title': '年诊量', count: 568},
{'title': '当日诊断', count: 365},
{'title': '在线人数', count: 9852},
],
special: [
{'title': '年采样量', count: 235},
{'title': '年检测量', count: 587},
{'title': '阳性数量', count: 787},
],
disease: [
{'title': '年上报量', count: 25487},
{'title': '年发病上报量', count: 9852},
],
}
},
methods: {
handleSelect(name) {
this.curBtn = name
},
}
}
</script>
<style lang="stylus" scoped>
$color = #25e7f6
.disease-summary
width 100%
height 100%
z-index 999
.btn-wrapper
width 50%
margin 0 auto
display flex
align-items center
justify-content center
color #fff
>div
cursor pointer
padding .3rem 1rem
border .1rem solid $color
width 7rem
text-align center
&:first-child
border-radius 1.5rem 0 0 0
border-right none
&:last-child
border-radius 0 1.5rem 0 0
&:hover,
&.on
color #fff
background $color-map()
&.on
color $color
font-weight bold
.card-box
display flex
flex-wrap wrap
text-align center
h3
margin-bottom .5rem
.count
font-family $font-pang
font-size 1.4rem !important
>div
flex 0 0 45%
margin 1rem
.wrapper
display flex
justify-content space-between
</style>
src/views/components/disease.vue 0 → 100644
View file @ 95a84f90
<template>
<div class="disease">
<p>预警指标：预报，问诊，用药，天气情况</p>
<Select v-model="type" class="custom-select" size="small">
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select>
<div class="map" ref="map" />
</div>
</template>
<script>
import china from 'echarts/map/json/china.json'
const mapData = [
{ name: '北京', value: 177 },
{ name: '天津', value: 42 },
{ name: '河北', value: 102 },
{ name: '山西', value: 81 },
{ name: '内蒙古', value: 17 },
{ name: '辽宁', value: 67 },
{ name: '吉林', value: 182 },
{ name: '黑龙江', value: 100 },
{ name: '上海', value: 24 },
{ name: '江苏', value: 299 },
{ name: '浙江', value: 114 },
{ name: '安徽', value: 29 },
{ name: '福建', value: 316 },
{ name: '江西', value: 91 },
{ name: '山东', value: 19 },
{ name: '河南', value: 137 },
{ name: '湖北', value: 26 },
{ name: '湖南', value: 114 },
{ name: '重庆', value: 91 },
{ name: '四川', value: 25 },
{ name: '贵州', value: 62 },
{ name: '云南', value: 83 },
{ name: '西藏', value: 9 },
{ name: '陕西', value: 80 },
{ name: '甘肃', value: 256 },
{ name: '青海', value: 10 },
{ name: '宁夏', value: 18 },
{ name: '新疆', value: 67 },
{ name: '广东', value: 123 },
{ name: '广西', value: 59 },
{ name: '海南', value: 14 }
]
export default {
name: 'Disease',
data() {
return {
mapName: 'china',
map: null,
config: {
geo: {
map: 'china',
left: 0,
top: 0,
bottom: 0,
right: '15%',
zoom: 1,
itemStyle: {
areaColor: 'rgba(0, 191, 255, 0.1)',
borderColor: 'rgba(0, 191, 255, 0.9)',
// borderWidth: 0.1,
}
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c}(单位)'
},
toolbox: {
show: false,
},
visualMap: {
min: 0,
max: 200,
left: 'auto',
right: 0,
realtime: false,
calculable: true,
textStyle: {
color: '#fff',
},
inRange: {
color: ['green', 'yellow', 'red']
}
},
series: [
{
type: 'map',
geoIndex: 0,
map: this.mapName,
data: mapData,
}
],
},
options: [
'小龙虾',
],
type: '小龙虾',
}
},
mounted() {
this.$nextTick(this.init)
},
methods: {
init() {
this.$echarts.registerMap(this.mapName, china)
this.map = this.$echarts.init(this.$refs.map)
this.map.setOption(this.config)
},
}
}
</script>
<style lang="stylus" scoped>
.disease
width 100%
height 100%
.map
width 100%
height 90%
p
text-align center
</style>
src/views/components/questions.vue 0 → 100644
View file @ 95a84f90
<template>
<div class="questions">
<p>
年问答量：<span class="blue"><m-count color="#5bd5ff" :value="12932" :decimal="0"/> 次</span>&nbsp;&nbsp;&nbsp;
月问答量：<span class="blue"><m-count color="#5bd5ff" :value="150" :decimal="0"/> 次</span>
</p>
<div v-for="(item, index) in list" :key="index">
<span>{{item.name}}</span>
<p>问：{{item.question}}</p>
<span>{{item.time}}分钟前</span>
<span class="blue"><Icon type="md-text" /> {{item.reply}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'Questions',
data() {
return {
list: [
{name: '张衡', question: '高温天气草鱼生病是不是养殖密度', time: 2, reply: 2},
{name: '李星辰', question: '与头部和脊背发黑，独游，不吃食物', time: 10, reply: 0},
{name: '王兴鑫', question: '突然提前至夜间10时，浮头次数增多', time: 12, reply: 10},
{name: '周彦', question: '水温12-20℃的时候，鱼种成群打架', time: 14, reply: 4},
],
}
},
}
</script>
<style lang="stylus" scoped>
.questions
width 100%
height 100%
>p
text-align center
>div
display flex
align-items center
justify-content space-around
padding 1rem 0
&+div
border-top .1rem solid $cardFontColor
span
color $edgeColor
display inline-block
&:first-child
width 4rem
&:nth-of-type(2)
width 4.5rem
&:last-child
width 2.5rem
&.blue
color $cardFontColor
p
width 56%
overflow hidden
text-overflow ellipsis
white-space nowrap
</style>
src/views/components/special-monitoring.vue 0 → 100644
View file @ 95a84f90
<template>
<div class="special-monitoring">
<div class="chart" ref="chart" />
<Select class="custom-select" v-model="disease">
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select>
</div>
</template>
<script>
export default {
name: 'SpecialMonitoring',
data() {
return {
disease: '出血性腐烂病',
options: ['出血性腐烂病'],
chart: null,
option: {
tooltip: {
trigger: 'axis',
},
legend: {
width: '100%',
textStyle: {
color: '#ccc',
fontSize: this.fontSize,
},
data: ['阳性监测点数量', '阳性样品数量'],
},
grid: {
top: '15%',
left: '5%',
right: '5%',
bottom: '10%',
width: 'auto',
height: '70%',
containLabel: true,
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.1)'
}
},
axisLabel: {
textStyle: {
color: '#ccc',
},
fontSize: this.fontSize,
},
data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'],
},
yAxis: [
{
type: 'value',
// name: '单位：个',
max: 400,
min: 0,
interval: 100,
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: 'gold',
},
fontSize: this.fontSize,
},
nameTextStyle: {
color: '#ccc',
fontSize: this.fontSize,
},
splitLine: {
lineStyle: {
color: 'rgba(91,213,255,0.1)'
}
},
},
{
type: 'value',
// name: '单位：个',
max: 600,
min: 0,
interval: 150,
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: 'red',
},
fontSize: this.fontSize,
},
nameTextStyle: {
color: '#ccc',
fontSize: this.fontSize,
},
splitLine: {
lineStyle: {
color: 'rgba(91,213,255,0.1)'
}
},
}
],
series: [
{name: '阳性监测点数量', itemStyle: {color: 'gold'}, type: 'line', data: [150, 140, 100, 180, 150, 200, 210, 130]},
{name: '阳性样品数量', itemStyle: {color: 'red'}, yAxisIndex: 1, type: 'line', data: [280, 310, 270, 280, 310, 350, 350, 380, 350]},
],
dataZoom: [{
start: 10,
end: 80,
backgroundColor: '#105179',
fillerColor: '#46b9ef',
borderColor: 'transparent',
bottom: '2%',
height: 10,
borderRadius: 10,
handleSize: '200%',
handleStyle: {
color: '#fff',
},
textStyle: {
color: '#fff',
},
}],
}
}
},
mounted() {
this.$nextTick(this.init)
},
computed: {
fontSize() {
return Math.floor(screen.height * 1.48 / 100)
},
},
methods: {
init() {
this.chart = this.$echarts.init(this.$refs.chart)
this.chart.setOption(this.option)
}
}
}
</script>
<style lang="stylus" scoped>
.special-monitoring
width 100%
height 100%
>.chart
width 100%
height 70%
</style>
src/views/components/team-build.vue 0 → 100644
View file @ 95a84f90
<template>
<div class="team-build">
<div>
<m-chart :data="data" :config="config"/>
</div>
<div>
<m-chart :data="data2" :config="config2" :options="{xAxis: {splitLine: {show: false}}, yAxis: {splitLine: {show: false}}}"/>
</div>
<Select v-model="area" class="custom-select" size="small">
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select>
</div>
</template>
<script>
export default {
name: 'TeamBuild',
data() {
return {
area: '华北地区',
options: ['华北地区'],
config: {
colors: ['#535af1', '#39d655', '#ffd825'],
legend: {
align: 'left',
orient: 'vertical',
},
shape: [
{type: 'pie', radius: [20, 40], roseType: 'radius', center: ['65%', '50%']}
]
},
data: [
{name: '执业人员', value: 50},
{name: '乡村兽医', value: 30},
{name: '官方兽医', value: 20},
],
config2: {
colors: ['#00d2ff'],
legend: {
hide: true,
},
shape: [
{type: 'bar', barWidth: '50%', key: 'value', label: {show: true, position: 'top', color: '#fff'}},
],
xAxis: {
key: 'name',
},
yAxis: {
axisLabel: {show: false},
axisLine: {show: false},
max: 15,
}
},
data2: [
{name: '北京', value: 3},
{name: '天津', value: 4},
{name: '河北', value: 2},
{name: '山西', value: 7},
{name: '内蒙古', value: 10},
],
}
},
}
</script>
<style lang="stylus" scoped>
.team-build
width 100%
height 100%
display flex
>div
flex 1
&:first-child
border-right .1rem solid #175d83
margin-right 1rem
</style>
src/views/main.vue
View file @ 95a84f90
<template> <template>
<m-grid <m-grid
:template="[ :template="[
'title title title', 'summary box1 box2',
'box1 . box4', '. box3 box4',
'box1 . box3', '. box5 box6',
'box2 box2 box3',
]" ]"
columns="1fr 2fr 1fr" columns="1.5fr 1fr 1fr"
rows="4rem 1fr 1fr 1fr" rows="1fr 1fr 1fr"
gap="0.8rem" gap="0.5rem"
style="paddingTop: 0"
> >
<m-map></m-map> <DiseaseSum area="summary"/>
<m-title area="title" hideDate hideTime :bgImg="require('@/assets/images/title-bg.png')">测试专题</m-title> <m-card area="box1" title="病害预警">
<m-card area="box1" title="题目"> <Disease />
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia fugit dicta explicabo blanditiis dolorum ratione aliquid, consequuntur facere ex saepe consectetur! At, accusamus fuga placeat vero soluta facilis odio esse.
</m-card> </m-card>
<m-card area="box2"> <m-card area="box2" title="会诊统计">
box2 <ConsultationSum />
</m-card> </m-card>
<m-card area="box3"> <m-card area="box3" title="队伍建设">
abc <TeamBuild />
</m-card> </m-card>
<m-card area="box4"> <m-card area="box4" title="实时问答">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint pariatur quaerat hic consectetur qui omnis, exercitationem quo, molestias magnam aperiam asperiores non modi officiis quod delectus temporibus iusto necessitatibus quam. <Questions />
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus animi fugiat officiis facere inventore quisquam assumenda aliquid, nulla quam, voluptate possimus. Cum ea possimus mollitia animi nemo at! Totam, porro? </m-card>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus deserunt reiciendis iure ipsum asperiores dicta nostrum veritatis impedit voluptatum ducimus quia, eius incidunt sequi blanditiis, explicabo fuga error perspiciatis a? <m-card area="box5" title="专项监测">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint totam minima et commodi, doloremque veritatis ex, reiciendis nesciunt quaerat eligendi ullam cupiditate deleniti quisquam. Sapiente error commodi iusto accusamus minima. <SpecialMonitoring />
</m-card>
<m-card area="box6" title="疫情测报">
<DiseaseForeCast />
</m-card> </m-card>
</m-grid> </m-grid>
</template> </template>
<script> <script>
import Disease from './components/disease'
import ConsultationSum from './components/consultation-sum'
import TeamBuild from './components/team-build'
import Questions from './components/questions'
import SpecialMonitoring from './components/special-monitoring'
import DiseaseForeCast from './components/disease-forecast'
import DiseaseSum from './components/disease-sum'
export default { export default {
name: 'Main', name: 'Main',
components: {
Disease,
ConsultationSum,
TeamBuild,
Questions,
SpecialMonitoring,
DiseaseForeCast,
DiseaseSum,
},
} }
</script> </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