Skip to content

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

接入数据

parent 8fa154c9
Hide whitespace changes
Inline Side-by-side
Showing with 23955 additions and 346 deletions
.gitignore
View file @ 9ca238d3
# Logs # Logs
/crawler/
logs logs
*.log *.log
npm-debug.log* npm-debug.log*
......
package-lock.json 0 → 100644
View file @ 9ca238d3
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ 9ca238d3
...@@ -51,6 +51,7 @@ ...@@ -51,6 +51,7 @@
"friendly-errors-webpack-plugin": "^1.6.1", "friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1", "html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2", "node-notifier": "^5.1.2",
"node-xlsx": "^0.15.0",
"optimize-css-assets-webpack-plugin": "^3.2.0", "optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0", "ora": "^1.2.0",
"portfinder": "^1.0.13", "portfinder": "^1.0.13",
......
src/App.vue
View file @ 9ca238d3
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<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')"/> <m-title hideDate hideTime :bgImg="require('@/assets/images/title-bg3.png')"/>
<m-animate enter="fadeInUp" leave="fadeOutDown"> <m-animate enter="zoomIn" leave="zoomOut">
<router-view class="router-view" :key="$route.fullPath"/> <router-view class="router-view" :key="$route.fullPath"/>
</m-animate> </m-animate>
</div> </div>
......
src/assets/css/reset.styl
View file @ 9ca238d3
$color-main = #5BD5FF $color-main = #5BD5FF
#app #html
.date-picker.ivu-date-picker .date-picker.ivu-date-picker
.ivu-select-dropdown .ivu-select-dropdown
margin-top -0.1rem margin-top -0.1rem
......
src/components/MonitorComponents/MonitorScroll/monitor-scroll.vue
View file @ 9ca238d3
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div ref="scrollContent"> <div ref="scrollContent">
<slot /> <slot />
</div> </div>
<div v-if="!isShort" ref="subContent"> <div v-if="!isShort && !isTooLong" ref="subContent">
<slot /> <slot />
</div> </div>
</div> </div>
...@@ -23,7 +23,7 @@ export default { ...@@ -23,7 +23,7 @@ export default {
}, },
duration: { duration: {
type: Number, type: Number,
default: 5000, default: 3000,
}, },
mode: { mode: {
type: [Number, String], type: [Number, String],
...@@ -48,6 +48,9 @@ export default { ...@@ -48,6 +48,9 @@ export default {
computed: { computed: {
isShort() { isShort() {
return this.length <= this.limit return this.length <= this.limit
},
isTooLong() {
return this.length > 120
} }
}, },
methods: { methods: {
...@@ -64,7 +67,7 @@ export default { ...@@ -64,7 +67,7 @@ export default {
} }
}, },
startMode1() { startMode1() {
const {subContent, scrollContent: content} = this.$refs.subContent const {scrollContent: content, subContent} = this.$refs
let height = content.offsetHeight let height = content.offsetHeight
this.timer = setInterval(() => { this.timer = setInterval(() => {
...@@ -78,25 +81,25 @@ export default { ...@@ -78,25 +81,25 @@ export default {
this.index = 0 this.index = 0
} }
content.style.transform = `translateY(${-this.index}px)` content.style.transform = `translateY(${-this.index}px)`
subContent.style.transform = `translateY(${-this.index}px)` subContent ? subContent.style.transform = `translateY(${-this.index}px)` : null
}, 100) }, 50)
}, },
startMode2() { startMode2() {
const {subContent, scrollContent: content} = this.$refs.subContent const {scrollContent: content, subContent} = this.$refs
const len = this.$com.confirm(content, 'children.length', 0) const len = this.$com.confirm(content, 'children.length', 0)
this.timer = setInterval(() => { this.timer = setInterval(() => {
if (this.index < len) { if (this.index < len) {
this.index += 1 this.index += 1
content.style.transition = 'transform 0.5s' content.style.transition = 'transform 0.5s'
subContent.style.transition = 'transform 0.5s' subContent ? subContent.style.transition = 'transform 0.5s' : null
} else { } else {
this.index = 0 this.index = 0
content.style.transition = 'none' content.style.transition = 'none'
subContent.style.transition = 'none' subContent ? subContent.style.transition = 'none' : null
} }
content.style.transform = `translateY(${-this.step * this.index}rem)` content.style.transform = `translateY(${-this.step * this.index}rem)`
subContent.style.transform = `translateY(${-this.step * this.index}rem)` subContent ? subContent.style.transform = `translateY(${-this.step * this.index}rem)` : null
}, this.duration) }, this.duration)
}, },
}, },
...@@ -104,7 +107,7 @@ export default { ...@@ -104,7 +107,7 @@ export default {
length() { length() {
this.clearTimer() this.clearTimer()
this.index = 0 this.index = 0
const {subContent, scrollContent: content} = this.$refs const {scrollContent: content, subContent} = this.$refs
if (content) { if (content) {
content.style.transform = 'translateY(0)' content.style.transform = 'translateY(0)'
} }
......
src/components/MonitorComponents/MonitorTitle/monitor-title.vue
View file @ 9ca238d3
...@@ -41,7 +41,7 @@ export default { ...@@ -41,7 +41,7 @@ export default {
}, },
size: { size: {
type: String, type: String,
default: '1.4rem', default: '1.8rem',
}, },
}, },
data() { data() {
...@@ -52,11 +52,11 @@ export default { ...@@ -52,11 +52,11 @@ export default {
style: {}, style: {},
curIndex: 0, curIndex: 0,
menus: [ menus: [
{name: '病害防控', title: '病害防控大数据管理与服务平台', path: '/disease'}, {name: '病害防控', title: '病害防控大数据', path: '/disease'},
{name: '质量安全'}, {name: '质量安全'},
{name: '稻鱼种养'}, {name: '稻鱼种养'},
{name: '海洋牧场'}, {name: '海洋牧场'},
{name: '水产价格', title: '水产品价格分析驾驶舱', path: '/fishing-price'}, {name: '水产价格', title: '水产品价格分析', path: '/fishing-price'},
{name: '苗种数据'}, {name: '苗种数据'},
], ],
} }
......
src/router/index.js
View file @ 9ca238d3
...@@ -10,7 +10,7 @@ export default new Router({ ...@@ -10,7 +10,7 @@ export default new Router({
routes: [ routes: [
{ {
path: '/', path: '/',
redirect: '/fishing-price', redirect: '/disease',
}, },
{ {
name: 'disease', name: 'disease',
......
src/server/api.js
View file @ 9ca238d3
let BASE_URL = '' let BASE_URL = ''
let FILE_URL = ''
switch (process.env.NODE_ENV) { switch (process.env.NODE_ENV) {
case 'production': case 'production':
BASE_URL = 'product_url' BASE_URL = 'product_url'
FILE_URL = ''
break break
default: default:
BASE_URL = 'default_url' BASE_URL = 'default_url'
FILE_URL = 'http://localhost:8080/static/'
} }
export default { export default {
BASE_URL, BASE_URL,
TEST_URL: '/api/test_url', FILE_URL,
} }
src/store/actions.js
View file @ 9ca238d3
import ajax from '@/server/ajax'
import api from '@/server/api'
// import com from '@/util/common'
export default { export default {
getDiseaseSummary({commit}) {
ajax.get({url: api.FILE_URL + 'disease-summary.json'}).then(res => {
commit('SET_DISEASE_SUM', res)
})
},
getAquafarmPoints({commit}, type) {
if (type === 'hospital') {
ajax.get({url: api.FILE_URL + 'hospital-points.json'}).then(res => {
commit('SET_AQUAFARM_POINTS', res)
})
return
}
ajax.get({url: api.FILE_URL + 'aquafarm-points.json'}).then(res => {
commit('SET_AQUAFARM_POINTS', res)
})
},
getDiseaseWarning({commit}) {
ajax.get({url: api.FILE_URL + 'disease-warning.json'}).then(res => {
commit('SET_DISEASE_WARNING', res)
})
},
} }
src/store/mutations.js
View file @ 9ca238d3
...@@ -5,4 +5,16 @@ export default { ...@@ -5,4 +5,16 @@ export default {
SET_CURDATE(state, date) { SET_CURDATE(state, date) {
state.curDate = date state.curDate = date
}, },
SET_DISEASE_SUM(state, data) {
state.diseaseSummary = data
},
SET_AQUAFARM_POINTS(state, data) {
state.aquafarmPoints = data
},
SET_DISEASE_WARNING(state, data) {
state.diseaseWarning = data
},
SET_MAIN_YEAR(state, year) {
state.mainYear = year
},
} }
src/store/state.js
View file @ 9ca238d3
export default { export default {
showLoading: false, showLoading: false,
curDate: null, curDate: null,
diseaseSummary: [],
aquafarmPoints: [],
diseaseWarning: [],
mainYear: '2019',
} }
src/views/components/consultation-sum.vue
View file @ 9ca238d3
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="list-wrapper"> <div class="list-wrapper">
<div v-for="(item, index) in areas" :key="item.name"> <div v-for="(item, index) in areas" :key="item.name">
<p>{{index + 1}}.{{item.name}}</p> <p>{{index + 1}}.{{item.name}}</p>
<div class="bar-wrapper"><div :style="`width:${item.rate}%;background-color:${colors[index]}`"></div></div> <div class="bar-wrapper"><div :style="`width:${item.rate}%;background-color:${colors[index] || '#25add1'}`"></div></div>
<m-count :value="item.count" :decimal="0"/> <m-count :value="item.count" :decimal="0"/>
</div> </div>
</div> </div>
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<div class="list-wrapper"> <div class="list-wrapper">
<div v-for="(item, index) in areas" :key="item.name"> <div v-for="(item, index) in areas" :key="item.name">
<p>{{index + 1}}.{{item.name}}</p> <p>{{index + 1}}.{{item.name}}</p>
<div class="bar-wrapper"><div :style="`width:${item.rate}%;background-color:${colors[index]}`"></div></div> <div class="bar-wrapper"><div :style="`width:${item.rate}%;background-color:${colors[index] || '#25add1'}`"></div></div>
<m-count :value="item.count" :decimal="0"/> <m-count :value="item.count" :decimal="0"/>
</div> </div>
</div> </div>
...@@ -30,22 +30,35 @@ export default { ...@@ -30,22 +30,35 @@ export default {
return { return {
colors: ['#f24044', '#fca53a', '#edcd3c', '#eee53a', '#83dc29', '#1fcea9', '#25add1'], colors: ['#f24044', '#fca53a', '#edcd3c', '#eee53a', '#83dc29', '#1fcea9', '#25add1'],
areas: [ areas: [
{name: '广东', count: 33240, rate: 90}, {name: '广东省', count: 316, rate: 90},
{name: '辽宁', count: 23450, rate: 80}, {name: '江苏省', count: 254, rate: 80},
{name: '四川', count: 13423, rate: 70}, {name: '天津市', count: 118, rate: 70},
{name: '江苏', count: 2342, rate: 60}, {name: '湖南省', count: 25, rate: 30},
{name: '甘肃', count: 2098, rate: 50}, {name: '江西省', count: 24, rate: 20},
{name: '陕西', count: 1342, rate: 40}, {name: '海南省', count: 19, rate: 10},
{name: '青海', count: 876, rate: 30}, {name: '宁夏回族自治区', count: 9, rate: 10},
{name: '黑龙江省', count: 8, rate: 10},
{name: '湖北省', count: 7, rate: 10},
{name: '安徽省', count: 7, rate: 10},
{name: '河北省', count: 4, rate: 10},
{name: '辽宁省', count: 4, rate: 10},
{name: '广西壮族自治区', count: 3, rate: 5},
{name: '吉林省', count: 2, rate: 5},
{name: '陕西省', count: 2, rate: 5},
{name: '新疆维吾尔自治区', count: 1, rate: 1},
{name: '浙江省', count: 1, rate: 1},
{name: '福建省', count: 1, rate: 1},
{name: '河南省', count: 1, rate: 1},
], ],
diseases: [ diseases: [
{name: '小瓜虫病', count: 23423, rate: 60}, {name: '固着类纤毛虫病', count: 194, rate: 58},
{name: '出血性腐烂病', count: 21002, rate: 55}, {name: '肠炎病', count: 47, rate: 15},
{name: '烂鳍病', count: 14532, rate: 50}, {name: '烂鳃病', count: 21, rate: 8},
{name: '烂腮病', count: 9834, rate: 45}, {name: '非生物引起的黑鳃病', count: 20, rate: 8},
{name: '棉口病', count: 8723, rate: 40}, {name: '小瓜虫病', count: 16, rate: 7},
{name: '水霉病', count: 6789, rate: 30}, {name: '细菌病', count: 14, rate: 6},
{name: '锚头虱病', count: 345, rate: 20}, {name: '车轮虫病', count: 13, rate: 6},
{name: '淡水鱼类细菌性败血症', count: 9, rate: 5},
], ],
} }
}, },
...@@ -70,13 +83,13 @@ export default { ...@@ -70,13 +83,13 @@ export default {
font-size .9rem font-size .9rem
.list-wrapper .list-wrapper
height 80% height 80%
overflow-y auto overflow-y scroll
padding-right .5rem padding-right .5rem
>div >div
display flex display flex
align-items center align-items center
justify-content space-between justify-content space-between
line-height 1.8 line-height 2.5
.bar-wrapper .bar-wrapper
flex 1 flex 1
margin 0 .5rem margin 0 .5rem
......
src/views/components/disease-forecast.vue
View file @ 9ca238d3
<template> <template>
<div class="disease-forecast"> <div class="disease-forecast">
<div class="chart" ref="chart" /> <div class="chart" ref="chart" />
<Select class="custom-select" v-model="type"> <Select class="custom-select" v-model="type" @on-change="setChartData" transfer>
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option> <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select> </Select>
</div> </div>
</template> </template>
<script> <script>
const mock = [
{type: '青鱼', year: '2016', value: 102},
{type: '青鱼', year: '2017', value: 80},
{type: '青鱼', year: '2018', value: 66},
{type: '青鱼', year: '2019', value: 56},
{type: '青鱼', year: '2020', value: 31},
{type: '草鱼', year: '2016', value: 3377},
{type: '草鱼', year: '2017', value: 2902},
{type: '草鱼', year: '2018', value: 2676},
{type: '草鱼', year: '2019', value: 2400},
{type: '草鱼', year: '2020', value: 1442},
{type: '鲢', year: '2016', value: 1019},
{type: '鲢', year: '2017', value: 837},
{type: '鲢', year: '2018', value: 702},
{type: '鲢', year: '2019', value: 618},
{type: '鲢', year: '2020', value: 416},
{type: '鳙', year: '2016', value: 567},
{type: '鳙', year: '2017', value: 454},
{type: '鳙', year: '2018', value: 402},
{type: '鳙', year: '2019', value: 391},
{type: '鳙', year: '2020', value: 258},
{type: '鲤', year: '2016', value: 1130},
{type: '鲤', year: '2017', value: 969},
{type: '鲤', year: '2018', value: 771},
{type: '鲤', year: '2019', value: 638},
{type: '鲤', year: '2020', value: 412},
{type: '黄颡鱼', year: '2016', value: 123},
{type: '黄颡鱼', year: '2017', value: 130},
{type: '黄颡鱼', year: '2018', value: 139},
{type: '黄颡鱼', year: '2019', value: 104},
{type: '黄颡鱼', year: '2020', value: 74},
{type: '乌鳢', year: '2016', value: 129},
{type: '乌鳢', year: '2017', value: 120},
{type: '乌鳢', year: '2018', value: 83},
{type: '乌鳢', year: '2019', value: 121},
{type: '乌鳢', year: '2020', value: 68},
{type: '克氏原螯虾', year: '2016', value: 60},
{type: '克氏原螯虾', year: '2017', value: 42},
{type: '克氏原螯虾', year: '2018', value: 78},
{type: '克氏原螯虾', year: '2019', value: 78},
{type: '克氏原螯虾', year: '2020', value: 76},
{type: '南美白对虾', year: '2016', value: 0},
{type: '南美白对虾', year: '2017', value: 5},
{type: '南美白对虾', year: '2018', value: 4},
{type: '南美白对虾', year: '2019', value: 2},
{type: '南美白对虾', year: '2020', value: 0},
]
import echarts from 'echarts' import echarts from 'echarts'
export default { export default {
name: 'DiseaseForecast', name: 'DiseaseForecast',
data() { data() {
return { return {
type: '小龙虾', type: '青鱼',
options: ['小龙虾'], options: [
'青鱼',
'草鱼',
'鲢',
'鳙',
'鲤',
'黄颡鱼',
'乌鳢',
'克氏原螯虾',
'南美白对虾',
],
chart: null, chart: null,
option: { option: {
tooltip: { tooltip: {
...@@ -43,14 +100,14 @@ export default { ...@@ -43,14 +100,14 @@ export default {
}, },
fontSize: this.fontSize, fontSize: this.fontSize,
}, },
data: ['2014', '2015', '2016', '2017', '2018', '2019', '2020'], data: ['2016', '2017', '2018', '2019', '2020'],
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
// name: '单位：个', // name: '单位：个',
max: 500, max: 500,
min: 0, min: 0,
interval: 100, // interval: 100,
axisLine: { axisLine: {
show: false, show: false,
}, },
...@@ -70,17 +127,10 @@ export default { ...@@ -70,17 +127,10 @@ export default {
} }
}, },
}, },
series: [ 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: [{ dataZoom: [{
start: 10, start: 50,
end: 80, end: 100,
backgroundColor: '#105179', backgroundColor: '#105179',
fillerColor: '#46b9ef', fillerColor: '#46b9ef',
borderColor: 'transparent', borderColor: 'transparent',
...@@ -110,8 +160,24 @@ export default { ...@@ -110,8 +160,24 @@ export default {
methods: { methods: {
init() { init() {
this.chart = this.$echarts.init(this.$refs.chart) this.chart = this.$echarts.init(this.$refs.chart)
this.setChartData(this.type)
},
setChartData(type) {
const list = mock.filter(item => item.type === type).map(item => item.value)
this.option.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: list
},
]
this.option.yAxis = Object.assign(this.option.yAxis, {max: Math.max(...list)})
console.log(this.option)
this.chart.setOption(this.option) this.chart.setOption(this.option)
} },
} }
} }
</script> </script>
......
src/views/components/disease-map.vue
View file @ 9ca238d3
...@@ -6,43 +6,43 @@ ...@@ -6,43 +6,43 @@
<script> <script>
import china from 'echarts/map/json/china.json' import china from 'echarts/map/json/china.json'
const mapData = [ // const mapData = [
{name: '海门', value: [121.15, 31.89, 90]}, // {name: '海门', value: [121.15, 31.89]},
{name: '鄂尔多斯', value: [109.781327, 39.608266, 120]}, // {name: '鄂尔多斯', value: [109.781327, 39.608266]},
{name: '招远', value: [120.38, 37.35, 142]}, // {name: '招远', value: [120.38, 37.35]},
{name: '舟山', value: [122.207216, 29.985295, 123]}, // {name: '舟山', value: [122.207216, 29.985295]},
// { name: '北京', value: 177 }, // // { name: '北京', value: 177 },
// { name: '天津', value: 42 }, // // { name: '天津', value: 42 },
// { name: '河北', value: 102 }, // // { name: '河北', value: 102 },
// { name: '山西', value: 81 }, // // { name: '山西', value: 81 },
// { name: '内蒙古', value: 17 }, // // { name: '内蒙古', value: 17 },
// { name: '辽宁', value: 67 }, // // { name: '辽宁', value: 67 },
// { name: '吉林', value: 182 }, // // { name: '吉林', value: 182 },
// { name: '黑龙江', value: 100 }, // // { name: '黑龙江', value: 100 },
// { name: '上海', value: 24 }, // // { name: '上海', value: 24 },
// { name: '江苏', value: 299 }, // // { name: '江苏', value: 299 },
// { name: '浙江', value: 114 }, // // { name: '浙江', value: 114 },
// { name: '安徽', value: 29 }, // // { name: '安徽', value: 29 },
// { name: '福建', value: 316 }, // // { name: '福建', value: 316 },
// { name: '江西', value: 91 }, // // { name: '江西', value: 91 },
// { name: '山东', value: 19 }, // // { name: '山东', value: 19 },
// { name: '河南', value: 137 }, // // { name: '河南', value: 137 },
// { name: '湖北', value: 26 }, // // { name: '湖北', value: 26 },
// { name: '湖南', value: 114 }, // // { name: '湖南', value: 114 },
// { name: '重庆', value: 91 }, // // { name: '重庆', value: 91 },
// { name: '四川', value: 25 }, // // { name: '四川', value: 25 },
// { name: '贵州', value: 62 }, // // { name: '贵州', value: 62 },
// { name: '云南', value: 83 }, // // { name: '云南', value: 83 },
// { name: '西藏', value: 9 }, // // { name: '西藏', value: 9 },
// { name: '陕西', value: 80 }, // // { name: '陕西', value: 80 },
// { name: '甘肃', value: 256 }, // // { name: '甘肃', value: 256 },
// { name: '青海', value: 10 }, // // { name: '青海', value: 10 },
// { name: '宁夏', value: 18 }, // // { name: '宁夏', value: 18 },
// { name: '新疆', value: 67 }, // // { name: '新疆', value: 67 },
// { name: '广东', value: 123 }, // // { name: '广东', value: 123 },
// { name: '广西', value: 59 }, // // { name: '广西', value: 59 },
// { name: '海南', value: 14 } // // { name: '海南', value: 14 }
] // ]
export default { export default {
name: 'DiseaseMap', name: 'DiseaseMap',
props: { props: {
...@@ -60,26 +60,19 @@ export default { ...@@ -60,26 +60,19 @@ export default {
}, },
visualFormatter: { visualFormatter: {
type: [String, Function], type: [String, Function],
// default: '{b}<br/>综合种养产量：{c}吨'
default() { default() {
return () => { return ({data}) => {
// const {data} = e const {data: info} = data
return ` return `
<div class="disease-map-tooltip-info"> <div class="disease-map-tooltip-info">
<h3>养殖场名称</h3> <h3>${data.name}</h3>
<p><span>联系人：</span>陆建平</p> <p><span>联系人：</span>${info.name}</p>
<p><span>联系电话：</span>15623547899</p> <p><span>联系电话：</span>${info.phone}</p>
<p><span>地址：</span>苏州市吴中区金庭镇</p> <p><span>地址：</span>${info.address}</p>
<p><span>监测点类型：</span>成鱼、虾、蟹、贝等养殖场</p> ${info.type ? `<p><span>监测点类型：</span>${info.type}</p>` : ''}
<p><span>养殖品种：</span>中华绒螯蟹（河蟹）</p> ${info.variety ? `<p><span>养殖品种：</span>${info.variety}</p>` : ''}
</div> </div>
` `
// return `
// <h3>${data.name}</h3>
// <p>养殖面积：${data.area || 0}（公顷）</p>
// <p>淡水养殖产量：${data.water || 0}（吨）</p>
// <p>稻田产量：${data.farm || 0}（吨）</p>
// `
} }
} }
}, },
...@@ -153,16 +146,16 @@ export default { ...@@ -153,16 +146,16 @@ export default {
this.$echarts.registerMap(this.mapName, china) this.$echarts.registerMap(this.mapName, china)
this.map = this.$echarts.init(this.$refs.map) this.map = this.$echarts.init(this.$refs.map)
// this.addEvent() // this.addEvent()
this.config.series.push({ // this.config.series.push({
type: 'scatter', // series图表类型 // type: 'scatter', // series图表类型
coordinateSystem: 'geo', // series坐标系类型 // coordinateSystem: 'geo', // series坐标系类型
data: mapData, // data: mapData,
itemStyle: { // itemStyle: {
color: 'gold' // color: 'gold'
}, // },
symbolSize: 20 * this.sizeRate, // symbolSize: 20 * this.sizeRate,
symbol: 'pin', // symbol: 'pin',
}) // })
this.config.tooltip = { this.config.tooltip = {
trigger: 'item', trigger: 'item',
formatter: this.visualFormatter, formatter: this.visualFormatter,
...@@ -213,31 +206,26 @@ export default { ...@@ -213,31 +206,26 @@ export default {
this.map.setOption(this.config) this.map.setOption(this.config)
}, },
}, },
// watch: { watch: {
// data(cur, past) { '$store.state.aquafarmPoints': {
// if (cur && cur !== past && cur.length > 0) { handler(cur, past) {
// this.config.series.push({ if (cur && cur !== past && cur.length > 0) {
// type: 'scatter', this.config.series = [{
// coordinateSystem: 'geo', type: 'scatter', // series图表类型
// // map: this.mapName, coordinateSystem: 'geo', // series坐标系类型
// // geoIndex: 0, data: cur,
// data: cur, itemStyle: {
// }) color: 'gold'
// this.config.tooltip = { },
// trigger: 'item', symbolSize: 20 * this.sizeRate,
// formatter: this.visualFormatter, symbol: 'pin',
// } }]
// // this.config.visualMap = Object.assign({ this.map && this.map.setOption(this.config)
// // show: false, }
// // inRange: { },
// // opacity: 0.5, immediate: true,
// // color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.8)'] }
// // } }
// // }, this.visualConfig)
// this.map.setOption(this.config)
// }
// }
// }
} }
</script> </script>
......
src/views/components/disease-sum.vue
View file @ 9ca238d3
...@@ -4,34 +4,15 @@ ...@@ -4,34 +4,15 @@
<div v-for="btn in btns" :key="btn" @click="handleSelect(btn)" :class="`${btn === curBtn ? 'on' : ''}`">{{btn}}</div> <div v-for="btn in btns" :key="btn" @click="handleSelect(btn)" :class="`${btn === curBtn ? 'on' : ''}`">{{btn}}</div>
</div> </div>
<div class="card-box"> <div class="card-box">
<BorderBox> <BorderBox v-for="data in $store.state.diseaseSummary" :key="data.title">
<h3>远程诊断</h3> <h3>{{data.title}}</h3>
<div class="wrapper"> <div class="wrapper">
<div v-for="item in long" :key="item.title"> <div v-for="item in data.data" :key="item.title">
<p>{{item.title}}</p> <p>{{item.title}}</p>
<m-count class="count" :value="item.count" :decimal="0" color="#00f2ff"/> <m-count class="count" :value="item.count" :decimal="0" color="#00f2ff"/>
</div> </div>
</div> </div>
</BorderBox> </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>
</div> </div>
</template> </template>
...@@ -47,25 +28,16 @@ export default { ...@@ -47,25 +28,16 @@ export default {
return { return {
curBtn: '测报点', curBtn: '测报点',
btns: ['测报点', '鱼病医院'], 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: { methods: {
handleSelect(name) { handleSelect(name) {
this.curBtn = name this.curBtn = name
if (name === '鱼病医院') {
this.$store.dispatch('getAquafarmPoints', 'hospital')
} else {
this.$store.dispatch('getAquafarmPoints')
}
}, },
} }
} }
......
src/views/components/disease-warning.vue
View file @ 9ca238d3
<template> <template>
<div class="disease-warning"> <div class="disease-warning">
<p>预警指标：预报，问诊，用药，天气情况</p> <p>预警指标：预报，问诊，用药，天气情况</p>
<Select v-model="type" class="custom-select" size="small"> <Select v-model="type" class="custom-select" @on-change="setMapData" size="small" transfer>
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option> <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select> </Select>
<div class="map" ref="map" /> <div class="map" ref="map" />
...@@ -10,41 +10,41 @@ ...@@ -10,41 +10,41 @@
<script> <script>
import china from 'echarts/map/json/china.json' import china from 'echarts/map/json/china.json'
const mapData = [ // const mapData = [
{ name: '北京', value: 177 }, // { name: '北京', value: 177 },
{ name: '天津', value: 42 }, // { name: '天津', value: 42 },
{ name: '河北', value: 102 }, // { name: '河北', value: 102 },
{ name: '山西', value: 81 }, // { name: '山西', value: 81 },
{ name: '内蒙古', value: 17 }, // { name: '内蒙古', value: 17 },
{ name: '辽宁', value: 67 }, // { name: '辽宁', value: 67 },
{ name: '吉林', value: 182 }, // { name: '吉林', value: 182 },
{ name: '黑龙江', value: 100 }, // { name: '黑龙江', value: 100 },
{ name: '上海', value: 24 }, // { name: '上海', value: 24 },
{ name: '江苏', value: 299 }, // { name: '江苏', value: 299 },
{ name: '浙江', value: 114 }, // { name: '浙江', value: 114 },
{ name: '安徽', value: 29 }, // { name: '安徽', value: 29 },
{ name: '福建', value: 316 }, // { name: '福建', value: 316 },
{ name: '江西', value: 91 }, // { name: '江西', value: 91 },
{ name: '山东', value: 19 }, // { name: '山东', value: 19 },
{ name: '河南', value: 137 }, // { name: '河南', value: 137 },
{ name: '湖北', value: 26 }, // { name: '湖北', value: 26 },
{ name: '湖南', value: 114 }, // { name: '湖南', value: 114 },
{ name: '重庆', value: 91 }, // { name: '重庆', value: 91 },
{ name: '四川', value: 25 }, // { name: '四川', value: 25 },
{ name: '贵州', value: 62 }, // { name: '贵州', value: 62 },
{ name: '云南', value: 83 }, // { name: '云南', value: 83 },
{ name: '西藏', value: 9 }, // { name: '西藏', value: 9 },
{ name: '陕西', value: 80 }, // { name: '陕西', value: 80 },
{ name: '甘肃', value: 256 }, // { name: '甘肃', value: 256 },
{ name: '青海', value: 10 }, // { name: '青海', value: 10 },
{ name: '宁夏', value: 18 }, // { name: '宁夏', value: 18 },
{ name: '新疆', value: 67 }, // { name: '新疆', value: 67 },
{ name: '广东', value: 123 }, // { name: '广东', value: 123 },
{ name: '广西', value: 59 }, // { name: '广西', value: 59 },
{ name: '海南', value: 14 } // { name: '海南', value: 14 }
] // ]
export default { export default {
name: 'Disease', name: 'DiseaseWarning',
data() { data() {
return { return {
mapName: 'china', mapName: 'china',
...@@ -65,7 +65,13 @@ export default { ...@@ -65,7 +65,13 @@ export default {
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{b}<br/>{c}(单位)' // formatter: '{b}：{c}'
formatter: ({data}) => {
if (data && data.value) {
return `<div>${data.name}：${data.value}</div>`
}
return null
}
}, },
toolbox: { toolbox: {
show: false, show: false,
...@@ -73,6 +79,7 @@ export default { ...@@ -73,6 +79,7 @@ export default {
visualMap: { visualMap: {
min: 0, min: 0,
max: 200, max: 200,
itemWidth: 10,
left: 'auto', left: 'auto',
right: 0, right: 0,
realtime: false, realtime: false,
...@@ -84,32 +91,64 @@ export default { ...@@ -84,32 +91,64 @@ export default {
color: ['green', 'yellow', 'red'] color: ['green', 'yellow', 'red']
} }
}, },
series: [ series: [],
{
type: 'map',
geoIndex: 0,
map: this.mapName,
data: mapData,
}
],
}, },
options: [ options: [
'小龙虾', '草鱼',
'黄颡鱼',
'克氏原螯虾',
'鲤',
'鲢',
'南美白对虾',
'青鱼',
'乌鳢',
'鳙',
], ],
type: '小龙虾', type: '草鱼',
} }
}, },
mounted() { mounted() {
// this.$nextTick(this.init) // this.$nextTick(this.init)
setTimeout(this.init, 0) setTimeout(this.init, 0)
}, },
computed: {
diseaseWarning() {
return this.$store.state.diseaseWarning
},
},
methods: { methods: {
init() { init() {
this.$echarts.registerMap(this.mapName, china) this.$echarts.registerMap(this.mapName, china)
this.map = this.$echarts.init(this.$refs.map) this.map = this.$echarts.init(this.$refs.map)
this.map.setOption(this.config) this.map.setOption(this.config)
}, },
setMapData(type) {
const list = this.diseaseWarning.filter(item => item.type === type).map(item => {
return {
name: item.province.replace('省', '').replace('市', ''),
value: item.value,
}
})
this.config.series = [{
type: 'map',
geoIndex: 0,
map: this.mapName,
data: list,
}]
this.config.visualMap = Object.assign(this.config.visualMap, {max: Math.max(...list.map(item => item.value))})
this.map && this.map.setOption(this.config)
},
}, },
watch: {
diseaseWarning: {
handler(cur, past) {
if (cur && cur !== past && cur.length > 0) {
this.setMapData(this.type)
}
},
immediate: true
}
}
} }
</script> </script>
......
src/views/components/fishing-price-map.vue
View file @ 9ca238d3
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="map-wrapper"> <div class="map-wrapper">
<BorderBox class="sum"> <BorderBox class="sum">
<p>采集点数量</p> <p>采集点数量</p>
<h2><m-count class="count" :value="6884785" :decimal="0"/> 个</h2> <h2><m-count class="count" :value="80" :decimal="0"/> 个</h2>
</BorderBox> </BorderBox>
<div class="map" ref="map"/> <div class="map" ref="map"/>
<div class="visual-range"> <div class="visual-range">
...@@ -11,9 +11,9 @@ ...@@ -11,9 +11,9 @@
<span>（单位：个）</span> <span>（单位：个）</span>
</p> </p>
<div class="slider-wrapper"> <div class="slider-wrapper">
<Slider class="slider" v-model="range" :step="100" range :max="6884785"/> <Slider class="slider" v-model="range" range :max="80"/>
<m-count class="count" :value="0" :decimal="0"/> <m-count class="count" :value="0" :decimal="0"/>
<m-count class="count" :value="6884785" :decimal="0"/> <m-count class="count" :value="80" :decimal="0"/>
</div> </div>
</div> </div>
</div> </div>
...@@ -22,11 +22,87 @@ ...@@ -22,11 +22,87 @@
<script> <script>
import china from 'echarts/map/json/china.json' import china from 'echarts/map/json/china.json'
import BorderBox from './border-box' import BorderBox from './border-box'
const mapData = [ const mock = [
{name: '海门', value: [121.15, 31.89, 90], visualMap: false}, {name: '浙江新农都物流中心（水产市场）', address: '杭州市石桥路115号', province: '浙江', value: [120.19706700, 30.24639100], visualMap: false, newDate: '2020-08-15'},
{name: '鄂尔多斯', value: [109.781327, 39.608266, 120], visualMap: false}, {name: '厦门市水产品批发市场', address: '厦门市高崎北二路77-87号中埔水产批发市场', province: '福建', value: [118.11368800, 24.55107600], visualMap: false, newDate: '2020-08-15'},
{name: '招远', value: [120.38, 37.35, 142], visualMap: false}, {name: '福建省兴业华洲（福建）农贸市场有限公司', address: '泉州晋江市池店镇仕春工业区新华洲水产市场', province: '福建', value: [118.55729200, 24.86104200], visualMap: false, newDate: '2020-08-15'},
{name: '舟山', value: [122.207216, 29.985295, 123], visualMap: false}, {name: '福建省三明市鲜活水产品批发市场', address: '三明市三元区白沙长安路34号', province: '福建', value: [117.61887900, 26.25029400], visualMap: false, newDate: '2020-08-15'},
{name: '江西省九江鲜活水产品批发市场', address: '九江市庐峰路东端', province: '江西', value: [116.05598000, 29.75385500], visualMap: false, newDate: '2020-08-15'},
{name: '江西南昌市水产品综合交易批发市场', address: '江西省南昌市东湖区富有路9号', province: '江西', value: [115.92204500, 28.71739100], visualMap: false, newDate: '2020-08-15'},
{name: '山东省王尔庄海蜇批发市场', address: '山东省滨州市沾化县富桥路405号', province: '山东', value: [117.94507500, 37.75016700], visualMap: false, newDate: '2020-08-15'},
{name: '山东省临沂市华东淡水鱼批发市场', address: '临沂市北园路6号', province: '山东', value: [118.34964500, 35.15801000], visualMap: false, newDate: '2020-08-15'},
{name: '山东省威海水产品批发市场', address: '山东省威海市环翠区顺河街188号', province: '山东', value: [122.11957200, 37.50407200], visualMap: false, newDate: '2020-08-15'},
{name: '河南省郑州市柳林水产批发市场', address: '郑州市金水区柳林镇郑花路北段柳林水产品批发市场', province: '河南', value: [113.69081200, 34.83705700], visualMap: false, newDate: '2020-08-15'},
{name: '湖北省武汉市白沙洲农副产品大市场', address: '湖北省武汉市洪山区张家湾特1号', province: '湖北', value: [114.27418500, 30.47076800], visualMap: false, newDate: '2020-08-15'},
{name: '湖北省孝感市南大水产品批发市场', address: '孝感市107国道与316国道交合处', province: '湖北', value: [113.97923200, 30.88929600], visualMap: false, newDate: '2020-08-15'},
{name: '湖南洞庭渔都股份有限公司（岳阳洞庭水产批发市场）', address: '岳阳市楼区东风湖路78号', province: '湖南', value: [113.10916800, 29.39883800], visualMap: false, newDate: '2020-08-15'},
{name: '广东省南海盐步环球水产交易市场', address: '佛山市南海区广佛公路平地路段', province: '广东', value: [113.16316200, 23.11600200], visualMap: false, newDate: '2020-08-15'},
{name: '广东省汕头大洋水产交易市场', address: '汕头市海滨路33号', province: '广东', value: [116.71700700, 23.35911200], visualMap: false, newDate: '2020-08-15'},
{name: '东莞市沿江富绅市场经营管理有限公司', address: '东莞市虎门镇沿江东路62号新洲水产品批发市场办公室', province: '广东', value: [113.67847800, 22.81675900], visualMap: false, newDate: '2020-08-15'},
{name: '广州水产集团鱼市场经营管理有限公司', address: '广州市荔湾区芳村招村70亩商业区', province: '广东', value: [113.26457300, 23.14327900], visualMap: false, newDate: '2020-08-15'},
{name: '广东省江门水产（咸鱼）批发市场', address: '江门市江会路70号', province: '广东', value: [113.08075600, 22.56740300], visualMap: false, newDate: '2020-08-15'},
{name: '广西北海市外沙水产品批发市场', address: '广西北海市合浦县廉州镇爱卫街二巷2号', province: '广西', value: [109.21357100, 21.66720800], visualMap: false, newDate: '2020-08-15'},
{name: '四川省内江市水产批发市场', address: '四川省内江市中区牌楼路313号', province: '四川', value: [105.07417600, 29.57049200], visualMap: false, newDate: '2020-08-15'},
{name: '福州名成水产品市场有限公司', address: '福州市马尾区青洲路66号', province: '福建', value: [119.47893300, 25.99550200], visualMap: false, newDate: '2020-08-15'},
{name: '四川成都农产品中心批发市水产分场', address: '成都市西航港成白路98号', province: '四川', value: [104.07537900, 30.70897800], visualMap: false, newDate: '2020-08-15'},
{name: '乌鲁木齐北园春果业经营有限责任公司', address: '新疆乌鲁木齐市沙依巴克区克拉玛依西街1168号北园春农产品批发市场B4-4-1-9号', province: '新疆', value: [87.58357400, 43.82808700], visualMap: false, newDate: '2020-08-15'},
{name: '浙江省温州浙福边贸水产城（苍南）', address: '浙江苍南县城建兴西路608号', province: '浙江', value: [120.38836000, 27.50192500], visualMap: false, newDate: '2020-08-15'},
{name: '山东省青岛市城阳蔬菜水产品批发市场有限公司', address: '青岛城阳区政府308国道西侧山东国际农展中心二楼信息科', province: '山东', value: [120.38249400, 36.30921600], visualMap: false, newDate: '2020-08-15'},
{name: '北京京丰岳各庄农副产品批发市场中心', address: '北京市丰台区西四环中路140号', province: '北京', value: [116.28465800, 39.88338100], visualMap: false, newDate: '2020-08-15'},
{name: '山西太原五龙口海鲜市场', address: '太原市敦化南路49号', province: '山西', value: [112.59758100, 37.88774100], visualMap: false, newDate: '2020-08-15'},
{name: '河北唐山市君瑞联合农贸市场有限公司', address: '河北省唐山市南新东道252号', province: '河北', value: [118.11221200, 39.65745100], visualMap: false, newDate: '2020-08-15'},
{name: '呼和浩特融桥海鲜批发市场', address: '大学东路与展东路路口', province: '内蒙古', value: [111.67110800, 40.83416600], visualMap: false, newDate: '2020-08-15'},
{name: '辽宁省东港黄海水产品市场', address: '东港市东港路98号', province: '辽宁', value: [124.15754500, 39.91121100], visualMap: false, newDate: '2020-08-15'},
{name: '辽宁省盘山县胡家河蟹市场', address: '盘山县胡家镇', province: '辽宁', value: [121.95696200, 41.29536400], visualMap: false, newDate: '2020-08-15'},
{name: '江苏凌家塘市场发展有限公司', address: '江苏省常州市武进区新312国道邹区段西侧', province: '江苏', value: [119.86913300, 31.78283700], visualMap: false, newDate: '2020-08-15'},
{name: '江苏省苏州市南环桥农副产品批发市场', address: '苏州市南环东路南环桥东堍', province: '江苏', value: [120.69496400, 31.26949400], visualMap: false, newDate: '2020-08-15'},
{name: '浙江省中国水产城(象山石浦)', address: '浙江省宁波市象山县石浦镇中国水产城管委会', province: '浙江', value: [121.91634400, 29.19378000], visualMap: false, newDate: '2020-08-15'},
{name: '浙江省慈溪农副产品批发市场', address: '慈溪市白沙街道东外环线东北侧（二楼财务室王群）', province: '浙江', value: [121.29022500, 30.17822100], visualMap: false, newDate: '2020-08-15'},
{name: '浙江省台州市华东水产品交易有限公司', address: '浙江省台州市椒江区工人西路998号（葭芷渔港内）', province: '浙江', value: [121.43639400, 28.68584300], visualMap: false, newDate: '2020-08-15'},
{name: '浙江省瑞安市瑞城水产品市场管理有限公司', address: '浙江省瑞安经济开发区滨江大道860号', province: '浙江', value: [120.65405100, 27.75456700], visualMap: false, newDate: '2020-08-15'},
{name: '大连盛兴水产品交易市场有限公司', address: '辽宁省大连市西岗区沿海街8号', province: '辽宁', value: [121.72472600, 39.02015600], visualMap: false, newDate: '2020-08-15'},
{name: '温州市水产批发交易市场', address: '温州市龙湾区海棠路与滨海四道交叉口西南50米', province: '浙江', value: [120.80459200, 27.83950300], visualMap: false, newDate: '2020-08-15'},
{name: '浙江省中国舟山国际水产城', address: '舟山市普陀区沈家门渔市大街1号5F', province: '浙江', value: [122.29109200, 29.94694100], visualMap: false, newDate: '2020-08-15'},
{name: '安徽省合肥市周谷堆水产品批发市场', address: '安徽省合肥市瑶海区大兴镇', province: '安徽', value: [117.39211600, 31.84919800], visualMap: false, newDate: '2020-08-15'},
{name: '河北省秦皇岛海港区天桥市场', address: '秦皇岛海港区', province: '河北', value: [119.61504900, 39.93687900], visualMap: false, newDate: '2020-08-15'},
{name: '北京大红门京深海鲜批发市场有限公司', address: '北京市丰台区石榴庄西街232号', province: '北京', value: [116.42196000, 39.84838000], visualMap: false, newDate: '2020-08-15'},
{name: '河北省石家庄雨润农产品全球采购有限公司', address: '石家庄南二环大桥', province: '河北', value: [114.50717400, 37.97755600], visualMap: false, newDate: '2020-08-15'},
{name: '辽宁省沈阳水产品批发市场', address: '沈阳水产品', province: '辽宁', value: [123.31391000, 41.78260900], visualMap: false, newDate: '2020-08-15'},
{name: '辽宁省前当堡鲜鱼批发市场', address: ' 无', province: '辽宁', value: [122.88651200, 41.78901000], visualMap: false, newDate: '2020-08-15'},
{name: '吉林省长春市光复路水产批发市场', address: '长春市光复路', province: '吉林', value: [125.34919600, 43.91155900], visualMap: false, newDate: '2020-08-15'},
{name: '吉林省延吉市西市场', address: '吉林省延边朝鲜族自治州延吉市解放路', province: '吉林', value: [129.51478200, 42.91275800], visualMap: false, newDate: '2020-08-15'},
{name: '上海东方国际水产中心经营管理有限公司', address: '上海东方国际水产中心', province: '上海', value: [121.54900500, 31.33938500], visualMap: false, newDate: '2020-08-15'},
{name: '安徽省安庆市皖宜季牛水产养殖有限责任公司长青大市场分公司', address: '安庆市华中路79号', province: '安徽', value: [117.079784, 30.513423], visualMap: false, newDate: '2020-08-15'},
{name: '安徽省蚌埠城南农副产品交易有限公司', address: '安徽省蚌埠', province: '安徽', value: [117.33269200, 32.89946300], visualMap: false, newDate: '2020-08-15'},
{name: '中国供销上饶农产品交易城', address: '江西省上饶市上饶县城南大道11号 ', province: '江西', value: [117.92193300, 28.39829100], visualMap: false, newDate: '2020-08-15'},
{name: '山东济南海鲜大市场', address: '济南市市中区小梁庄街277号', province: '山东', value: [116.99420600, 36.64910600], visualMap: false, newDate: '2020-08-15'},
{name: '长沙市马王堆农产品股份有限公司海鲜水产批发市场', address: '长沙市马王堆农产品股份有限公司', province: '湖南', value: [113.04102400, 28.20187700], visualMap: false, newDate: '2020-08-15'},
{name: '海南马井水产品交易市场管理有限公司', address: '海南马井', province: '海南', value: [109.22729200, 19.72200900], visualMap: false, newDate: '2020-08-15'},
{name: '重庆市乐邦水产品有限公司', address: '重庆沙坪坝区井口街道', province: '重庆', value: [106.48452800, 29.59447400], visualMap: false, newDate: '2020-08-15'},
{name: '重庆市龙门实业（集团）有限公司西三街农副水产品市场', address: '龙门实业（集团）有限公司西三街农副水产品市场', province: '重庆', value: [106.58898500, 29.56126400], visualMap: false, newDate: '2020-08-15'},
{name: '普洱天恒市场经营公司五一市场', address: '普洱天恒市场经营公司五一市场', province: '云南', value: [100.97417100, 22.79145600], visualMap: false, newDate: '2020-08-15'},
{name: '西安海隆实业有限责任公司（北二环水产批发中心）', address: '西安海隆实业有限责任公司（北二环水产批发中心）', province: '陕西', value: [108.95263000, 34.27420400], visualMap: false, newDate: '2020-08-15'},
{name: '甘肃省兰州市绿色食品市场', address: '兰州市绿色食品市场', province: '甘肃', value: [103.88351700, 36.06708900], visualMap: false, newDate: '2020-08-15'},
{name: '江苏省南京市众彩农副产品批发市场', address: '南京市', province: '江苏', value: [118.89382400, 31.99477500], visualMap: false, newDate: '2020-08-15'},
{name: '甘肃陇南市武都区体育场大市场', address: '陇南市武都区体育场', province: '甘肃', value: [104.967414, 33.373396], visualMap: false, newDate: '2020-08-15'},
{name: '白银市白银区文化路市场', address: '白银市白银区文化路', province: '甘肃', value: [104.184824, 36.554399], visualMap: false, newDate: '2020-08-15'},
{name: '张掖市南关蔬菜果品水产品批发市场', address: '张掖市南关饮马桥', province: '甘肃', value: [100.468753, 38.930773], visualMap: false, newDate: '2020-08-15'},
{name: '山东日照市石臼市场', address: '日照市石臼街道石臼路', province: '山东', value: [119.55451100, 35.39756900], visualMap: false, newDate: '2020-08-15'},
{name: '福建省莆田市闽中水产品批发市场', address: ' 福建省莆田市涵江区塘北路西侧', province: '福建', value: [119.11405600, 25.46307200], visualMap: false, newDate: '2020-08-15'},
{name: '攀枝花攀达水产批发市场有限公司', address: '攀枝花市东区银江镇沙坝村马家田', province: '四川', value: [104.07537900, 30.70897800], visualMap: false, newDate: '2020-08-15'},
{name: '重庆市涪陵区新大兴国际农产品批发市场', address: '重庆市涪陵区人民东路后街109号', province: '重庆', value: [107.40430500, 29.71266100], visualMap: false, newDate: '2020-08-15'},
{name: '江西省萍乡市城南水产批发市场', address: '萍乡市环城南路与萍麻公路交汇处', province: '江西', value: [113.85277800, 27.61884100], visualMap: false, newDate: '2020-08-15'},
{name: '上海江杨水产品批发市场经营管理有限公司', address: '上海市宝山区铁城路1555号', province: '上海', value: [121.458468, 31.361636], visualMap: false, newDate: '2020-08-15'},
{name: '湖北中和农产品大市场有限责任公司', address: '仙桃市黄金大道西段55号', province: '湖北', value: [113.41922500, 30.36607300], visualMap: false, newDate: '2020-08-15'},
{name: '湖州菱湖乌板桥水产品批发市场', address: '浙江省湖州市南浔区菱湖镇北桥浜路52号', province: '浙江', value: [120.16171900, 30.78536700], visualMap: false, newDate: '2020-08-15'},
{name: '辽宁省大连辽渔国际水产品市场', address: '辽宁省大连市甘井子区大连湾街8-136号', province: '辽宁', value: [121.70593400, 39.02742000], visualMap: false, newDate: '2020-08-15'},
{name: '广西南宁海陆丰水产品批发市场', address: ' 无', province: '广西', value: [120.65405100, 27.75456700], visualMap: false, newDate: '2020-08-15'},
{name: '云南华潮水产品批发市场', address: ' 无', province: '云南', value: [102.77981500, 24.97897700], visualMap: false, newDate: '2020-08-15'},
{name: '上海江阳水产品批发交易市场经营管理有限公司', address: '上海市宝山区泰和路1700号', province: '上海', value: [121.45575100, 31.36268000], visualMap: false, newDate: '2020-08-15'},
{name: '三亚崖州港湾投资有限公司', address: '海南省三亚市崖州区崖州中心渔港', province: '海南', value: [109.13429200, 18.36210000], visualMap: false, newDate: '2020-08-15'},
{name: '湖北宜昌三峡物流园有限公司水产市场', address: '伍家乡三峡物流园', province: '湖北', value: [11.39861700, 30.66971200], visualMap: false, newDate: '2020-08-15'},
{name: '海南海口水产品批发市场', address: '新埠路8号 ', province: '海南', value: [110.37419400, 20.07357500], visualMap: false, newDate: '2020-08-15'},
{name: '湖北黄冈硕源水产品批发市场', address: ' 无', province: '湖北', value: [114.89112300, 30.43404300], visualMap: false, newDate: '2020-08-15'},
] ]
const provinceData = [ const provinceData = [
{ name: '北京', value: 177 }, { name: '北京', value: 177 },
...@@ -83,14 +159,17 @@ export default { ...@@ -83,14 +159,17 @@ export default {
visualFormatter: { visualFormatter: {
type: [String, Function], type: [String, Function],
default() { default() {
return () => { return ({data}) => {
return ` if (data.name && data.address) {
<div class="disease-map-tooltip-info"> return `
<h3>采集点名称</h3> <div class="disease-map-tooltip-info">
<p><span>地址：</span>苏州市吴中区金庭镇</p> <h3>${data.name}</h3>
<p><span>最新采集时间：</span>2020-08-23 15:57:00</p> <p><span>地址：</span>${data.address}</p>
</div> <p><span>最新采集时间：</span>${data.newDate}</p>
` </div>
`
}
return null
} }
} }
}, },
...@@ -103,7 +182,7 @@ export default { ...@@ -103,7 +182,7 @@ export default {
}, },
data() { data() {
return { return {
range: [0, 6884785], range: [0, 80],
map: null, map: null,
mapName: 'china', mapName: 'china',
config: { config: {
...@@ -171,7 +250,7 @@ export default { ...@@ -171,7 +250,7 @@ export default {
this.config.series.push({ this.config.series.push({
type: 'scatter', // series图表类型 type: 'scatter', // series图表类型
coordinateSystem: 'geo', // series坐标系类型 coordinateSystem: 'geo', // series坐标系类型
data: mapData, data: mock,
itemStyle: { itemStyle: {
color: 'gold' color: 'gold'
}, },
......
src/views/components/new-quotation.vue
View file @ 9ca238d3
<template> <template>
<div> <div class="new-quotation">
<m-table :layout="layout" :model="data" size="0.8rem"/> <Row class="row row-title">
<i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0">
<div :style="`text-align: ${col.align || 'left'}; `">{{col.title}}</div>
</i-col>
</Row>
<m-scroll :length="model.length" :limit="5">
<Row class="row" v-for="(row, rowIndex) in model" :key="rowIndex">
<i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0">
<div :style="`text-align: ${col.align || 'left'};color: ${col.color};width:100%;`">{{row[col.key]}}</div>
</i-col>
</Row>
</m-scroll>
</div> </div>
</template> </template>
<script> <script>
const mock = [
{date: '08.15', type: '马鲛鱼', size: '鲜条重≥1500', price: 32.00, num: 0.01},
{date: '08.15', type: '梭子蟹（公蟹）', size: '只200克以上', price: 120.00, num: 0.73},
{date: '08.15', type: '梭子蟹（母蟹）', size: '只200克以上', price: 130.00, num: 0.27},
{date: '08.15', type: '管鞭虾', size: '鲜每500克60-80只', price: 30.00, num: 0.4},
{date: '08.15', type: '鹰爪虾', size: '鲜每500克60-80只', price: 32.00, num: 0.28},
{date: '08.15', type: '墨鱼', size: '只重≥500', price: 50.00, num: 0.06},
{date: '08.15', type: '舌鳎', size: '150≤条重＜250', price: 50.00, num: 0.66},
{date: '08.15', type: '白姑鱼', size: '150≤鲜条重＜250', price: 22.00, num: 0.4},
{date: '08.15', type: '海鳗', size: '1000≤条重＜1500', price: 42.00, num: 0.1},
{date: '08.15', type: '海鳗', size: '500≤条重＜1000', price: 34.00, num: 0.3},
{date: '08.15', type: '海鳗', size: '条重＜500', price: 22.00, num: 0.89},
{date: '08.15', type: '银鲳', size: '250≤鲜条重＜400', price: 154.00, num: 0.05},
{date: '08.15', type: '银鲳', size: '150≤鲜条重＜250', price: 70.00, num: 0.19},
{date: '08.15', type: '银鲳', size: '鲜条重＜150', price: 32.00, num: 0.34},
{date: '08.15', type: '带鱼', size: '350≤鲜条重＜500', price: 140.00, num: 0.02},
{date: '08.15', type: '带鱼', size: '200≤鲜条重＜350', price: 50.00, num: 0.81},
{date: '08.15', type: '带鱼', size: '100≤鲜条重＜200', price: 18.00, num: 0.64},
{date: '08.15', type: '小黄鱼', size: '150≤鲜条重＜200', price: 60.00, num: 0.48},
{date: '08.15', type: '小黄鱼', size: '100≤鲜条重＜150', price: 30.00, num: 0.04},
{date: '08.15', type: '乌鳢', size: '条重≥250', price: 20.00, num: 0.33},
{date: '08.15', type: '乌鳢', size: '条重≥250', price: 20.00, num: 0.3},
{date: '08.15', type: '乌鳢', size: '条重≥250', price: 20.00, num: 0.03},
{date: '08.15', type: '乌鳢', size: '条重≥250', price: 20.00, num: 0.4},
{date: '08.15', type: '乌鳢', size: '条重≥250', price: 20.00, num: 0.11},
{date: '08.15', type: '乌鳢', size: '条重≥250', price: 20.00, num: 0.5},
{date: '08.15', type: '乌鳢', size: '条重≥250', price: 20.00, num: 0.03},
{date: '08.15', type: '乌鳢', size: '条重≥250', price: 20.00, num: 0},
{date: '08.15', type: '乌鳢', size: '条重≥250', price: 20.00, num: 0.26},
{date: '08.15', type: '乌鳢', size: '条重≥250', price: 20.00, num: 0.25},
{date: '08.15', type: '罗氏沼虾', size: '统货', price: 40.00, num: 0.33},
{date: '08.15', type: '乌鳢', size: '条重≥250', price: 20.00, num: 0.33},
{date: '08.15', type: '罗氏沼虾', size: '统货', price: 40.00, num: 0.56},
{date: '08.15', type: '罗氏沼虾', size: '统货', price: 40.00, num: 0.91},
{date: '08.15', type: '乌鳢', size: '条重≥250', price: 20.00, num: 0.35},
{date: '08.15', type: '乌鳢', size: '条重≥250', price: 20.00, num: 0.61},
{date: '08.15', type: '罗氏沼虾', size: '统货', price: 40.00, num: 0.31},
{date: '08.15', type: '罗氏沼虾', size: '统货', price: 40.00, num: 0.63},
{date: '08.15', type: '罗氏沼虾', size: '统货', price: 40.00, num: 0.98},
{date: '08.15', type: '乌鳢', size: '条重≥250', price: 20.00, num: 0.15},
{date: '08.15', type: '罗氏沼虾', size: '统货', price: 40.00, num: 0.46},
{date: '08.15', type: '罗氏沼虾', size: '统货', price: 40.00, num: 0.49},
{date: '08.15', type: '乌鳢', size: '条重≥250', price: 20.00, num: 0.99},
{date: '08.15', type: '乌鳢', size: '条重≥250', price: 20.00, num: 0.67},
{date: '08.15', type: '罗氏沼虾', size: '统货', price: 40.00, num: 0.16},
{date: '08.15', type: '乌鳢', size: '条重≥250', price: 20.00, num: 0.33},
{date: '08.15', type: '甲鱼', size: '个重＜500', price: 28.00, num: 0.32},
{date: '08.15', type: '乌鳢', size: '条重≥250', price: 20.00, num: 0.97},
{date: '08.15', type: '甲鱼', size: '个重＜500', price: 28.00, num: 0.9},
{date: '08.15', type: '罗氏沼虾', size: '统货', price: 40.00, num: 0.31},
{date: '08.15', type: '罗氏沼虾', size: '统货', price: 40.00, num: 0.18},
{date: '08.15', type: '罗氏沼虾', size: '统货', price: 40.00, num: 0.61},
{date: '08.15', type: '罗氏沼虾', size: '统货', price: 40.00, num: 0.54},
{date: '08.15', type: '甲鱼', size: '个重＜500', price: 28.00, num: 0.96},
{date: '08.15', type: '甲鱼', size: '个重＜500', price: 28.00, num: 0.34},
{date: '08.15', type: '罗氏沼虾', size: '统货', price: 40.00, num: 0.39},
{date: '08.15', type: '甲鱼', size: '个重＜500', price: 28.00, num: 0.95},
{date: '08.15', type: '甲鱼', size: '个重＜500', price: 28.00, num: 0.24},
{date: '08.15', type: '甲鱼', size: '个重＜500', price: 28.00, num: 0.92},
{date: '08.15', type: '罗氏沼虾', size: '统货', price: 40.00, num: 0.29},
{date: '08.15', type: '甲鱼', size: '个重＜500', price: 28.00, num: 0.6},
{date: '08.15', type: '罗氏沼虾', size: '统货', price: 40.00, num: 0.3},
{date: '08.15', type: '甲鱼', size: '个重＜500', price: 28.00, num: 0.66},
{date: '08.15', type: '罗氏沼虾', size: '统货', price: 40.00, num: 0.32},
{date: '08.15', type: '甲鱼', size: '个重＜500', price: 28.00, num: 0.88},
{date: '08.15', type: '罗氏沼虾', size: '统货', price: 40.00, num: 0.16},
{date: '08.15', type: '甲鱼', size: '个重＜500', price: 28.00, num: 0.08},
{date: '08.15', type: '三角鳊', size: '条重≥500', price: 12.00, num: 0.04},
{date: '08.15', type: '三角鳊', size: '条重≥500', price: 12.00, num: 0.63},
{date: '08.15', type: '甲鱼', size: '个重＜500', price: 28.00, num: 0.13},
{date: '08.15', type: '甲鱼', size: '个重＜500', price: 28.00, num: 0.11},
{date: '08.15', type: '甲鱼', size: '个重＜500', price: 28.00, num: 0.49},
{date: '08.15', type: '甲鱼', size: '个重＜500', price: 28.00, num: 0.77},
{date: '08.15', type: '三角鳊', size: '条重≥500', price: 12.00, num: 0.7},
{date: '08.15', type: '甲鱼', size: '个重＜500', price: 28.00, num: 0.07},
{date: '08.15', type: '三角鳊', size: '条重≥500', price: 12.00, num: 0.5},
{date: '08.15', type: '三角鳊', size: '条重≥500', price: 12.00, num: 0.28},
{date: '08.15', type: '甲鱼', size: '个重＜500', price: 28.00, num: 0.86},
{date: '08.15', type: '三角鳊', size: '条重≥500', price: 12.00, num: 0.28},
{date: '08.15', type: '三角鳊', size: '条重≥500', price: 12.00, num: 0.04},
{date: '08.15', type: '三角鳊', size: '条重≥500', price: 12.00, num: 0.97},
{date: '08.15', type: '三角鳊', size: '条重≥500', price: 12.00, num: 0.18},
{date: '08.15', type: '甲鱼', size: '个重＜500', price: 28.00, num: 0.42},
{date: '08.15', type: '三角鳊', size: '条重≥500', price: 12.00, num: 0.31},
{date: '08.15', type: '三角鳊', size: '条重≥500', price: 12.00, num: 0.04},
{date: '08.15', type: '三角鳊', size: '条重≥500', price: 12.00, num: 0.92},
{date: '08.15', type: '鲶鱼', size: '条重≥500', price: 10.00, num: 0.27},
{date: '08.15', type: '鲶鱼', size: '条重≥500', price: 10.00, num: 0.75},
{date: '08.15', type: '三角鳊', size: '条重≥500', price: 12.00, num: 0.33},
{date: '08.15', type: '三角鳊', size: '条重≥500', price: 12.00, num: 0.87},
{date: '08.15', type: '三角鳊', size: '条重≥500', price: 12.00, num: 0.28},
{date: '08.15', type: '鲶鱼', size: '条重≥500', price: 10.00, num: 0.31},
{date: '08.15', type: '鲶鱼', size: '条重≥500', price: 10.00, num: 0.39},
{date: '08.15', type: '鲶鱼', size: '条重≥500', price: 10.00, num: 0.23},
{date: '08.15', type: '鲶鱼', size: '条重≥500', price: 10.00, num: 0.19},
{date: '08.15', type: '三角鳊', size: '条重≥500', price: 12.00, num: 0.38},
{date: '08.15', type: '鲶鱼', size: '条重≥500', price: 10.00, num: 0.76},
{date: '08.15', type: '鲶鱼', size: '条重≥500', price: 10.00, num: 0.31},
{date: '08.15', type: '三角鳊', size: '条重≥500', price: 12.00, num: 0.87},
{date: '08.15', type: '鲶鱼', size: '条重≥500', price: 10.00, num: 0.11},
{date: '08.15', type: '三角鳊', size: '条重≥500', price: 12.00, num: 0.35},
]
export default { export default {
name: 'NewQuotation', name: 'NewQuotation',
data() { data() {
...@@ -18,35 +131,50 @@ export default { ...@@ -18,35 +131,50 @@ export default {
{ {
title: '品种', title: '品种',
key: 'type', key: 'type',
width: 4, width: 6,
}, },
{ {
title: '规格', title: '规格',
key: 'size', key: 'size',
width: 6, width: 5,
}, },
{ {
title: '价格', title: '价格(元)',
key: 'price', key: 'price',
width: 5, width: 4,
}, },
{ {
title: '成交量', title: '成交量(吨)',
key: 'num', key: 'num',
width: 5, width: 5,
}, },
], ],
data: [ model: mock,
{date: '08.23', type: '草鱼', size: '1.5-2.3kg', price: '5.25元/kg', num: '4,665吨'},
{date: '08.23', type: '鲫鱼', size: '1.5-2.3kg', price: '5.25元/kg', num: '4,665吨'},
{date: '08.23', type: '鲢鱼', size: '1.5-2.3kg', price: '5.25元/kg', num: '4,665吨'},
{date: '08.23', type: '白对虾', size: '1.5-2.3kg', price: '5.25元/kg', num: '4,665吨'},
],
} }
}, },
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.new-quotation
width 100%
height 100%
overflow hidden
.row
display flex
align-items center
// line-height 2.4rem
line-height 2
&.row-title
font-weight bold
background-color $color-map()
font-size 1rem
&:nth-child(2n)
background-color $color-map(0.15)
.col
padding 0 .5rem
display flex
align-items center
flex-wrap wrap
font-size .9rem
</style> </style>
src/views/components/price-analysis.vue
View file @ 9ca238d3
<template> <template>
<div class="price-analysis" v-if="showChart"> <div class="price-analysis" v-if="showChart">
<m-chart :config="config" :data="data"/> <m-chart :config="config" :data="data"/>
<Select v-model="type" class="custom-select" @on-change="setChartData" size="small" transfer>
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select>
</div> </div>
</template> </template>
<script> <script>
const mock = [
{type: '青鱼', date: '2020-03', value: 23},
{type: '青鱼', date: '2020-04', value: 21},
{type: '青鱼', date: '2020-05', value: 23},
{type: '青鱼', date: '2020-06', value: 22},
{type: '青鱼', date: '2020-07', value: 22},
{type: '青鱼', date: '2020-08', value: 22},
{type: '青鱼', date: '2020-09', value: 23},
{type: '青鱼', date: '2020-10', value: 22},
{type: '青鱼', date: '2020-11', value: 22},
{type: '草鱼', date: '2020-03', value: 18},
{type: '草鱼', date: '2020-04', value: 16},
{type: '草鱼', date: '2020-05', value: 18},
{type: '草鱼', date: '2020-06', value: 10},
{type: '草鱼', date: '2020-07', value: 18},
{type: '草鱼', date: '2020-08', value: 11},
{type: '草鱼', date: '2020-09', value: 10},
{type: '草鱼', date: '2020-10', value: 16},
{type: '草鱼', date: '2020-11', value: 12},
{type: '鲢', date: '2020-03', value: 7},
{type: '鲢', date: '2020-04', value: 10},
{type: '鲢', date: '2020-05', value: 5},
{type: '鲢', date: '2020-06', value: 6},
{type: '鲢', date: '2020-07', value: 7},
{type: '鲢', date: '2020-08', value: 7},
{type: '鲢', date: '2020-09', value: 8},
{type: '鲢', date: '2020-10', value: 7},
{type: '鲢', date: '2020-11', value: 6},
{type: '鳙', date: '2020-03', value: 10},
{type: '鳙', date: '2020-04', value: 18},
{type: '鳙', date: '2020-05', value: 12},
{type: '鳙', date: '2020-06', value: 12},
{type: '鳙', date: '2020-07', value: 16},
{type: '鳙', date: '2020-08', value: 10},
{type: '鳙', date: '2020-09', value: 15},
{type: '鳙', date: '2020-10', value: 10},
{type: '鳙', date: '2020-11', value: 14},
{type: '南美白对虾', date: '2020-03', value: 50},
{type: '南美白对虾', date: '2020-04', value: 46},
{type: '南美白对虾', date: '2020-05', value: 106},
{type: '南美白对虾', date: '2020-06', value: 95},
{type: '南美白对虾', date: '2020-07', value: 80},
{type: '南美白对虾', date: '2020-08', value: 51},
{type: '南美白对虾', date: '2020-09', value: 47},
{type: '南美白对虾', date: '2020-10', value: 97},
{type: '南美白对虾', date: '2020-11', value: 89},
{type: '中华绒螯蟹', date: '2020-03', value: 60},
{type: '中华绒螯蟹', date: '2020-04', value: 89},
{type: '中华绒螯蟹', date: '2020-05', value: 112},
{type: '中华绒螯蟹', date: '2020-06', value: 128},
{type: '中华绒螯蟹', date: '2020-07', value: 65},
{type: '中华绒螯蟹', date: '2020-08', value: 162},
{type: '中华绒螯蟹', date: '2020-09', value: 168},
{type: '中华绒螯蟹', date: '2020-10', value: 145},
{type: '中华绒螯蟹', date: '2020-11', value: 162},
{type: '克氏原螯虾', date: '2020-03', value: 42},
{type: '克氏原螯虾', date: '2020-04', value: 31},
{type: '克氏原螯虾', date: '2020-05', value: 38},
{type: '克氏原螯虾', date: '2020-06', value: 43},
{type: '克氏原螯虾', date: '2020-07', value: 34},
{type: '克氏原螯虾', date: '2020-08', value: 33},
{type: '克氏原螯虾', date: '2020-09', value: 31},
{type: '克氏原螯虾', date: '2020-10', value: 43},
{type: '克氏原螯虾', date: '2020-11', value: 37},
]
export default { export default {
name: 'PriceAnalysis', name: 'PriceAnalysis',
data() { data() {
return { return {
type: '青鱼',
options: [
'青鱼',
'草鱼',
'鲢',
'鳙',
'南美白对虾',
'中华绒螯蟹',
'克氏原螯虾'
],
showChart: false, showChart: false,
config: { config: {
colors: ['#eeb514', '#5eec67', '#01adfe'], colors: ['#eeb514', '#5eec67', '#01adfe'],
legend: {align: 'right'}, legend: {align: 'right'},
shape: [ shape: [
{key: 'fish1', name: '草鱼', type: 'line'}, {key: 'value', type: 'line'},
{key: 'fish2', name: '鲫鱼', type: 'line'}, // {key: 'fish2', name: '鲫鱼', type: 'line'},
{key: 'fish3', name: '南美白对虾', type: 'line'}, // {key: 'fish3', name: '南美白对虾', type: 'line'},
], ],
yAxis: { yAxis: {
name: '元', name: '元',
max: 50, // max: 50,
}, },
xAxis: { xAxis: {
key: 'date', key: 'date',
} }
}, },
data: [ data: [
{date: '2020.3', fish1: 10, fish2: 15, fish3: 25}, // {date: '2020.3', fish1: 10, fish2: 15, fish3: 25},
{date: '2020.4', fish1: 10, fish2: 18, fish3: 28}, // {date: '2020.4', fish1: 10, fish2: 18, fish3: 28},
{date: '2020.5', fish1: 20, fish2: 25, fish3: 27}, // {date: '2020.5', fish1: 20, fish2: 25, fish3: 27},
{date: '2020.6', fish1: 15, fish2: 15, fish3: 29}, // {date: '2020.6', fish1: 15, fish2: 15, fish3: 29},
{date: '2020.7', fish1: 10, fish2: 12, fish3: 31}, // {date: '2020.7', fish1: 10, fish2: 12, fish3: 31},
{date: '2020.8', fish1: 11, fish2: 18, fish3: 24}, // {date: '2020.8', fish1: 11, fish2: 18, fish3: 24},
{date: '2020.9', fish1: 12, fish2: 11, fish3: 29}, // {date: '2020.9', fish1: 12, fish2: 11, fish3: 29},
], ],
} }
}, },
mounted() { mounted() {
setTimeout(() => this.showChart = true, 0) setTimeout(() => this.showChart = true, 0)
this.setChartData(this.type)
}, },
methods: {
setChartData(type) {
this.data = mock.filter(item => item.type === type)
},
}
} }
</script> </script>
......
src/views/components/price-trend.vue
View file @ 9ca238d3
<template> <template>
<div class="price-trend"> <div class="price-trend">
<div class="chart" ref="chart" /> <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> </div>
</template> </template>
<script> <script>
const mock = [
{date: '2020年5月', val1: 1.0323, val2: 1.0287, val3: 1.0375, val4: 1.028, val5: 1.0257, val6: 1.0296},
{date: '2020年4月', val1: 1.0075, val2: 1.0209, val3: 1.0125, val4: 1.0277, val5: 1.0011, val6: 1.0122},
{date: '2020年3月', val1: 0.9725, val2: 0.9674, val3: 0.9746, val4: 0.9639, val5: 0.9697, val6: 0.9718},
{date: '2020年2月', val1: 0.9889, val2: 0.9814, val3: 0.9564, val4: 0.9603, val5: 1.03, val6: 1.008},
{date: '2020年1月', val1: 1.0154, val2: 1.015, val3: 1.1018, val4: 1.0952, val5: 0.906, val6: 0.9134},
{date: '2019年12月', val1: 1.309, val2: 1.1943, val3: 1.0447, val4: 1.0434, val5: 1.6439, val6: 1.3855},
{date: '2019年11月', val1: 0.9906, val2: 0.9933, val3: 1.0069, val4: 1.0062, val5: 0.9699, val6: 0.977},
{date: '2019年10月', val1: 0.9848, val2: 0.9826, val3: 0.9895, val4: 0.9882, val5: 0.9789, val6: 0.9755},
{date: '2019年9月', val1: 0.9864, val2: 0.9825, val3: 0.9718, val4: 0.9731, val5: 1.0049, val6: 0.9943},
{date: '2019年8月', val1: 0.9864, val2: 0.9881, val3: 0.952, val4: 0.9568, val5: 1.03, val6: 1.0279},
{date: '2019年7月', val1: 0.9956, val2: 0.9972, val3: 0.9742, val4: 0.9806, val5: 1.0227, val6: 1.0183},
{date: '2019年6月', val1: 0.9992, val2: 1.0014, val3: 0.9968, val4: 1.0009, val5: 1.0023, val6: 1.002},
{date: '2019年5月', val1: 1.0167, val2: 1.0169, val3: 1.021, val4: 1.0233, val5: 1.0113, val6: 1.0087},
{date: '2019年4月', val1: 1.0204, val2: 1.019, val3: 1.0365, val4: 1.0331, val5: 0.9999, val6: 1.0012},
{date: '2019年3月', val1: 0.944, val2: 0.9537, val3: 0.9331, val4: 0.9444, val5: 0.9579, val6: 0.9656},
{date: '2019年2月', val1: 1.0575, val2: 1.0448, val3: 1.0973, val4: 1.0743, val5: 1.0072, val6: 1.0074},
{date: '2019年1月', val1: 1.0414, val2: 1.0361, val3: 1.0771, val4: 1.0682, val5: 0.9961, val6: 0.9955},
{date: '2018年12月', val1: 1.0222, val2: 1.0186, val3: 1.0366, val4: 1.0311, val5: 1.0041, val6: 1.0028},
{date: '2018年11月', val1: 0.9939, val2: 0.9879, val3: 0.9964, val4: 0.9901, val5: 0.9908, val6: 0.9851},
{date: '2018年10月', val1: 0.9877, val2: 0.9827, val3: 0.9892, val4: 0.9832, val5: 0.9858, val6: 0.982},
{date: '2018年7月', val1: 0.9981, val2: 0.9931, val3: 1.0024, val4: 0.9919, val5: 0.9927, val6: 0.9946},
{date: '2018年6月', val1: 0.9937, val2: 1.0024, val3: 0.9958, val4: 1.0065, val5: 0.9911, val6: 0.9973},
{date: '2018年5月', val1: 1.0077, val2: 1.0092, val3: 1.0141, val4: 1.0215, val5: 0.9995, val6: 0.9936},
{date: '2018年4月', val1: 0.9886, val2: 0.9879, val3: 0.983, val4: 0.9769, val5: 0.9957, val6: 1.0017},
{date: '2018年3月', val1: 0.9601, val2: 0.9707, val3: 0.9477, val4: 0.9591, val5: 0.9757, val6: 0.9853},
{date: '2018年2月', val1: 1.0929, val2: 1.0829, val3: 1.1212, val4: 1.1047, val5: 1.057, val6: 1.0553},
{date: '2018年1月', val1: 1.0942, val2: 1.0482, val3: 1.146, val4: 1.0686, val5: 1.0286, val6: 1.0223},
{date: '2017年12月', val1: 1.0296, val2: 1.0291, val3: 1.0575, val4: 1.0471, val5: 0.9943, val6: 1.0062},
{date: '2017年11月', val1: 0.9858, val2: 0.9888, val3: 0.9971, val4: 1.0048, val5: 0.9714, val6: 0.9685},
{date: '2017年10月', val1: 1.0018, val2: 1.0084, val3: 1.0098, val4: 1.0177, val5: 0.9917, val6: 0.9966},
{date: '2017年9月', val1: 0.9698, val2: 0.9666, val3: 0.9605, val4: 0.9637, val5: 0.9816, val6: 0.9703},
{date: '2017年8月', val1: 0.9675, val2: 0.9678, val3: 0.9458, val4: 0.9486, val5: 0.9948, val6: 0.9922},
{date: '2017年7月', val1: 0.9868, val2: 0.991, val3: 0.9822, val4: 0.9834, val5: 0.9927, val6: 1.0007},
{date: '2017年6月', val1: 0.987, val2: 0.9945, val3: 0.9822, val4: 0.9872, val5: 0.9932, val6: 1.0039},
{date: '2017年5月', val1: 1.0311, val2: 1.0259, val3: 1.0287, val4: 1.0268, val5: 1.0342, val6: 1.0247},
{date: '2017年4月', val1: 0.9934, val2: 0.9962, val3: 1.0006, val4: 1.0029, val5: 0.9843, val6: 0.9878},
].reverse()
export default { export default {
name: 'PriceTrend', name: 'PriceTrend',
data() { data() {
return { return {
disease: '2019',
options: ['2019', '2020'],
chart: null, chart: null,
option: { option: {
tooltip: { tooltip: {
...@@ -51,15 +84,15 @@ export default { ...@@ -51,15 +84,15 @@ export default {
}, },
fontSize: this.fontSize, fontSize: this.fontSize,
}, },
data: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12', ], data: mock.map(item => item.date)
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
// name: '单位：个', // name: '单位：个',
max: 1.20, max: 1.8,
min: 0.95, min: 0.8,
interval: 0.05, // interval: 0.05,
axisLine: { axisLine: {
show: false, show: false,
}, },
...@@ -81,16 +114,18 @@ export default { ...@@ -81,16 +114,18 @@ export default {
}, },
], ],
series: [ series: [
{name: '综合-具有可比性', itemStyle: {color: '#e052fc'}, type: 'line', data: [1, 1.02, 1.05, 1.03, 1.04, 1, 1.1, 1.05, 1.02, 1, 1.1, 1.08]}, {name: '综合-具有可比性', itemStyle: {color: '#e052fc'}, type: 'line', data: mock.map(item => item.val1)},
{name: '综合-不具可比性', itemStyle: {color: '#8078fb'}, type: 'line', data: [1.05, 1.04, 1.15, 1.08, 1.14, 1, 1, 1.05, 1.12, 1, 1.12, 1.08]}, {name: '综合-不具可比性', itemStyle: {color: '#8078fb'}, type: 'line', data: mock.map(item => item.val2)},
{name: '海水产品-具有可比性', itemStyle: {color: '#43befc'}, type: 'line', data: [1, 1.06, 1.03, 1.13, 1.04, 1.02, 1, 1.05, 1.02, 1, 1.1, 1.05]}, {name: '海水产品-具有可比性', itemStyle: {color: '#43befc'}, type: 'line', data: mock.map(item => item.val3)},
{name: '海水产品-不具可比性', itemStyle: {color: '#1ef9f4'}, type: 'line', data: [1.03, 1.08, 1.05, 1.05, 1.04, 1.07, 1.01, 1.12, 1.02, 1, 1, 1.08]}, {name: '海水产品-不具可比性', itemStyle: {color: '#1ef9f4'}, type: 'line', data: mock.map(item => item.val4)},
{name: '淡水产品-具有可比性', itemStyle: {color: '#3afe85'}, type: 'line', data: [1.08, 1.1, 1.02, 1.06, 1.04, 1.05, 1.12, 1.05, 1.05, 1, 1.12, 1.02]}, {name: '淡水产品-具有可比性', itemStyle: {color: '#3afe85'}, type: 'line', data: mock.map(item => item.val5)},
{name: '淡水产品-不具可比性', itemStyle: {color: '#fcee38'}, type: 'line', data: [1.02, 1.05, 1.05, 1.1, 1.04, 1.1, 1.01, 1, 1.02, 1, 1.11, 1.04]}, {name: '淡水产品-不具可比性', itemStyle: {color: '#fcee38'}, type: 'line', data: mock.map(item => item.val6)},
], ],
dataZoom: [{ dataZoom: [{
start: 10, start: 50,
end: 80, end: 100,
// yAxisIndex: 0,
// orient: 'horizontal',
backgroundColor: '#105179', backgroundColor: '#105179',
fillerColor: '#46b9ef', fillerColor: '#46b9ef',
borderColor: 'transparent', borderColor: 'transparent',
......
src/views/components/questions.vue
View file @ 9ca238d3
<template> <template>
<div class="questions"> <div class="questions">
<p> <p>
年问答量：<span class="blue"><m-count color="#5bd5ff" :value="12932" :decimal="0"/> 次</span>&nbsp;&nbsp;&nbsp; 年问答量：<span class="blue"><m-count color="#5bd5ff" :value="14586" :decimal="0"/> 次</span>&nbsp;&nbsp;&nbsp;
月问答量：<span class="blue"><m-count color="#5bd5ff" :value="150" :decimal="0"/> 次</span> 月问答量：<span class="blue"><m-count color="#5bd5ff" :value="1865" :decimal="0"/> 次</span>
</p> </p>
<div v-for="(item, index) in list" :key="index"> <m-scroll :length="list.length" :limit="4">
<span>{{item.name}}</span> <div v-for="(item, index) in list" :key="index" class="item">
<p>问：{{item.question}}</p> <span>{{item.name}}</span>
<span>{{item.time}}分钟前</span> <p>问：{{item.question}}</p>
<span class="blue"><Icon type="md-text" /> {{item.reply}}</span> <span>{{item.time}}分钟前</span>
</div> <span class="blue"><Icon type="md-text" /> {{item.reply}}</span>
</div>
</m-scroll>
</div> </div>
</template> </template>
...@@ -19,10 +21,11 @@ export default { ...@@ -19,10 +21,11 @@ export default {
data() { data() {
return { return {
list: [ list: [
{name: '张衡', question: '高温天气草鱼生病是不是养殖密度', time: 2, reply: 2}, {name: '张恒', question: '高温天气草鱼生病是不是和养殖密度有很大的关系？', time: 2, reply: 3},
{name: '李星辰', question: '与头部和脊背发黑，独游，不吃食物', time: 10, reply: 0}, {name: '李星辰', question: '鱼头部和脊背发黑，独游，不吃食物到底是什么原因？', time: 8, reply: 6},
{name: '王兴鑫', question: '突然提前至夜间10时，浮头次数增多', time: 12, reply: 10}, {name: '王兴鑫', question: '昨天夜间10时，鱼浮头的次数明显变得频繁了很多，什么原因？', time: 15, reply: 2},
{name: '周彦', question: '水温12-20℃的时候，鱼种成群打架', time: 14, reply: 4}, {name: '周岩', question: '水温12-20℃的时候，鱼种成群打架，什么原因？', time: 26, reply: 3},
{name: '汪天', question: '为什么鱼病常在夏秋两季流行?', time: 60, reply: 8},
], ],
} }
}, },
...@@ -33,15 +36,15 @@ export default { ...@@ -33,15 +36,15 @@ export default {
.questions .questions
width 100% width 100%
height 100% height 100%
overflow hidden
>p >p
text-align center text-align center
>div .item
display flex display flex
align-items center align-items center
justify-content space-around justify-content space-around
padding .7rem 0 padding .7rem 0
&+div border-bottom .1rem solid $cardFontColor
border-top .1rem solid $cardFontColor
span span
color $edgeColor color $edgeColor
display inline-block display inline-block
......
src/views/components/special-monitoring.vue
View file @ 9ca238d3
<template> <template>
<div class="special-monitoring"> <div class="special-monitoring">
<div class="chart" ref="chart" /> <div class="chart" ref="chart" />
<Select class="custom-select" v-model="disease"> <Select class="custom-select" v-model="disease" @on-change="setMapData" transfer>
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option> <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select> </Select>
</div> </div>
</template> </template>
<script> <script>
const mock = [
{disease: '鲤春病毒血症', year: '2019', data1: 32, data2: 55},
{disease: '鲤春病毒血症', year: '2018', data1: 21, data2: 75},
{disease: '鲤春病毒血症', year: '2017', data1: 27, data2: 28},
{disease: '白斑综合征', year: '2019', data1: 85, data2: 175},
{disease: '白斑综合征', year: '2018', data1: 117, data2: 329},
{disease: '白斑综合征', year: '2017', data1: 128, data2: 136},
{disease: '草鱼出血病', year: '2019', data1: 14, data2: 39},
{disease: '草鱼出血病', year: '2018', data1: 30, data2: 42},
{disease: '草鱼出血病', year: '2017', data1: 14, data2: 14},
{disease: '锦鲤疱疹病毒病', year: '2019', data1: 4, data2: 45},
{disease: '锦鲤疱疹病毒病', year: '2018', data1: 12, data2: 104},
{disease: '锦鲤疱疹病毒病', year: '2017', data1: 11, data2: 13},
]
export default { export default {
name: 'SpecialMonitoring', name: 'SpecialMonitoring',
data() { data() {
return { return {
disease: '出血性腐烂病', disease: '鲤春病毒血症',
options: ['出血性腐烂病'], options: ['鲤春病毒血症', '白斑综合征', '草鱼出血病', '锦鲤疱疹病毒病'],
chart: null, chart: null,
option: { option: {
tooltip: { tooltip: {
...@@ -49,15 +63,15 @@ export default { ...@@ -49,15 +63,15 @@ export default {
}, },
fontSize: this.fontSize, fontSize: this.fontSize,
}, },
data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'], data: ['2017', '2018', '2019'],
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
// name: '单位：个', // name: '单位：个',
max: 400, max: 150,
min: 0, min: 0,
interval: 100, interval: 30,
axisLine: { axisLine: {
show: false, show: false,
}, },
...@@ -80,9 +94,9 @@ export default { ...@@ -80,9 +94,9 @@ export default {
{ {
type: 'value', type: 'value',
// name: '单位：个', // name: '单位：个',
max: 600, max: 350,
min: 0, min: 0,
interval: 150, interval: 70,
axisLine: { axisLine: {
show: false, show: false,
}, },
...@@ -103,13 +117,10 @@ export default { ...@@ -103,13 +117,10 @@ export default {
}, },
} }
], ],
series: [ 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: [{ dataZoom: [{
start: 10, start: 0,
end: 80, end: 100,
backgroundColor: '#105179', backgroundColor: '#105179',
fillerColor: '#46b9ef', fillerColor: '#46b9ef',
borderColor: 'transparent', borderColor: 'transparent',
...@@ -139,8 +150,16 @@ export default { ...@@ -139,8 +150,16 @@ export default {
methods: { methods: {
init() { init() {
this.chart = this.$echarts.init(this.$refs.chart) this.chart = this.$echarts.init(this.$refs.chart)
this.setMapData(this.disease)
},
setMapData(disease) {
const list = mock.filter(item => item.disease === disease).reverse()
this.option.series = [
{name: '阳性监测点数量', itemStyle: {color: 'gold'}, type: 'line', data: list.map(item => item.data1)},
{name: '阳性样品数量', itemStyle: {color: 'red'}, yAxisIndex: 1, type: 'line', data: list.map(item => item.data2)},
]
this.chart.setOption(this.option) this.chart.setOption(this.option)
} },
} }
} }
</script> </script>
......
src/views/components/team-build.vue
View file @ 9ca238d3
...@@ -6,20 +6,49 @@ ...@@ -6,20 +6,49 @@
<div v-if="showChart"> <div v-if="showChart">
<m-chart :data="data2" :config="config2" :options="{xAxis: {splitLine: {show: false}}, yAxis: {splitLine: {show: false}}}"/> <m-chart :data="data2" :config="config2" :options="{xAxis: {splitLine: {show: false}}, yAxis: {splitLine: {show: false}}}"/>
</div> </div>
<Select v-model="area" class="custom-select" size="small"> <Select v-model="area" @on-change="handleChange" class="custom-select" size="small" transfer>
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option> <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select> </Select>
</div> </div>
</template> </template>
<script> <script>
const mock = [
{area: '华北地区', name: '北京', value: 14},
{area: '华北地区', name: '天津', value: 15},
{area: '华北地区', name: '河北', value: 10},
{area: '华北地区', name: '山西', value: 6},
{area: '华东地区', name: '上海', value: 21},
{area: '华东地区', name: '江苏', value: 24},
{area: '华东地区', name: '浙江', value: 20},
{area: '华东地区', name: '安徽', value: 19},
{area: '华东地区', name: '江西', value: 16},
{area: '华东地区', name: '福建', value: 18},
{area: '华东地区', name: '山东', value: 16},
{area: '华南地区', name: '广东', value: 26},
{area: '华南地区', name: '广西', value: 13},
{area: '华南地区', name: '海南', value: 10},
{area: '华西地区', name: '新疆', value: 8},
{area: '华西地区', name: '内蒙古', value: 7},
{area: '华西地区', name: '青海', value: 9},
{area: '华西地区', name: '甘肃', value: 6},
{area: '华西地区', name: '宁夏', value: 6},
{area: '华西地区', name: '陕西', value: 8},
{area: '华西地区', name: '西藏', value: 0},
{area: '华西地区', name: '四川', value: 12},
{area: '华西地区', name: '重庆', value: 18},
{area: '华西地区', name: '云南', value: 10},
{area: '华中地区', name: '河南', value: 12},
{area: '华中地区', name: '湖北', value: 24},
{area: '华中地区', name: '湖南', value: 20},
]
export default { export default {
name: 'TeamBuild', name: 'TeamBuild',
data() { data() {
return { return {
showChart: false, showChart: false,
area: '华北地区', area: '华北地区',
options: ['华北地区'], options: ['华北地区', '华东地区', '华南地区', '华西地区', '华中地区'],
config: { config: {
colors: ['#535af1', '#39d655', '#ffd825'], colors: ['#535af1', '#39d655', '#ffd825'],
legend: { legend: {
...@@ -27,13 +56,13 @@ export default { ...@@ -27,13 +56,13 @@ export default {
orient: 'vertical', orient: 'vertical',
}, },
shape: [ shape: [
{type: 'pie', radius: [20, 40], roseType: 'radius', center: ['65%', '50%']} {type: 'pie', radius: [20 * Number((screen.height / 800).toFixed(1)), 50 * Number((screen.height / 800).toFixed(1))], roseType: 'radius', center: ['65%', '70%']}
] ]
}, },
data: [ data: [
{name: '执业人员', value: 50}, {name: '执业人员', value: 168},
{name: '乡村兽医', value: 30}, {name: '乡村兽医', value: 1585},
{name: '官方兽医', value: 20}, {name: '官方兽医', value: 23654},
], ],
config2: { config2: {
colors: ['#00d2ff'], colors: ['#00d2ff'],
...@@ -41,7 +70,7 @@ export default { ...@@ -41,7 +70,7 @@ export default {
hide: true, hide: true,
}, },
shape: [ shape: [
{type: 'bar', barWidth: '50%', key: 'value', label: {show: true, position: 'top', color: '#fff'}}, {type: 'bar', barWidth: '30%', key: 'value', label: {show: true, position: 'top', color: '#fff'}},
], ],
xAxis: { xAxis: {
key: 'name', key: 'name',
...@@ -49,21 +78,21 @@ export default { ...@@ -49,21 +78,21 @@ export default {
yAxis: { yAxis: {
axisLabel: {show: false}, axisLabel: {show: false},
axisLine: {show: false}, axisLine: {show: false},
max: 15, max: 30,
} }
}, },
data2: [ data2: [],
{name: '北京', value: 3},
{name: '天津', value: 4},
{name: '河北', value: 2},
{name: '山西', value: 7},
{name: '内蒙古', value: 10},
],
} }
}, },
mounted() { mounted() {
this.data2 = mock.filter(item => item.area === this.area)
setTimeout(() => this.showChart = true, 0) setTimeout(() => this.showChart = true, 0)
}, },
methods: {
handleChange(area) {
this.data2 = mock.filter(item => item.area === area)
}
}
} }
</script> </script>
......
src/views/components/trade-situation.vue
View file @ 9ca238d3
...@@ -13,6 +13,46 @@ ...@@ -13,6 +13,46 @@
</template> </template>
<script> <script>
const mock = [
{year: '2019', name: '鱼类', value: 821.45},
{year: '2019', name: '虾类', value: 273.82},
{year: '2019', name: '蟹类', value: 136.91},
{year: '2019', name: '贝类', value: 68.45},
{year: '2019', name: '藻类', value: 41.07},
{year: '2019', name: '其他类', value: 27.38},
{year: '2018', name: '鱼类', value: 700.97},
{year: '2018', name: '虾类', value: 233.66},
{year: '2018', name: '蟹类', value: 116.83},
{year: '2018', name: '贝类', value: 58.41},
{year: '2018', name: '藻类', value: 35.05},
{year: '2018', name: '其他类', value: 23.37},
{year: '2017', name: '鱼类', value: 651.47},
{year: '2017', name: '虾类', value: 217.16},
{year: '2017', name: '蟹类', value: 108.58},
{year: '2017', name: '贝类', value: 54.29},
{year: '2017', name: '藻类', value: 32.57},
{year: '2017', name: '其他类', value: 21.72},
]
const mock2 = [
{year: '2019', name: '鱼类', value: 1687.55},
{year: '2019', name: '虾类', value: 562.51},
{year: '2019', name: '蟹类', value: 281.26},
{year: '2019', name: '贝类', value: 140.63},
{year: '2019', name: '藻类', value: 84.38},
{year: '2019', name: '其他类', value: 56.25},
{year: '2018', name: '鱼类', value: 1443.7},
{year: '2018', name: '虾类', value: 481.23},
{year: '2018', name: '蟹类', value: 240.62},
{year: '2018', name: '贝类', value: 120.31},
{year: '2018', name: '藻类', value: 72.18},
{year: '2018', name: '其他类', value: 48.12},
{year: '2017', name: '鱼类', value: 1330.71},
{year: '2017', name: '虾类', value: 443.57},
{year: '2017', name: '蟹类', value: 221.79},
{year: '2017', name: '贝类', value: 110.89},
{year: '2017', name: '藻类', value: 66.54},
{year: '2017', name: '其他类', value: 44.36},
]
export default { export default {
name: 'TradeSituation', name: 'TradeSituation',
data() { data() {
...@@ -24,16 +64,10 @@ export default { ...@@ -24,16 +64,10 @@ export default {
hide: true, hide: true,
}, },
shape: [ shape: [
{type: 'pie', radius: [0, 60], roseType: 'radius', label: {show: true, formatter: '{b}: {c}%'}} {type: 'pie', radius: [0, 60 * Number((screen.height / 800).toFixed(1))], startAngle: 0, roseType: 'radius', label: {show: true, formatter: '{b}: {c}万吨'}}
] ]
}, },
data: [ data: [],
{name: '鱼类', value: 36},
{name: '虾类', value: 24},
{name: '蟹类', value: 12},
{name: '贝类', value: 12},
{name: '其他', value: 8},
],
config2: { config2: {
colors: [['#18a6ee', '#6f63ed']], colors: [['#18a6ee', '#6f63ed']],
legend: { legend: {
...@@ -45,23 +79,32 @@ export default { ...@@ -45,23 +79,32 @@ export default {
xAxis: { xAxis: {
key: 'name', key: 'name',
}, },
yAxis: {
max: 500000,
}
}, },
data2: [ data2: [],
{name: '鱼类', value: 450000},
{name: '虾类', value: 350000},
{name: '贝类', value: 400000},
{name: '蟹类', value: 210000},
{name: '藻类', value: 430000},
{name: '其他', value: 310000},
],
} }
}, },
mounted() { mounted() {
setTimeout(() => this.showChart = true, 0) setTimeout(() => this.showChart = true, 0)
}, },
// computed: {
// sizeRate() {
// return Number((screen.height / 800).toFixed(1))
// },
// },
methods: {
setChartData(year) {
this.data = mock.filter(item => item.year === year)
this.data2 = mock2.filter(item => item.year === year)
},
},
watch: {
'$store.state.mainYear': {
handler(cur) {
this.setChartData(cur)
},
immediate: true,
}
},
} }
</script> </script>
......
src/views/disease.vue
View file @ 9ca238d3
...@@ -41,6 +41,7 @@ import Questions from './components/questions' ...@@ -41,6 +41,7 @@ import Questions from './components/questions'
import SpecialMonitoring from './components/special-monitoring' import SpecialMonitoring from './components/special-monitoring'
import DiseaseForeCast from './components/disease-forecast' import DiseaseForeCast from './components/disease-forecast'
import DiseaseSum from './components/disease-sum' import DiseaseSum from './components/disease-sum'
import {mapActions} from 'vuex'
export default { export default {
name: 'Main', name: 'Main',
components: { components: {
...@@ -53,5 +54,20 @@ export default { ...@@ -53,5 +54,20 @@ export default {
DiseaseForeCast, DiseaseForeCast,
DiseaseSum, DiseaseSum,
}, },
mounted() {
this.$nextTick(this.init)
},
methods: {
...mapActions([
'getDiseaseSummary',
'getAquafarmPoints',
'getDiseaseWarning',
]),
init() {
this.getDiseaseSummary()
this.getAquafarmPoints()
this.getDiseaseWarning()
}
},
} }
</script> </script>
src/views/fishing-price.vue
View file @ 9ca238d3
<template> <template>
<m-grid <m-grid
:template="[ :template="[
'map select select',
'map box1 box1', 'map box1 box1',
'map box2 box3', 'map box2 box3',
'map box2 box4', 'map box2 box4',
]" ]"
columns="1fr 0.6fr 0.6fr" columns="1fr 0.6fr 0.6fr"
rows="1fr 1fr 1fr" rows="2rem 1fr 1fr 1fr"
gap="0.5rem" gap="0.5rem"
> >
<FishingPriceMap area="map"/> <FishingPriceMap area="map"/>
<div class="year-select-wrapper" area="select">
<p>主显示</p>
<Select class="year-select" @on-change="$store.commit('SET_MAIN_YEAR', $event)" v-model="disease" transfer>
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select>
</div>
<m-card area="box1" title="价格指数走势图"> <m-card area="box1" title="价格指数走势图">
<PriceTrend /> <PriceTrend />
</m-card> </m-card>
...@@ -41,11 +48,24 @@ export default { ...@@ -41,11 +48,24 @@ export default {
NewQuotation, NewQuotation,
}, },
data() { data() {
return {} return {
disease: '2019',
options: ['2019', '2018', '2017'],
}
}, },
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.year-select-wrapper
display flex
align-items center
justify-content flex-end
p
font-size 1.2rem
font-weight bold
margin-right 1rem
.year-select
width 15%
</style> </style>
static/aquafarm-points.json 0 → 100644
View file @ 9ca238d3
This source diff could not be displayed because it is too large. You can view the blob instead.
static/disease-summary.json 0 → 100644
View file @ 9ca238d3
[
{
"title": "远程诊断",
"data": [
{"title": "年诊量", "count": 2315},
{"title": "当日诊断", "count": 68},
{"title": "在线人数", "count": 1456}
]
},
{
"title": "专项检测",
"data": [
{"title": "年采样量", "count": 4764},
{"title": "年检测量", "count": 4764},
{"title": "阳性数量", "count": 440}
]
},
{
"title": "病情测报",
"data": [
{"title": "年上报量", "count": 48628},
{"title": "年发病上报量", "count": 8795}
]
}
]
static/disease-warning.json 0 → 100644
View file @ 9ca238d3
[
{"type": "草鱼", "province": "北京市", "value": 10},
{"type": "草鱼", "province": "天津市", "value": 70},
{"type": "草鱼", "province": "河北省", "value": 16},
{"type": "草鱼", "province": "辽宁省", "value": 30},
{"type": "草鱼", "province": "吉林省", "value": 9},
{"type": "草鱼", "province": "黑龙江省", "value": 10},
{"type": "草鱼", "province": "上海市", "value": 19},
{"type": "草鱼", "province": "江苏省", "value": 318},
{"type": "草鱼", "province": "浙江省", "value": 33},
{"type": "草鱼", "province": "安徽省", "value": 140},
{"type": "草鱼", "province": "福建省", "value": 242},
{"type": "草鱼", "province": "江西省", "value": 212},
{"type": "草鱼", "province": "山东省", "value": 84},
{"type": "草鱼", "province": "河南省", "value": 141},
{"type": "草鱼", "province": "湖北省", "value": 165},
{"type": "草鱼", "province": "湖南省", "value": 240},
{"type": "草鱼", "province": "广东省", "value": 294},
{"type": "草鱼", "province": "广西", "value": 280},
{"type": "草鱼", "province": "重庆市", "value": 59},
{"type": "草鱼", "province": "四川省", "value": 125},
{"type": "草鱼", "province": "贵州省", "value": 7},
{"type": "草鱼", "province": "云南省", "value": 17},
{"type": "草鱼", "province": "陕西省", "value": 72},
{"type": "草鱼", "province": "甘肃省", "value": 7},
{"type": "草鱼", "province": "宁夏", "value": 72},
{"type": "草鱼", "province": "新疆", "value": 4},
{"type": "黄颡鱼", "province": "河北省", "value": 1},
{"type": "黄颡鱼", "province": "江苏省", "value": 3},
{"type": "黄颡鱼", "province": "浙江省", "value": 11},
{"type": "黄颡鱼", "province": "安徽省", "value": 2},
{"type": "黄颡鱼", "province": "江西省", "value": 8},
{"type": "黄颡鱼", "province": "湖北省", "value": 11},
{"type": "黄颡鱼", "province": "湖南省", "value": 4},
{"type": "黄颡鱼", "province": "广东省", "value": 48},
{"type": "黄颡鱼", "province": "广西", "value": 33},
{"type": "黄颡鱼", "province": "重庆市", "value": 2},
{"type": "黄颡鱼", "province": "四川省", "value": 16},
{"type": "克氏原螯虾", "province": "江苏省", "value": 41},
{"type": "克氏原螯虾", "province": "安徽省", "value": 18},
{"type": "克氏原螯虾", "province": "湖北省", "value": 15},
{"type": "克氏原螯虾", "province": "四川省", "value": 1},
{"type": "克氏原螯虾", "province": "贵州省", "value": 3},
{"type": "鲤", "province": "北京市", "value": 12},
{"type": "鲤", "province": "天津市", "value": 72},
{"type": "鲤", "province": "河北省", "value": 15},
{"type": "鲤", "province": "内蒙古", "value": 13},
{"type": "鲤", "province": "辽宁省", "value": 38},
{"type": "鲤", "province": "吉林省", "value": 26},
{"type": "鲤", "province": "黑龙江省", "value": 60},
{"type": "鲤", "province": "江苏省", "value": 38},
{"type": "鲤", "province": "浙江省", "value": 28},
{"type": "鲤", "province": "安徽省", "value": 3},
{"type": "鲤", "province": "山东省", "value": 39},
{"type": "鲤", "province": "河南省", "value": 193},
{"type": "鲤", "province": "湖南省", "value": 8},
{"type": "鲤", "province": "广东省", "value": 9},
{"type": "鲤", "province": "广西", "value": 56},
{"type": "鲤", "province": "重庆市", "value": 2},
{"type": "鲤", "province": "四川省", "value": 44},
{"type": "鲤", "province": "贵州省", "value": 6},
{"type": "鲤", "province": "云南省", "value": 5},
{"type": "鲤", "province": "陕西省", "value": 47},
{"type": "鲤", "province": "甘肃省", "value": 7},
{"type": "鲤", "province": "宁夏", "value": 49},
{"type": "鲤", "province": "新疆", "value": 1},
{"type": "鲢", "province": "天津市", "value": 51},
{"type": "鲢", "province": "河北省", "value": 2},
{"type": "鲢", "province": "辽宁省", "value": 1},
{"type": "鲢", "province": "吉林省", "value": 22},
{"type": "鲢", "province": "黑龙江省", "value": 20},
{"type": "鲢", "province": "上海市", "value": 8},
{"type": "鲢", "province": "江苏省", "value": 128},
{"type": "鲢", "province": "安徽省", "value": 94},
{"type": "鲢", "province": "江西省", "value": 13},
{"type": "鲢", "province": "山东省", "value": 7},
{"type": "鲢", "province": "河南省", "value": 54},
{"type": "鲢", "province": "湖北省", "value": 89},
{"type": "鲢", "province": "湖南省", "value": 90},
{"type": "鲢", "province": "广东省", "value": 21},
{"type": "鲢", "province": "广西", "value": 28},
{"type": "鲢", "province": "重庆市", "value": 23},
{"type": "鲢", "province": "四川省", "value": 23},
{"type": "鲢", "province": "贵州省", "value": 1},
{"type": "鲢", "province": "云南省", "value": 4},
{"type": "鲢", "province": "陕西省", "value": 7},
{"type": "鲢", "province": "甘肃省", "value": 1},
{"type": "鲢", "province": "宁夏", "value": 15},
{"type": "南美白对虾", "province": "广东省", "value": 5},
{"type": "南美白对虾", "province": "海南省", "value": 4},
{"type": "青鱼", "province": "江苏省", "value": 15},
{"type": "青鱼", "province": "浙江省", "value": 18},
{"type": "青鱼", "province": "安徽省", "value": 5},
{"type": "青鱼", "province": "湖北省", "value": 1},
{"type": "青鱼", "province": "湖南省", "value": 15},
{"type": "青鱼", "province": "广东省", "value": 5},
{"type": "青鱼", "province": "广西", "value": 7},
{"type": "乌鳢", "province": "江苏省", "value": 7},
{"type": "乌鳢", "province": "湖北省", "value": 1},
{"type": "乌鳢", "province": "湖南省", "value": 8},
{"type": "乌鳢", "province": "广东省", "value": 66},
{"type": "乌鳢", "province": "广西", "value": 1},
{"type": "鳙", "province": "天津市", "value": 42},
{"type": "鳙", "province": "河北省", "value": 1},
{"type": "鳙", "province": "吉林省", "value": 12},
{"type": "鳙", "province": "黑龙江省", "value": 13},
{"type": "鳙", "province": "上海市", "value": 4},
{"type": "鳙", "province": "江苏省", "value": 74},
{"type": "鳙", "province": "安徽省", "value": 25},
{"type": "鳙", "province": "江西省", "value": 19},
{"type": "鳙", "province": "山东省", "value": 2},
{"type": "鳙", "province": "河南省", "value": 23},
{"type": "鳙", "province": "湖北省", "value": 54},
{"type": "鳙", "province": "湖南省", "value": 79},
{"type": "鳙", "province": "广东省", "value": 11},
{"type": "鳙", "province": "广西", "value": 15},
{"type": "鳙", "province": "重庆市", "value": 10},
{"type": "鳙", "province": "四川省", "value": 4},
{"type": "鳙", "province": "贵州省", "value": 2},
{"type": "鳙", "province": "云南省", "value": 1},
{"type": "鳙", "province": "陕西省", "value": 3},
{"type": "鳙", "province": "宁夏", "value": 8}
]
static/hospital-points.json 0 → 100644
View file @ 9ca238d3
[
{
"name": "常熟市支塘水产医院",
"value": [120.971088, 31.547779],
"data": {
"name": "曹卫清",
"phone": 13915736330,
"address": "常熟市支塘镇任阳社区朝阳路中段"
}
},
{
"name": "支塘镇盛泾水产医院",
"value": [120.933753, 31.553583],
"data": {
"name": "陈建青",
"phone": 13814959638,
"address": "常熟市支塘镇盛泾村"
}
},
{
"name": "常熟市水产投入品指导服务中心水产医院",
"value": [120.818733, 31.55352],
"data": {
"name": "庄闻天",
"phone": 15370178520,
"address": "沙家浜现代渔业产业园"
}
},
{
"name": "古里镇李市水产医院",
"value": [120.903725, 31.556593],
"data": {
"name": "沈聪裕",
"phone": 13862354996,
"address": "常熟市古里镇李市高效渔业水产园区"
}
},
{
"name": "辛庄镇水产医院",
"value": [120.683273, 31.544094],
"data": {
"name": "孔金妹",
"phone": 13773098508,
"address": "常熟市辛庄镇辛阳大道"
}
},
{
"name": "北滘张生兽医水产技术服务有限公司",
"value": [113.213702, 22.934016],
"data": {
"name": "张业添",
"phone": 13802649832,
"address": "佛山市顺德区北滘镇"
}
},
{
"name": "152团畜牧兽医工作站",
"value": [86.058694, 44.298272],
"data": {
"name": "李春雨",
"phone": 13809959446,
"address": "石河子市东一路128号"
}
}
]
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