Skip to content

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

水产价格

parent 95a84f90
Show whitespace changes
Inline Side-by-side
Showing with 840 additions and 36 deletions
src/App.vue
View file @ 8fa154c9
...@@ -2,18 +2,15 @@ ...@@ -2,18 +2,15 @@
<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')"/>
<DiseaseMap /> <m-animate enter="fadeInUp" leave="fadeOutDown">
<router-view :key="$route.fullPath"/> <router-view class="router-view" :key="$route.fullPath"/>
</m-animate>
</div> </div>
</template> </template>
<script> <script>
import DiseaseMap from './views/components/disease-map'
export default { export default {
name: 'App', name: 'App',
components: {
DiseaseMap,
}
} }
</script> </script>
...@@ -22,6 +19,8 @@ export default { ...@@ -22,6 +19,8 @@ export default {
background url('./assets/images/bg.png') no-repeat background url('./assets/images/bg.png') no-repeat
background-size 110% background-size 110%
background-position 90% -50% background-position 90% -50%
.router-view
height calc(100% - 4rem)
</style> </style>
<style lang="stylus"> <style lang="stylus">
@import './assets/css/reset.styl' @import './assets/css/reset.styl'
......
src/assets/css/reset.styl
View file @ 8fa154c9
...@@ -40,6 +40,18 @@ $color-main = #5BD5FF ...@@ -40,6 +40,18 @@ $color-main = #5BD5FF
&.ivu-select-item-selected &.ivu-select-item-selected
color $edgeColor color $edgeColor
font-weight bold font-weight bold
.ivu-slider-wrap
height 1.2rem
border-radius 1rem
background-color $color-map()
.ivu-slider-bar
height inherit
background linear-gradient(to right, #8ce3fa, #267ee1)
.ivu-slider-button
width .8rem
height 2rem
border-radius 1rem
.custom-select .custom-select
position absolute position absolute
top 1rem top 1rem
......
src/components/MonitorComponents/MonitorCard/mode1.vue
View file @ 8fa154c9
<template> <template>
<div class="card-wrapper" :style="`background-image:url(${require('@/assets/images/card-bg.png')})`"> <div class="card-wrapper">
<img class="edge-head" src="@/assets/images/card-head.png"/>
<div class="edge bar left"/>
<div class="edge bar right"/>
<div class="edge top-left"/>
<div class="edge top-right"/>
<div class="edge bottom-left"/>
<div class="edge bottom-right"/>
<div class="card-title" :style="`color:${color}`"> <div class="card-title" :style="`color:${color}`">
<img src="@/assets/images/arrow.png"/> <img src="@/assets/images/arrow.png"/>
{{title}} {{title}}
...@@ -28,7 +35,7 @@ export default { ...@@ -28,7 +35,7 @@ export default {
<style lang="stylus" scoped> <style lang="stylus" scoped>
.card-wrapper .card-wrapper
background-size cover position relative
.card-title .card-title
display flex display flex
align-items center align-items center
...@@ -42,4 +49,47 @@ export default { ...@@ -42,4 +49,47 @@ export default {
width 1rem width 1rem
// .card-content // .card-content
// padding 0.5rem 1rem // padding 0.5rem 1rem
.edge-head
position absolute
top 0
left 0
right 0
margin auto
width 50%
max-height 0.6rem
.edge
position absolute
height 0
width 0
border .2rem solid $edgeColor
&.top-left
top 0
left 0
border-right-color transparent
border-bottom-color transparent
&.top-right
top 0
right 0
border-left-color transparent
border-bottom-color transparent
&.bottom-left
bottom 0
left 0
border-radius 50%
&.bottom-right
bottom 0
right 0
border-radius 50%
&.bar
border none
background-color $edgeColor
width .4rem
height 6rem
top 3rem
&.left
transform skew(45deg) rotate(45deg)
left 0
&.right
right 0
transform skew(-45deg) rotate(-45deg)
</style> </style>
src/components/MonitorComponents/MonitorCard/monitor-card.vue
View file @ 8fa154c9
...@@ -44,6 +44,7 @@ $size() ...@@ -44,6 +44,7 @@ $size()
.monitor-card .monitor-card
$size() $size()
$blur() $blur()
background-color rgba(0,0,0,0.4)
overflow hidden overflow hidden
height initial height initial
width initial width initial
......
src/components/MonitorComponents/MonitorChart/monitor-chart.vue
View file @ 8fa154c9
...@@ -179,12 +179,16 @@ export default { ...@@ -179,12 +179,16 @@ export default {
shadowBlur: 6, shadowBlur: 6,
} }
} }
let borderRadius = {}
if (item.borderRadius) {
borderRadius = {barBorderRadius: item.borderRadius}
}
const result = { const result = {
barWidth: '50%', barWidth: '50%',
barGap: 0, barGap: 0,
smooth: true, smooth: true,
symbol: 'circle', symbol: 'circle',
itemStyle: { color, ...shadow }, itemStyle: { color, ...shadow, ...borderRadius },
data: this.dataSource[index].data || [], data: this.dataSource[index].data || [],
...item, ...item,
} }
...@@ -339,6 +343,7 @@ export default { ...@@ -339,6 +343,7 @@ export default {
} }
}, },
yAxis: { yAxis: {
name: '',
nameTextStyle: { nameTextStyle: {
color: '#fff', color: '#fff',
fontSize: this.fontSize, fontSize: this.fontSize,
......
src/components/MonitorComponents/MonitorTable/monitor-table.vue
View file @ 8fa154c9
<template> <template>
<div class="monitor-table"> <div class="monitor-table" :style="`font-size:${size}`">
<p v-if="title" class="title">{{title}}</p> <p v-if="title" class="title">{{title}}</p>
<Row class="row row-title" v-if="mode == '1'"> <Row class="row row-title" v-if="mode == '1'">
<i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0"> <i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0">
...@@ -77,7 +77,11 @@ export default { ...@@ -77,7 +77,11 @@ export default {
mode: { mode: {
type: String, type: String,
default: '1', default: '1',
} },
size: {
type: String,
default: '1rem'
},
}, },
data() { data() {
return { return {
...@@ -115,7 +119,6 @@ export default { ...@@ -115,7 +119,6 @@ export default {
line-height 2.4rem line-height 2.4rem
&.row-title &.row-title
font-weight bold font-weight bold
font-size 1.1rem
background-color $color-map() background-color $color-map()
&:nth-child(2n) &:nth-child(2n)
background-color $color-map(0.15) background-color $color-map(0.15)
......
src/components/MonitorComponents/MonitorTitle/monitor-title.vue
View file @ 8fa154c9
...@@ -9,10 +9,10 @@ ...@@ -9,10 +9,10 @@
<img :src="bgImg" draggable="false"/> <img :src="bgImg" draggable="false"/>
<p :style="style">{{menus[curIndex].title}}</p> <p :style="style">{{menus[curIndex].title}}</p>
<div class="menu menu-left"> <div class="menu menu-left">
<div @click="curIndex = menus.indexOf(item)" v-for="item in menus.slice(0,3)" :key="item.name" :class="`${menus[curIndex].name === item.name ? 'on' : ''}`"><span>{{item.name}}</span></div> <div @click="handleSelect(item)" v-for="item in menus.slice(0,3)" :key="item.name" :class="`${menus[curIndex].name === item.name ? 'on' : ''}`"><span>{{item.name}}</span></div>
</div> </div>
<div class="menu menu-right"> <div class="menu menu-right">
<div @click="curIndex = menus.indexOf(item)" v-for="item in menus.slice(3)" :key="item.name" :class="`${menus[curIndex].name === item.name ? 'on' : ''}`"><span>{{item.name}}</span></div> <div @click="handleSelect(item)" v-for="item in menus.slice(3)" :key="item.name" :class="`${menus[curIndex].name === item.name ? 'on' : ''}`"><span>{{item.name}}</span></div>
</div> </div>
</div> </div>
</template> </template>
...@@ -52,11 +52,11 @@ export default { ...@@ -52,11 +52,11 @@ export default {
style: {}, style: {},
curIndex: 0, curIndex: 0,
menus: [ menus: [
{name: '病害防控', title: '病害防控大数据管理与服务平台'}, {name: '病害防控', title: '病害防控大数据管理与服务平台', path: '/disease'},
{name: '质量安全'}, {name: '质量安全'},
{name: '稻鱼种养'}, {name: '稻鱼种养'},
{name: '海洋牧场'}, {name: '海洋牧场'},
{name: '水产价格', title: '水产品价格分析驾驶舱'}, {name: '水产价格', title: '水产品价格分析驾驶舱', path: '/fishing-price'},
{name: '苗种数据'}, {name: '苗种数据'},
], ],
} }
...@@ -75,6 +75,12 @@ export default { ...@@ -75,6 +75,12 @@ export default {
} }
} }
this.style = {...this.style, 'font-size': this.size} this.style = {...this.style, 'font-size': this.size}
const {path} = this.$route
if (path === '/') {
this.curIndex = 0
} else {
this.curIndex = this.menus.findIndex(menu => path === menu.path)
}
}, },
beforeDestroy() { beforeDestroy() {
clearInterval(this.timer) clearInterval(this.timer)
...@@ -98,6 +104,12 @@ export default { ...@@ -98,6 +104,12 @@ export default {
this.$store.commit('SET_CURDATE', date) this.$store.commit('SET_CURDATE', date)
this.openDatePicker = false this.openDatePicker = false
}, },
handleSelect(item) {
this.curIndex = this.menus.indexOf(item)
if (item.path) {
this.$router.push({path: item.path})
}
},
} }
} }
</script> </script>
......
src/main.js
View file @ 8fa154c9
...@@ -5,7 +5,7 @@ import Vue from 'vue' ...@@ -5,7 +5,7 @@ import Vue from 'vue'
import App from './App' import App from './App'
import router from './router' import router from './router'
import store from './store' import store from './store'
import {Row, Col, Select, Option, DatePicker, Icon} from 'view-design' import {Row, Col, Select, Option, DatePicker, Icon, Slider} from 'view-design'
import ajax from '@/server/ajax' import ajax from '@/server/ajax'
import api from '@/server/api' import api from '@/server/api'
import common from '@/util/common' import common from '@/util/common'
...@@ -29,6 +29,7 @@ Vue.component('Select', Select) ...@@ -29,6 +29,7 @@ Vue.component('Select', Select)
Vue.component('Option', Option) Vue.component('Option', Option)
Vue.component('DatePicker', DatePicker) Vue.component('DatePicker', DatePicker)
Vue.component('Icon', Icon) Vue.component('Icon', Icon)
Vue.component('Slider', Slider)
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
el: '#app', el: '#app',
......
src/router/index.js
View file @ 8fa154c9
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
const Main = () => import('@/views/main') const Disease = () => import('@/views/disease')
const FishingPrice = () => import('@/views/fishing-price')
Vue.use(Router) Vue.use(Router)
...@@ -9,8 +10,17 @@ export default new Router({ ...@@ -9,8 +10,17 @@ export default new Router({
routes: [ routes: [
{ {
path: '/', path: '/',
name: 'main', redirect: '/fishing-price',
component: Main, },
{
name: 'disease',
path: '/disease',
component: Disease,
},
{
name: 'fishing-price',
path: '/fishing-price',
component: FishingPrice,
}, },
] ]
}) })
src/views/components/disease-forecast.vue
View file @ 8fa154c9
...@@ -99,7 +99,8 @@ export default { ...@@ -99,7 +99,8 @@ export default {
} }
}, },
mounted() { mounted() {
this.$nextTick(this.init) // this.$nextTick(this.init)
setTimeout(this.init, 0)
}, },
computed: { computed: {
fontSize() { fontSize() {
...@@ -121,5 +122,5 @@ export default { ...@@ -121,5 +122,5 @@ export default {
height 100% height 100%
>.chart >.chart
width 100% width 100%
height 70% height 95%
</style> </style>
src/views/components/disease-map.vue
View file @ 8fa154c9
<template> <template>
<div class="map-wrapper"> <div class="map-wrapper">
<div id="map" ref="map"/> <div ref="map"/>
</div> </div>
</template> </template>
...@@ -246,7 +246,7 @@ export default { ...@@ -246,7 +246,7 @@ export default {
width 42% width 42%
height 94% height 94%
position absolute position absolute
#map >div
width 100% width 100%
height 100% height 100%
z-index 99 z-index 99
......
src/views/components/disease.vue → src/views/components/disease-warning.vue
View file @ 8fa154c9
<template> <template>
<div class="disease"> <div class="disease-warning">
<p>预警指标：预报，问诊，用药，天气情况</p> <p>预警指标：预报，问诊，用药，天气情况</p>
<Select v-model="type" class="custom-select" size="small"> <Select v-model="type" class="custom-select" size="small">
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option> <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
...@@ -100,7 +100,8 @@ export default { ...@@ -100,7 +100,8 @@ export default {
} }
}, },
mounted() { mounted() {
this.$nextTick(this.init) // this.$nextTick(this.init)
setTimeout(this.init, 0)
}, },
methods: { methods: {
init() { init() {
...@@ -108,12 +109,12 @@ export default { ...@@ -108,12 +109,12 @@ export default {
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)
}, },
} },
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.disease .disease-warning
width 100% width 100%
height 100% height 100%
.map .map
......
src/views/components/fishing-price-map.vue 0 → 100644
View file @ 8fa154c9
<template>
<div class="map-wrapper">
<BorderBox class="sum">
<p>采集点数量</p>
<h2><m-count class="count" :value="6884785" :decimal="0"/> 个</h2>
</BorderBox>
<div class="map" ref="map"/>
<div class="visual-range">
<p>
采集点数量<br/>
<span>（单位：个）</span>
</p>
<div class="slider-wrapper">
<Slider class="slider" v-model="range" :step="100" range :max="6884785"/>
<m-count class="count" :value="0" :decimal="0"/>
<m-count class="count" :value="6884785" :decimal="0"/>
</div>
</div>
</div>
</template>
<script>
import china from 'echarts/map/json/china.json'
import BorderBox from './border-box'
const mapData = [
{name: '海门', value: [121.15, 31.89, 90], visualMap: false},
{name: '鄂尔多斯', value: [109.781327, 39.608266, 120], visualMap: false},
{name: '招远', value: [120.38, 37.35, 142], visualMap: false},
{name: '舟山', value: [122.207216, 29.985295, 123], visualMap: false},
]
const provinceData = [
{ 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: 'FishingPriceMap',
components: {
BorderBox,
},
props: {
data: {
type: Array,
default() {
return []
}
},
visualLabel: {
type: Array,
default() {
return ['高', '低']
}
},
visualFormatter: {
type: [String, Function],
default() {
return () => {
return `
<div class="disease-map-tooltip-info">
<h3>采集点名称</h3>
<p><span>地址：</span>苏州市吴中区金庭镇</p>
<p><span>最新采集时间：</span>2020-08-23 15:57:00</p>
</div>
`
}
}
},
visualConfig: {
type: Object,
default() {
return {}
}
},
},
data() {
return {
range: [0, 6884785],
map: null,
mapName: 'china',
config: {
geo: {
map: 'china',
left: '1%',
right: '1%',
// top: 'auto',
// bottom: '10%',
zoom: 1, //当前视角的缩放比例
// roam: true, //是否开启平游或缩放
// scaleLimit: { //滚轮缩放的极限控制
// min: 0.8,
// max: 2,
// },
label: {
normal: {
show: true,
color: '#fff',
fontSize: 12 * this.sizeRate,
},
emphasis: {
color: '#fff',
fontSize: 15 * this.sizeRate,
// fontFamily: 'Pangmenzhengdao',
}
},
itemStyle: {
normal: {
// areaColor: 'rgba(91, 213, 255, 0.2)',
borderColor: 'rgba(91, 213, 255, 0.9)',
borderWidth: 0.5,
},
emphasis: {
areaColor: '#069ae1',
}
},
regions: [],
},
series: []
},
curProvince: null,
}
},
mounted() {
this.$nextTick(this.initMap)
},
computed: {
sizeRate() {
return Number((screen.height / 800).toFixed(1))
},
},
methods: {
initMap() {
// 初始化echarts
this.$echarts.registerMap(this.mapName, china)
this.map = this.$echarts.init(this.$refs.map)
// this.addEvent()
this.config.series.push({
type: 'map',
map: this.mapName,
geoIndex: 0,
data: provinceData,
})
this.config.series.push({
type: 'scatter', // series图表类型
coordinateSystem: 'geo', // series坐标系类型
data: mapData,
itemStyle: {
color: 'gold'
},
symbolSize: 20 * this.sizeRate,
symbol: 'pin',
geoIndex: 0,
})
this.config.tooltip = {
trigger: 'item',
formatter: this.visualFormatter,
// extraCssText: `background-image:url(${require('@/assets/images/tooltip.png')});background-size:cover;`,
}
this.config.visualMap = Object.assign({
show: false,
inRange: {
// opacity: 1,
color: ['rgba(140,228,252,0.1)', '#0ed7e1', '#069ae1']
// color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.8)']
}
}, this.visualConfig)
this.map.setOption(this.config)
},
addEvent() {
// 监听地图点击事件
this.map.on('click', (ev) => {
const {name} = ev.data
console.log(name)
this.setRegions(name)
this.curProvince = name
this.$emit('select', name)
})
// 点击空白处则取消选中状态
this.map.getZr().on('click', e => {
if (!e.target && this.curProvince) {
const name = this.curProvince
this.setRegions(null)
this.$emit('select', name)
}
})
},
setRegions(name) {
this.curProvince = name
if (!name) {
this.config.geo.regions = []
this.map.setOption(this.config)
return
}
let regions = [{
name,
selected: true,
itemStyle: {
areaColor: '#5ad4ff',
shadowColor: 'rgba(0, 0, 0, 1)',
shadowBlur: 10,
shadowOffsetY: 10,
shadowOffsetX: -5,
}
}]
if (this.config.geo.regions.length > 0 && this.config.geo.regions[0].name == name) {
regions = []
}
this.config.geo.regions = regions
this.map.setOption(this.config)
},
},
// watch: {
// data(cur, past) {
// if (cur && cur !== past && cur.length > 0) {
// this.config.series.push({
// type: 'scatter',
// coordinateSystem: 'geo',
// // map: this.mapName,
// // geoIndex: 0,
// data: cur,
// })
// this.config.tooltip = {
// trigger: 'item',
// formatter: this.visualFormatter,
// }
// // this.config.visualMap = Object.assign({
// // show: false,
// // inRange: {
// // opacity: 0.5,
// // color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.8)']
// // }
// // }, this.visualConfig)
// this.map.setOption(this.config)
// }
// }
// }
}
</script>
<style lang="stylus" scoped>
.map-wrapper
width 100%
height 100%
position relative
>.map
position absolute
width 45%
height 250%
z-index 99
>.sum
width 40%
margin 2rem auto 0
text-align center
font-weight bold
h2,.count
color $edgeColor !important
font-family $font-pang !important
font-size 1.5rem !important
.visual-range
display flex
z-index 9999
width 100%
align-items center
justify-content center
position absolute
bottom 2rem
p
text-align center
margin-right 1rem
span
font-size .8rem
.slider-wrapper
position relative
width 60%
.slider
width 100%
.count
position absolute
&:first-child
left 0
&:last-child
right 0
</style>
<style lang="stylus">
.disease-map-tooltip-info
color $edgeColor
padding 1rem
border .1rem solid $edgeColor
span
color #fff
</style>
src/views/components/new-quotation.vue 0 → 100644
View file @ 8fa154c9
<template>
<div>
<m-table :layout="layout" :model="data" size="0.8rem"/>
</div>
</template>
<script>
export default {
name: 'NewQuotation',
data() {
return {
layout: [
{
title: '日期',
key: 'date',
width: 4,
},
{
title: '品种',
key: 'type',
width: 4,
},
{
title: '规格',
key: 'size',
width: 6,
},
{
title: '价格',
key: 'price',
width: 5,
},
{
title: '成交量',
key: 'num',
width: 5,
},
],
data: [
{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>
<style lang="stylus" scoped>
</style>
src/views/components/price-analysis.vue 0 → 100644
View file @ 8fa154c9
<template>
<div class="price-analysis" v-if="showChart">
<m-chart :config="config" :data="data"/>
</div>
</template>
<script>
export default {
name: 'PriceAnalysis',
data() {
return {
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'},
],
yAxis: {
name: '元',
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},
],
}
},
mounted() {
setTimeout(() => this.showChart = true, 0)
},
}
</script>
<style lang="stylus" scoped>
.price-analysis
width 100%
height 100%
</style>
src/views/components/price-trend.vue 0 → 100644
View file @ 8fa154c9
<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>
export default {
name: 'PriceTrend',
data() {
return {
disease: '2019',
options: ['2019', '2020'],
chart: null,
option: {
tooltip: {
trigger: 'axis',
confine: true,
},
legend: {
width: '100%',
textStyle: {
color: '#ccc',
fontSize: this.fontSize,
},
data: ['综合-具有可比性', '综合-不具可比性', '海水产品-具有可比性', '海水产品-不具可比性', '淡水产品-具有可比性', '淡水产品-不具可比性'],
},
grid: {
top: '30%',
left: '5%',
right: '1%',
bottom: 'auto',
width: 'auto',
height: '60%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.1)'
}
},
axisLabel: {
textStyle: {
color: '#46b9ef',
},
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', ],
},
yAxis: [
{
type: 'value',
// name: '单位：个',
max: 1.20,
min: 0.95,
interval: 0.05,
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#fff',
},
fontSize: this.fontSize,
},
nameTextStyle: {
color: '#ccc',
fontSize: this.fontSize,
},
splitLine: {
lineStyle: {
color: 'rgba(91,213,255,0.1)'
}
},
},
],
series: [
{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]},
],
dataZoom: [{
start: 10,
end: 80,
backgroundColor: '#105179',
fillerColor: '#46b9ef',
borderColor: 'transparent',
bottom: '2%',
height: 10,
borderRadius: 10,
handleSize: '200%',
handleStyle: {
color: '#fff',
},
textStyle: {
color: '#fff',
},
}],
}
}
},
mounted() {
// this.$nextTick(this.init)
setTimeout(this.init, 0)
},
computed: {
fontSize() {
return Math.floor(screen.height * 1.48 / 100)
},
},
methods: {
init() {
this.chart = this.$echarts.init(this.$refs.chart)
this.chart.setOption(this.option)
}
}
}
</script>
<style lang="stylus" scoped>
.price-trend
width 100%
height 100%
>.chart
width 100%
height 95%
</style>
src/views/components/questions.vue
View file @ 8fa154c9
...@@ -39,7 +39,7 @@ export default { ...@@ -39,7 +39,7 @@ export default {
display flex display flex
align-items center align-items center
justify-content space-around justify-content space-around
padding 1rem 0 padding .7rem 0
&+div &+div
border-top .1rem solid $cardFontColor border-top .1rem solid $cardFontColor
span span
......
src/views/components/special-monitoring.vue
View file @ 8fa154c9
...@@ -128,7 +128,8 @@ export default { ...@@ -128,7 +128,8 @@ export default {
} }
}, },
mounted() { mounted() {
this.$nextTick(this.init) // this.$nextTick(this.init)
setTimeout(this.init, 0)
}, },
computed: { computed: {
fontSize() { fontSize() {
...@@ -150,5 +151,5 @@ export default { ...@@ -150,5 +151,5 @@ export default {
height 100% height 100%
>.chart >.chart
width 100% width 100%
height 70% height 95%
</style> </style>
src/views/components/team-build.vue
View file @ 8fa154c9
<template> <template>
<div class="team-build"> <div class="team-build">
<div> <div v-if="showChart">
<m-chart :data="data" :config="config"/> <m-chart :data="data" :config="config"/>
</div> </div>
<div> <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" class="custom-select" size="small">
...@@ -17,6 +17,7 @@ export default { ...@@ -17,6 +17,7 @@ export default {
name: 'TeamBuild', name: 'TeamBuild',
data() { data() {
return { return {
showChart: false,
area: '华北地区', area: '华北地区',
options: ['华北地区'], options: ['华北地区'],
config: { config: {
...@@ -60,6 +61,9 @@ export default { ...@@ -60,6 +61,9 @@ export default {
], ],
} }
}, },
mounted() {
setTimeout(() => this.showChart = true, 0)
},
} }
</script> </script>
......
src/views/components/trade-situation.vue 0 → 100644
View file @ 8fa154c9
<template>
<div class="trade-situation">
<div v-if="showChart">
<p><span/>成交量占比</p>
<m-chart class="chart" :config="config" :data="data"/>
</div>
<div v-if="showChart">
<p><span/>销售额</p>
<span class="unit">单位：万元</span>
<m-chart class="chart" :config="config2" :data="data2"/>
</div>
</div>
</template>
<script>
export default {
name: 'TradeSituation',
data() {
return {
showChart: false,
config: {
colors: ['#3967fc', '#38fd8d', '#f3ff33', '#ffb529', '#ff4747'],
legend: {
hide: true,
},
shape: [
{type: 'pie', radius: [0, 60], roseType: 'radius', label: {show: true, formatter: '{b}: {c}%'}}
]
},
data: [
{name: '鱼类', value: 36},
{name: '虾类', value: 24},
{name: '蟹类', value: 12},
{name: '贝类', value: 12},
{name: '其他', value: 8},
],
config2: {
colors: [['#18a6ee', '#6f63ed']],
legend: {
hide: true,
},
shape: [
{type: 'bar', barWidth: '20%', key: 'value', borderRadius: [10, 10, 10, 10]},
],
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},
],
}
},
mounted() {
setTimeout(() => this.showChart = true, 0)
},
}
</script>
<style lang="stylus" scoped>
.trade-situation
width 100%
height 100%
>div
width 100%
height 50%
position relative
.unit
position absolute
right 1rem
top 1rem
p
display flex
font-size 1.2rem
font-weight bold
align-items center
span
display inline-block
width .3rem
height 1.2rem
background $edgeColor
margin-right .5rem
>.chart
height calc(100% - 2rem)
</style>
src/views/main.vue → src/views/disease.vue
View file @ 8fa154c9
...@@ -9,9 +9,10 @@ ...@@ -9,9 +9,10 @@
rows="1fr 1fr 1fr" rows="1fr 1fr 1fr"
gap="0.5rem" gap="0.5rem"
> >
<DiseaseMap />
<DiseaseSum area="summary"/> <DiseaseSum area="summary"/>
<m-card area="box1" title="病害预警"> <m-card area="box1" title="病害预警">
<Disease /> <DiseaseWarning />
</m-card> </m-card>
<m-card area="box2" title="会诊统计"> <m-card area="box2" title="会诊统计">
<ConsultationSum /> <ConsultationSum />
...@@ -32,7 +33,8 @@ ...@@ -32,7 +33,8 @@
</template> </template>
<script> <script>
import Disease from './components/disease' import DiseaseMap from './components/disease-map'
import DiseaseWarning from './components/disease-warning'
import ConsultationSum from './components/consultation-sum' import ConsultationSum from './components/consultation-sum'
import TeamBuild from './components/team-build' import TeamBuild from './components/team-build'
import Questions from './components/questions' import Questions from './components/questions'
...@@ -42,7 +44,8 @@ import DiseaseSum from './components/disease-sum' ...@@ -42,7 +44,8 @@ import DiseaseSum from './components/disease-sum'
export default { export default {
name: 'Main', name: 'Main',
components: { components: {
Disease, DiseaseMap,
DiseaseWarning,
ConsultationSum, ConsultationSum,
TeamBuild, TeamBuild,
Questions, Questions,
......
src/views/fishing-price.vue 0 → 100644
View file @ 8fa154c9
<template>
<m-grid
:template="[
'map box1 box1',
'map box2 box3',
'map box2 box4',
]"
columns="1fr 0.6fr 0.6fr"
rows="1fr 1fr 1fr"
gap="0.5rem"
>
<FishingPriceMap area="map"/>
<m-card area="box1" title="价格指数走势图">
<PriceTrend />
</m-card>
<m-card area="box2" title="水产交易情况">
<TradeSituation />
</m-card>
<m-card area="box3" title="价格趋势分析">
<PriceAnalysis />
</m-card>
<m-card area="box4" title="最新行情">
<NewQuotation />
</m-card>
</m-grid>
</template>
<script>
import FishingPriceMap from './components/fishing-price-map'
import PriceTrend from './components/price-trend'
import TradeSituation from './components/trade-situation'
import PriceAnalysis from './components/price-analysis'
import NewQuotation from './components/new-quotation'
export default {
name: 'FishingPrice',
components: {
FishingPriceMap,
PriceTrend,
TradeSituation,
PriceAnalysis,
NewQuotation,
},
data() {
return {}
},
}
</script>
<style lang="stylus" scoped>
</style>
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