Skip to content

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

接入数据

parent 8fa154c9
Expand all Show whitespace changes
Inline Side-by-side
Showing with 23955 additions and 346 deletions
.gitignore
View file @ 9ca238d3
# Logs
/crawler/
logs
*.log
npm-debug.log*
......
package-lock.json 0 → 100644
View file @ 9ca238d3
This diff is collapsed.
package.json
View file @ 9ca238d3
......@@ -51,6 +51,7 @@
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"node-xlsx": "^0.15.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
......
src/App.vue
View file @ 9ca238d3
......@@ -2,7 +2,7 @@
<div id="app">
<m-loader v-show="$store.state.showLoading"/>
<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"/>
</m-animate>
</div>
......
src/assets/css/reset.styl
View file @ 9ca238d3
$color-main = #5BD5FF
#app
#html
.date-picker.ivu-date-picker
.ivu-select-dropdown
margin-top -0.1rem
......
src/components/MonitorComponents/MonitorScroll/monitor-scroll.vue
View file @ 9ca238d3
......@@ -3,7 +3,7 @@
<div ref="scrollContent">
<slot />
</div>
<div v-if="!isShort" ref="subContent">
<div v-if="!isShort && !isTooLong" ref="subContent">
<slot />
</div>
</div>
......@@ -23,7 +23,7 @@ export default {
},
duration: {
type: Number,
default: 5000,
default: 3000,
},
mode: {
type: [Number, String],
......@@ -48,6 +48,9 @@ export default {
computed: {
isShort() {
return this.length <= this.limit
},
isTooLong() {
return this.length > 120
}
},
methods: {
......@@ -64,7 +67,7 @@ export default {
}
},
startMode1() {
const {subContent, scrollContent: content} = this.$refs.subContent
const {scrollContent: content, subContent} = this.$refs
let height = content.offsetHeight
this.timer = setInterval(() => {
......@@ -78,25 +81,25 @@ export default {
this.index = 0
}
content.style.transform = `translateY(${-this.index}px)`
subContent.style.transform = `translateY(${-this.index}px)`
}, 100)
subContent ? subContent.style.transform = `translateY(${-this.index}px)` : null
}, 50)
},
startMode2() {
const {subContent, scrollContent: content} = this.$refs.subContent
const {scrollContent: content, subContent} = this.$refs
const len = this.$com.confirm(content, 'children.length', 0)
this.timer = setInterval(() => {
if (this.index < len) {
this.index += 1
content.style.transition = 'transform 0.5s'
subContent.style.transition = 'transform 0.5s'
subContent ? subContent.style.transition = 'transform 0.5s' : null
} else {
this.index = 0
content.style.transition = 'none'
subContent.style.transition = 'none'
subContent ? subContent.style.transition = 'none' : null
}
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)
},
},
......@@ -104,7 +107,7 @@ export default {
length() {
this.clearTimer()
this.index = 0
const {subContent, scrollContent: content} = this.$refs
const {scrollContent: content, subContent} = this.$refs
if (content) {
content.style.transform = 'translateY(0)'
}
......
src/components/MonitorComponents/MonitorTitle/monitor-title.vue
View file @ 9ca238d3
......@@ -41,7 +41,7 @@ export default {
},
size: {
type: String,
default: '1.4rem',
default: '1.8rem',
},
},
data() {
......@@ -52,11 +52,11 @@ export default {
style: {},
curIndex: 0,
menus: [
{name: '病害防控', title: '病害防控大数据管理与服务平台', path: '/disease'},
{name: '病害防控', title: '病害防控大数据', path: '/disease'},
{name: '质量安全'},
{name: '稻鱼种养'},
{name: '海洋牧场'},
{name: '水产价格', title: '水产品价格分析驾驶舱', path: '/fishing-price'},
{name: '水产价格', title: '水产品价格分析', path: '/fishing-price'},
{name: '苗种数据'},
],
}
......
src/router/index.js
View file @ 9ca238d3
......@@ -10,7 +10,7 @@ export default new Router({
routes: [
{
path: '/',
redirect: '/fishing-price',
redirect: '/disease',
},
{
name: 'disease',
......
src/server/api.js
View file @ 9ca238d3
let BASE_URL = ''
let FILE_URL = ''
switch (process.env.NODE_ENV) {
case 'production':
BASE_URL = 'product_url'
FILE_URL = ''
break
default:
BASE_URL = 'default_url'
FILE_URL = 'http://localhost:8080/static/'
}
export default {
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 {
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 {
SET_CURDATE(state, 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 {
showLoading: false,
curDate: null,
diseaseSummary: [],
aquafarmPoints: [],
diseaseWarning: [],
mainYear: '2019',
}
src/views/components/consultation-sum.vue
View file @ 9ca238d3
......@@ -5,7 +5,7 @@
<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>
<div class="bar-wrapper"><div :style="`width:${item.rate}%;background-color:${colors[index] || '#25add1'}`"></div></div>
<m-count :value="item.count" :decimal="0"/>
</div>
</div>
......@@ -15,7 +15,7 @@
<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>
<div class="bar-wrapper"><div :style="`width:${item.rate}%;background-color:${colors[index] || '#25add1'}`"></div></div>
<m-count :value="item.count" :decimal="0"/>
</div>
</div>
......@@ -30,22 +30,35 @@ export default {
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},
{name: '广东省', count: 316, rate: 90},
{name: '江苏省', count: 254, rate: 80},
{name: '天津市', count: 118, rate: 70},
{name: '湖南省', count: 25, rate: 30},
{name: '江西省', count: 24, rate: 20},
{name: '海南省', count: 19, rate: 10},
{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: [
{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},
{name: '固着类纤毛虫病', count: 194, rate: 58},
{name: '肠炎病', count: 47, rate: 15},
{name: '烂鳃病', count: 21, rate: 8},
{name: '非生物引起的黑鳃病', count: 20, rate: 8},
{name: '小瓜虫病', count: 16, rate: 7},
{name: '细菌病', count: 14, rate: 6},
{name: '车轮虫病', count: 13, rate: 6},
{name: '淡水鱼类细菌性败血症', count: 9, rate: 5},
],
}
},
......@@ -70,13 +83,13 @@ export default {
font-size .9rem
.list-wrapper
height 80%
overflow-y auto
overflow-y scroll
padding-right .5rem
>div
display flex
align-items center
justify-content space-between
line-height 1.8
line-height 2.5
.bar-wrapper
flex 1
margin 0 .5rem
......
src/views/components/disease-forecast.vue
View file @ 9ca238d3
<template>
<div class="disease-forecast">
<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>
</Select>
</div>
</template>
<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'
export default {
name: 'DiseaseForecast',
data() {
return {
type: '小龙虾',
options: ['小龙虾'],
type: '青鱼',
options: [
'青鱼',
'草鱼',
'鲢',
'鳙',
'鲤',
'黄颡鱼',
'乌鳢',
'克氏原螯虾',
'南美白对虾',
],
chart: null,
option: {
tooltip: {
......@@ -43,14 +100,14 @@ export default {
},
fontSize: this.fontSize,
},
data: ['2014', '2015', '2016', '2017', '2018', '2019', '2020'],
data: ['2016', '2017', '2018', '2019', '2020'],
},
yAxis: {
type: 'value',
// name: '单位：个',
max: 500,
min: 0,
interval: 100,
// interval: 100,
axisLine: {
show: false,
},
......@@ -70,17 +127,10 @@ export default {
}
},
},
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]},
],
series: [],
dataZoom: [{
start: 10,
end: 80,
start: 50,
end: 100,
backgroundColor: '#105179',
fillerColor: '#46b9ef',
borderColor: 'transparent',
......@@ -110,8 +160,24 @@ export default {
methods: {
init() {
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)
}
},
}
}
</script>
......
src/views/components/disease-map.vue
View file @ 9ca238d3
......@@ -6,43 +6,43 @@
<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 }
]
// const mapData = [
// {name: '海门', value: [121.15, 31.89]},
// {name: '鄂尔多斯', value: [109.781327, 39.608266]},
// {name: '招远', value: [120.38, 37.35]},
// {name: '舟山', value: [122.207216, 29.985295]},
// // { 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: {
......@@ -60,26 +60,19 @@ export default {
},
visualFormatter: {
type: [String, Function],
// default: '{b}<br/>综合种养产量：{c}吨'
default() {
return () => {
// const {data} = e
return ({data}) => {
const {data: info} = data
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>
<h3>${data.name}</h3>
<p><span>联系人：</span>${info.name}</p>
<p><span>联系电话：</span>${info.phone}</p>
<p><span>地址：</span>${info.address}</p>
${info.type ? `<p><span>监测点类型：</span>${info.type}</p>` : ''}
${info.variety ? `<p><span>养殖品种：</span>${info.variety}</p>` : ''}
</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 {
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.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,
......@@ -213,31 +206,26 @@ export default {
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)
// }
// }
// }
watch: {
'$store.state.aquafarmPoints': {
handler(cur, past) {
if (cur && cur !== past && cur.length > 0) {
this.config.series = [{
type: 'scatter', // series图表类型
coordinateSystem: 'geo', // series坐标系类型
data: cur,
itemStyle: {
color: 'gold'
},
symbolSize: 20 * this.sizeRate,
symbol: 'pin',
}]
this.map && this.map.setOption(this.config)
}
},
immediate: true,
}
}
}
</script>
......
src/views/components/disease-sum.vue
View file @ 9ca238d3
......@@ -4,34 +4,15 @@
<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>
<BorderBox v-for="data in $store.state.diseaseSummary" :key="data.title">
<h3>{{data.title}}</h3>
<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>
<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>
......@@ -47,25 +28,16 @@ export default {
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
if (name === '鱼病医院') {
this.$store.dispatch('getAquafarmPoints', 'hospital')
} else {
this.$store.dispatch('getAquafarmPoints')
}
},
}
}
......
src/views/components/disease-warning.vue
View file @ 9ca238d3
<template>
<div class="disease-warning">
<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>
</Select>
<div class="map" ref="map" />
......@@ -10,41 +10,41 @@
<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 }
]
// 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',
name: 'DiseaseWarning',
data() {
return {
mapName: 'china',
......@@ -65,7 +65,13 @@ export default {
},
tooltip: {
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: {
show: false,
......@@ -73,6 +79,7 @@ export default {
visualMap: {
min: 0,
max: 200,
itemWidth: 10,
left: 'auto',
right: 0,
realtime: false,
......@@ -84,32 +91,64 @@ export default {
color: ['green', 'yellow', 'red']
}
},
series: [
{
type: 'map',
geoIndex: 0,
map: this.mapName,
data: mapData,
}
],
series: [],
},
options: [
'小龙虾',
'草鱼',
'黄颡鱼',
'克氏原螯虾',
'鲤',
'鲢',
'南美白对虾',
'青鱼',
'乌鳢',
'鳙',
],
type: '小龙虾',
type: '草鱼',
}
},
mounted() {
// this.$nextTick(this.init)
setTimeout(this.init, 0)
},
computed: {
diseaseWarning() {
return this.$store.state.diseaseWarning
},
},
methods: {
init() {
this.$echarts.registerMap(this.mapName, china)
this.map = this.$echarts.init(this.$refs.map)
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>
......
src/views/components/fishing-price-map.vue
View file @ 9ca238d3
This diff is collapsed.
src/views/components/new-quotation.vue
View file @ 9ca238d3
This diff is collapsed.
src/views/components/price-analysis.vue
View file @ 9ca238d3
<template>
<div class="price-analysis" v-if="showChart">
<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>
</template>
<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 {
name: 'PriceAnalysis',
data() {
return {
type: '青鱼',
options: [
'青鱼',
'草鱼',
'鲢',
'鳙',
'南美白对虾',
'中华绒螯蟹',
'克氏原螯虾'
],
showChart: false,
config: {
colors: ['#eeb514', '#5eec67', '#01adfe'],
legend: {align: 'right'},
shape: [
{key: 'fish1', name: '草鱼', type: 'line'},
{key: 'fish2', name: '鲫鱼', type: 'line'},
{key: 'fish3', name: '南美白对虾', type: 'line'},
{key: 'value', type: 'line'},
// {key: 'fish2', name: '鲫鱼', type: 'line'},
// {key: 'fish3', name: '南美白对虾', type: 'line'},
],
yAxis: {
name: '元',
max: 50,
// max: 50,
},
xAxis: {
key: 'date',
}
},
data: [
{date: '2020.3', fish1: 10, fish2: 15, fish3: 25},
{date: '2020.4', fish1: 10, fish2: 18, fish3: 28},
{date: '2020.5', fish1: 20, fish2: 25, fish3: 27},
{date: '2020.6', fish1: 15, fish2: 15, fish3: 29},
{date: '2020.7', fish1: 10, fish2: 12, fish3: 31},
{date: '2020.8', fish1: 11, fish2: 18, fish3: 24},
{date: '2020.9', fish1: 12, fish2: 11, fish3: 29},
// {date: '2020.3', fish1: 10, fish2: 15, fish3: 25},
// {date: '2020.4', fish1: 10, fish2: 18, fish3: 28},
// {date: '2020.5', fish1: 20, fish2: 25, fish3: 27},
// {date: '2020.6', fish1: 15, fish2: 15, fish3: 29},
// {date: '2020.7', fish1: 10, fish2: 12, fish3: 31},
// {date: '2020.8', fish1: 11, fish2: 18, fish3: 24},
// {date: '2020.9', fish1: 12, fish2: 11, fish3: 29},
],
}
},
mounted() {
setTimeout(() => this.showChart = true, 0)
this.setChartData(this.type)
},
methods: {
setChartData(type) {
this.data = mock.filter(item => item.type === type)
},
}
}
</script>
......
src/views/components/price-trend.vue
View file @ 9ca238d3
<template>
<div class="price-trend">
<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>
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 {
name: 'PriceTrend',
data() {
return {
disease: '2019',
options: ['2019', '2020'],
chart: null,
option: {
tooltip: {
......@@ -51,15 +84,15 @@ export default {
},
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: [
{
type: 'value',
// name: '单位：个',
max: 1.20,
min: 0.95,
interval: 0.05,
max: 1.8,
min: 0.8,
// interval: 0.05,
axisLine: {
show: false,
},
......@@ -81,16 +114,18 @@ export default {
},
],
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: '#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: '#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: '#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: '#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: '#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: '#e052fc'}, type: 'line', data: mock.map(item => item.val1)},
{name: '综合-不具可比性', itemStyle: {color: '#8078fb'}, type: 'line', data: mock.map(item => item.val2)},
{name: '海水产品-具有可比性', itemStyle: {color: '#43befc'}, type: 'line', data: mock.map(item => item.val3)},
{name: '海水产品-不具可比性', itemStyle: {color: '#1ef9f4'}, type: 'line', data: mock.map(item => item.val4)},
{name: '淡水产品-具有可比性', itemStyle: {color: '#3afe85'}, type: 'line', data: mock.map(item => item.val5)},
{name: '淡水产品-不具可比性', itemStyle: {color: '#fcee38'}, type: 'line', data: mock.map(item => item.val6)},
],
dataZoom: [{
start: 10,
end: 80,
start: 50,
end: 100,
// yAxisIndex: 0,
// orient: 'horizontal',
backgroundColor: '#105179',
fillerColor: '#46b9ef',
borderColor: 'transparent',
......
src/views/components/questions.vue
View file @ 9ca238d3
<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>
年问答量：<span class="blue"><m-count color="#5bd5ff" :value="14586" :decimal="0"/> 次</span>&nbsp;&nbsp;&nbsp;
月问答量：<span class="blue"><m-count color="#5bd5ff" :value="1865" :decimal="0"/> 次</span>
</p>
<div v-for="(item, index) in list" :key="index">
<m-scroll :length="list.length" :limit="4">
<div v-for="(item, index) in list" :key="index" class="item">
<span>{{item.name}}</span>
<p>问：{{item.question}}</p>
<span>{{item.time}}分钟前</span>
<span class="blue"><Icon type="md-text" /> {{item.reply}}</span>
</div>
</m-scroll>
</div>
</template>
......@@ -19,10 +21,11 @@ export default {
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},
{name: '张恒', question: '高温天气草鱼生病是不是和养殖密度有很大的关系？', time: 2, reply: 3},
{name: '李星辰', question: '鱼头部和脊背发黑，独游，不吃食物到底是什么原因？', time: 8, reply: 6},
{name: '王兴鑫', question: '昨天夜间10时，鱼浮头的次数明显变得频繁了很多，什么原因？', time: 15, reply: 2},
{name: '周岩', question: '水温12-20℃的时候，鱼种成群打架，什么原因？', time: 26, reply: 3},
{name: '汪天', question: '为什么鱼病常在夏秋两季流行?', time: 60, reply: 8},
],
}
},
......@@ -33,15 +36,15 @@ export default {
.questions
width 100%
height 100%
overflow hidden
>p
text-align center
>div
.item
display flex
align-items center
justify-content space-around
padding .7rem 0
&+div
border-top .1rem solid $cardFontColor
border-bottom .1rem solid $cardFontColor
span
color $edgeColor
display inline-block
......
src/views/components/special-monitoring.vue
View file @ 9ca238d3
<template>
<div class="special-monitoring">
<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>
</Select>
</div>
</template>
<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 {
name: 'SpecialMonitoring',
data() {
return {
disease: '出血性腐烂病',
options: ['出血性腐烂病'],
disease: '鲤春病毒血症',
options: ['鲤春病毒血症', '白斑综合征', '草鱼出血病', '锦鲤疱疹病毒病'],
chart: null,
option: {
tooltip: {
......@@ -49,15 +63,15 @@ export default {
},
fontSize: this.fontSize,
},
data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'],
data: ['2017', '2018', '2019'],
},
yAxis: [
{
type: 'value',
// name: '单位：个',
max: 400,
max: 150,
min: 0,
interval: 100,
interval: 30,
axisLine: {
show: false,
},
......@@ -80,9 +94,9 @@ export default {
{
type: 'value',
// name: '单位：个',
max: 600,
max: 350,
min: 0,
interval: 150,
interval: 70,
axisLine: {
show: false,
},
......@@ -103,13 +117,10 @@ export default {
},
}
],
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]},
],
series: [],
dataZoom: [{
start: 10,
end: 80,
start: 0,
end: 100,
backgroundColor: '#105179',
fillerColor: '#46b9ef',
borderColor: 'transparent',
......@@ -139,8 +150,16 @@ export default {
methods: {
init() {
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)
}
},
}
}
</script>
......
src/views/components/team-build.vue
View file @ 9ca238d3
......@@ -6,20 +6,49 @@
<div v-if="showChart">
<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">
<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>
</Select>
</div>
</template>
<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 {
name: 'TeamBuild',
data() {
return {
showChart: false,
area: '华北地区',
options: ['华北地区'],
options: ['华北地区', '华东地区', '华南地区', '华西地区', '华中地区'],
config: {
colors: ['#535af1', '#39d655', '#ffd825'],
legend: {
......@@ -27,13 +56,13 @@ export default {
orient: 'vertical',
},
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: [
{name: '执业人员', value: 50},
{name: '乡村兽医', value: 30},
{name: '官方兽医', value: 20},
{name: '执业人员', value: 168},
{name: '乡村兽医', value: 1585},
{name: '官方兽医', value: 23654},
],
config2: {
colors: ['#00d2ff'],
......@@ -41,7 +70,7 @@ export default {
hide: true,
},
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: {
key: 'name',
......@@ -49,21 +78,21 @@ export default {
yAxis: {
axisLabel: {show: false},
axisLine: {show: false},
max: 15,
max: 30,
}
},
data2: [
{name: '北京', value: 3},
{name: '天津', value: 4},
{name: '河北', value: 2},
{name: '山西', value: 7},
{name: '内蒙古', value: 10},
],
data2: [],
}
},
mounted() {
this.data2 = mock.filter(item => item.area === this.area)
setTimeout(() => this.showChart = true, 0)
},
methods: {
handleChange(area) {
this.data2 = mock.filter(item => item.area === area)
}
}
}
</script>
......
src/views/components/trade-situation.vue
View file @ 9ca238d3
......@@ -13,6 +13,46 @@
</template>
<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 {
name: 'TradeSituation',
data() {
......@@ -24,16 +64,10 @@ export default {
hide: true,
},
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: [
{name: '鱼类', value: 36},
{name: '虾类', value: 24},
{name: '蟹类', value: 12},
{name: '贝类', value: 12},
{name: '其他', value: 8},
],
data: [],
config2: {
colors: [['#18a6ee', '#6f63ed']],
legend: {
......@@ -45,23 +79,32 @@ export default {
xAxis: {
key: 'name',
},
yAxis: {
max: 500000,
}
},
data2: [
{name: '鱼类', value: 450000},
{name: '虾类', value: 350000},
{name: '贝类', value: 400000},
{name: '蟹类', value: 210000},
{name: '藻类', value: 430000},
{name: '其他', value: 310000},
],
data2: [],
}
},
mounted() {
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>
......
src/views/disease.vue
View file @ 9ca238d3
......@@ -41,6 +41,7 @@ import Questions from './components/questions'
import SpecialMonitoring from './components/special-monitoring'
import DiseaseForeCast from './components/disease-forecast'
import DiseaseSum from './components/disease-sum'
import {mapActions} from 'vuex'
export default {
name: 'Main',
components: {
......@@ -53,5 +54,20 @@ export default {
DiseaseForeCast,
DiseaseSum,
},
mounted() {
this.$nextTick(this.init)
},
methods: {
...mapActions([
'getDiseaseSummary',
'getAquafarmPoints',
'getDiseaseWarning',
]),
init() {
this.getDiseaseSummary()
this.getAquafarmPoints()
this.getDiseaseWarning()
}
},
}
</script>
src/views/fishing-price.vue
View file @ 9ca238d3
<template>
<m-grid
:template="[
'map select select',
'map box1 box1',
'map box2 box3',
'map box2 box4',
]"
columns="1fr 0.6fr 0.6fr"
rows="1fr 1fr 1fr"
rows="2rem 1fr 1fr 1fr"
gap="0.5rem"
>
<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="价格指数走势图">
<PriceTrend />
</m-card>
......@@ -41,11 +48,24 @@ export default {
NewQuotation,
},
data() {
return {}
return {
disease: '2019',
options: ['2019', '2018', '2017'],
}
},
}
</script>
<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>
static/aquafarm-points.json 0 → 100644
View file @ 9ca238d3
This diff is collapsed.
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