Skip to content

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

苗种 && 稻鱼种养接入数据

parent c30c2744
Show whitespace changes
Inline Side-by-side
Showing with 2637 additions and 251 deletions
src/components/MonitorComponents/MonitorTitle/monitor-title.vue
View file @ cf77f202
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
</span> </span>
<span v-if="!hideTime" class="moment time">{{time}}</span> <span v-if="!hideTime" class="moment time">{{time}}</span>
<img :src="bgImg" draggable="false"/> <img :src="bgImg" draggable="false"/>
<p :style="style">{{menus[curIndex].title}}</p> <p :style="style">{{$route.meta.title}}</p>
<div class="menu menu-left"> <div class="menu menu-left">
<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 @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>
...@@ -52,12 +52,12 @@ export default { ...@@ -52,12 +52,12 @@ export default {
style: {}, style: {},
curIndex: 0, curIndex: 0,
menus: [ menus: [
{name: '病害防控', title: '病害防控大数据', path: '/disease'}, {name: '病害防控', path: '/disease'},
{name: '质量安全', title: '水产品质量安全大数据', path: '/quality-safety'}, {name: '质量安全', path: '/quality-safety'},
{name: '稻鱼种养', title: '稻鱼综合种养分析', path: '/rice-fish'}, {name: '稻鱼种养', path: '/rice-fish'},
{name: '海洋牧场', title: '海洋牧场分析', path: '/ocean-farm'}, {name: '海洋牧场', path: '/ocean-farm'},
{name: '水产价格', title: '水产品价格分析', path: '/fishing-price'}, {name: '水产价格', path: '/fishing-price'},
{name: '苗种'}, {name: '苗种', path: '/seedling'},
], ],
} }
}, },
...@@ -145,6 +145,10 @@ $color = #25e7f6 ...@@ -145,6 +145,10 @@ $color = #25e7f6
left 15% left 15%
&.menu-right &.menu-right
right 15% right 15%
>div
transform skew(-30deg)
>span
transform skew(30deg)
>div >div
cursor pointer cursor pointer
padding .3rem 1rem padding .3rem 1rem
......
src/router/index.js
View file @ cf77f202
...@@ -6,6 +6,7 @@ const FishingPrice = () => import('@/views/fishing-price') ...@@ -6,6 +6,7 @@ const FishingPrice = () => import('@/views/fishing-price')
const QualitySafety = () => import('@/views/quality-safety.vue') const QualitySafety = () => import('@/views/quality-safety.vue')
const RiceFish = () => import('@/views/rice-fish.vue') const RiceFish = () => import('@/views/rice-fish.vue')
const OceanFarm = () => import('@/views/ocean-farm.vue') const OceanFarm = () => import('@/views/ocean-farm.vue')
const Seedling = () => import('@/views/seedling.vue')
Vue.use(Router) Vue.use(Router)
...@@ -18,27 +19,50 @@ export default new Router({ ...@@ -18,27 +19,50 @@ export default new Router({
{ {
name: 'disease', name: 'disease',
path: '/disease', path: '/disease',
meta: {
title: '病害防控大数据',
},
component: Disease, component: Disease,
}, },
{ {
name: 'fishing-price', name: 'fishing-price',
path: '/fishing-price', path: '/fishing-price',
meta: {
title: '水产品价格分析',
},
component: FishingPrice, component: FishingPrice,
}, },
{ {
name: 'quality-safety', name: 'quality-safety',
path: '/quality-safety', path: '/quality-safety',
meta: {
title: '水产品质量安全大数据',
},
component: QualitySafety, component: QualitySafety,
}, },
{ {
name: 'rice-fish', name: 'rice-fish',
path: '/rice-fish', path: '/rice-fish',
meta: {
title: '稻鱼综合种养分析',
},
component: RiceFish, component: RiceFish,
}, },
{ {
name: 'ocean-farm', name: 'ocean-farm',
path: '/ocean-farm', path: '/ocean-farm',
meta: {
title: '海洋牧场分析',
},
component: OceanFarm, component: OceanFarm,
} },
{
name: 'seedling',
path: '/seedling',
meta: {
title: '苗种数据分析',
},
component: Seedling,
},
] ]
}) })
src/util/common.js
View file @ cf77f202
...@@ -31,4 +31,20 @@ export default { ...@@ -31,4 +31,20 @@ export default {
return path.split('.').reduce(reducer, obj) return path.split('.').reduce(reducer, obj)
} }
}, },
/**
* 千分位
* @param {Number | String} num [需转换的数字或字符串]
*/
transNumber(num) {
const arr = num.toString().split('.')
let int = arr[0], result = ''
while (int.length > 3) {
result = ',' + int.slice(-3) + result
int = int.slice(0, int.length - 3)
}
if (int) {
result = int + result
}
return arr[1] ? `${result}.${arr[1]}` : result
},
} }
src/views/components/ocean-farm/data-identify.vue
View file @ cf77f202
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
</div> </div>
<div> <div>
<p><span/>种群数量</p> <p><span/>种群数量</p>
<span class="tips">本月识别种数量：15,238尾</span> <span class="tips">本月识别种类：鱿鱼、鲳鱼、鲷鱼、尤头鱼</span>
<div class="chart" ref="chart2" /> <div class="chart" ref="chart2" />
</div> </div>
</div> </div>
...@@ -246,10 +246,6 @@ export default { ...@@ -246,10 +246,6 @@ export default {
width 100% width 100%
height 50% height 50%
position relative position relative
.unit
position absolute
right 1rem
top 1rem
span span
display block display block
text-align center text-align center
......
src/views/components/rice-fish/area-rate.vue
View file @ cf77f202
...@@ -7,6 +7,19 @@ ...@@ -7,6 +7,19 @@
<script> <script>
export default { export default {
name: 'AreaRate', name: 'AreaRate',
props: {
data: {
type: Array,
default() {
return [
{name: '3000亩以上', value: 258698.3},
{name: '1000-3000亩', value: 21520},
{name: '500-1000亩', value: 4963},
{name: '100-500亩', value: 2210},
]
}
}
},
data() { data() {
return { return {
showChart: false, showChart: false,
...@@ -15,16 +28,13 @@ export default { ...@@ -15,16 +28,13 @@ export default {
legend: { legend: {
hide: true, hide: true,
}, },
tooltip: {
formatter: '{c}亩'
},
shape: [ shape: [
{type: 'pie', radius: [30, 60 * Number((screen.height / 800).toFixed(1))], startAngle: 30, label: {show: true, formatter: '{c}%\n{b}'}, center: ['50%', '52%']} {type: 'pie', radius: [30, 60 * Number((screen.height / 800).toFixed(1))], startAngle: 30, label: {show: true, formatter: '{d}%\n{b}'}, center: ['50%', '52%']}
] ]
}, },
data: [
{name: '500-1000亩', value: 45},
{name: '1000-3000亩', value: 39.7},
{name: '100-500亩', value: 16.5},
{name: '3000亩以上', value: 23.5},
],
} }
}, },
mounted() { mounted() {
......
src/views/components/rice-fish/mode-rate.vue
View file @ cf77f202
<template> <template>
<div class="mode-rate"> <div class="mode-rate">
<Select class="custom-select" v-model="type" transfer> <Select class="custom-select" v-model="type" transfer @on-change="handleChange">
<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="legend"> <div class="legend">
...@@ -13,12 +13,12 @@ ...@@ -13,12 +13,12 @@
</div> </div>
<div> <div>
<div> <div>
<p class="title"><span/>水稻产量</p> <p class="title"><span/>{{type}}产量</p>
<m-chart style="z-index:99;" :config="config2" :data="data2"/> <m-chart style="z-index:99;" :config="config2" :data="data2"/>
<div class="border" /> <div class="border" />
</div> </div>
<div> <div>
<p class="title"><span/>水稻产值</p> <p class="title"><span/>{{type}}产值</p>
<m-chart style="z-index:99;" :config="config3" :data="data3"/> <m-chart style="z-index:99;" :config="config3" :data="data3"/>
<div class="border" /> <div class="border" />
</div> </div>
...@@ -28,34 +28,102 @@ ...@@ -28,34 +28,102 @@
</template> </template>
<script> <script>
const mock = [
{
key: '水稻',
data1: [
{name: '稻小龙虾', value: 232816.3},
{name: '稻青虾', value: 520},
{name: '稻蟹', value: 7590},
{name: '稻鲤', value: 9073},
{name: '稻鳅', value: 3200},
{name: '稻鳖', value: 4920},
{name: '稻蛙', value: 600},
{name: '稻螺', value: 0},
{name: '其他', value: 28672},
{value: 287391.3}
],
data2: [
{name: '稻小龙虾', value: 124596.413},
{name: '稻青虾', value: 208},
{name: '稻蟹', value: 2762.88},
{name: '稻鲤', value: 4252.1},
{name: '稻鳅', value: 1920},
{name: '稻鳖', value: 1643.77},
{name: '稻蛙', value: 252},
{name: '稻螺', value: 0},
{name: '其他', value: 12527.46},
],
data3: [
{name: '稻小龙虾', value: 38766.932},
{name: '稻青虾', value: 124},
{name: '稻蟹', value: 968.4},
{name: '稻鲤', value: 1468.468},
{name: '稻鳅', value: 2400},
{name: '稻鳖', value: 2243.599},
{name: '稻蛙', value: 101},
{name: '稻螺', value: 0},
{name: '其他', value: 4292.7},
],
},
{
key: '水产品',
data1: [
{name: '稻小龙虾', value: 232816.3},
{name: '稻青虾', value: 520},
{name: '稻蟹', value: 7590},
{name: '稻鲤', value: 9073},
{name: '稻鳅', value: 3200},
{name: '稻鳖', value: 4920},
{name: '稻蛙', value: 600},
{name: '稻螺', value: 0},
{name: '其他', value: 28672},
{value: 287391.3}
],
data2: [
{name: '稻小龙虾', value: 38155.739},
{name: '稻青虾', value: 41.6},
{name: '稻蟹', value: 271.046},
{name: '稻鲤', value: 752.5},
{name: '稻鳅', value: 416},
{name: '稻鳖', value: 915.78},
{name: '稻蛙', value: 45},
{name: '稻螺', value: 0},
{name: '其他', value: 3419.95},
],
data3: [
{name: '稻小龙虾', value: 108933.004},
{name: '稻青虾', value: 375},
{name: '稻蟹', value: 1565.2},
{name: '稻鲤', value: 1972.2},
{name: '稻鳅', value: 3500},
{name: '稻鳖', value: 10794.928},
{name: '稻蛙', value: 135},
{name: '稻螺', value: 0},
{name: '其他', value: 33780.3},
],
},
]
export default { export default {
name: 'ModeRate', name: 'ModeRate',
data() { data() {
return { return {
showChart: false, showChart: false,
type: '水稻', type: '水稻',
options: ['水稻'], options: ['水稻', '水产品'],
config: { config: {
colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb', 'transparent'], colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb', 'transparent'],
legend: { legend: {
hide: true, hide: true,
}, },
tooltip: {
formatter: '{b}：{c}亩'
},
shape: [ shape: [
{type: 'pie', startAngle: 0, clockWise: false, radius: [10 * Number((screen.height / 800).toFixed(1)), 700 * Number((screen.height / 800).toFixed(1))], roseType: 'radius', center: ['40%', '80%']} {type: 'pie', startAngle: 0, clockWise: false, radius: [10 * Number((screen.height / 800).toFixed(1)), 100 * Number((screen.height / 800).toFixed(1))], roseType: 'radius', center: ['40%', '80%']}
] ]
}, },
data: [ data: mock[0].data1,
{name: '稻小龙虾', value: 900},
{name: '稻青虾', value: 800},
{name: '稻蟹', value: 700},
{name: '稻鲤', value: 600},
{name: '稻鳅', value: 500},
{name: '稻鳖', value: 400},
{name: '稻蛙', value: 300},
{name: '稻螺', value: 200},
{name: '其他', value: 100},
{value: 4500}
],
config2: { config2: {
colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'], colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
legend: { legend: {
...@@ -65,17 +133,7 @@ export default { ...@@ -65,17 +133,7 @@ export default {
{type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']} {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
] ]
}, },
data2: [ data2: mock[0].data2,
{name: '稻小龙虾', value: 900},
{name: '稻青虾', value: 800},
{name: '稻蟹', value: 700},
{name: '稻鲤', value: 600},
{name: '稻鳅', value: 500},
{name: '稻鳖', value: 400},
{name: '稻蛙', value: 300},
{name: '稻螺', value: 200},
{name: '其他', value: 100},
],
config3: { config3: {
colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'], colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
legend: { legend: {
...@@ -85,22 +143,20 @@ export default { ...@@ -85,22 +143,20 @@ export default {
{type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']} {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
] ]
}, },
data3: [ data3: mock[0].data3,
{name: '稻小龙虾', value: 900},
{name: '稻青虾', value: 800},
{name: '稻蟹', value: 700},
{name: '稻鲤', value: 600},
{name: '稻鳅', value: 500},
{name: '稻鳖', value: 400},
{name: '稻蛙', value: 300},
{name: '稻螺', value: 200},
{name: '其他', value: 100},
],
} }
}, },
mounted() { mounted() {
setTimeout(() => this.showChart = true) setTimeout(() => this.showChart = true)
}, },
methods: {
handleChange(name) {
const dataSource = mock.find(item => item.key === name)
this.data = dataSource.data1
this.data2 = dataSource.data2
this.data3 = dataSource.data3
}
}
} }
</script> </script>
......
src/views/components/rice-fish/mode-rate2.vue
View file @ cf77f202
...@@ -20,12 +20,12 @@ ...@@ -20,12 +20,12 @@
</div> </div>
<div> <div>
<p class="title"><span/>水产品产量</p> <p class="title"><span/>水产品产量</p>
<m-chart style="z-index:99;" :config="config2" :data="data2"/> <m-chart style="z-index:99;" :config="config2" :data="data4"/>
<div class="border" /> <div class="border" />
</div> </div>
<div> <div>
<p class="title"><span/>水产品产值</p> <p class="title"><span/>水产品产值</p>
<m-chart style="z-index:99;" :config="config3" :data="data3"/> <m-chart style="z-index:99;" :config="config3" :data="data5"/>
<div class="border" /> <div class="border" />
</div> </div>
</div> </div>
...@@ -43,60 +43,91 @@ export default { ...@@ -43,60 +43,91 @@ export default {
legend: { legend: {
hide: true, hide: true,
}, },
tooltip: {
formatter: '{b}：{c}亩'
},
shape: [ shape: [
{type: 'pie', radius: [35 * Number((screen.height / 800).toFixed(1)), 55 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']} {type: 'pie', radius: [35 * Number((screen.height / 800).toFixed(1)), 55 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
] ]
}, },
data: [ data: [
{name: '稻小龙虾', value: 900}, {name: '稻小龙虾', value: 19824},
{name: '稻青虾', value: 800}, {name: '稻青虾', value: 0},
{name: '稻蟹', value: 700}, {name: '稻蟹', value: 780},
{name: '稻鲤', value: 600}, {name: '稻鲤', value: 0},
{name: '稻鳅', value: 500}, {name: '稻鳅', value: 0},
{name: '稻鳖', value: 400}, {name: '稻鳖', value: 0},
{name: '稻蛙', value: 300}, {name: '稻蛙', value: 0},
{name: '稻螺', value: 200}, {name: '稻螺', value: 0},
{name: '其他', value: 100}, {name: '其他', value: 0},
], ],
config2: { config2: {
colors: ['#fe3c3a', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'], colors: ['#fe3c3a', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
legend: { legend: {
hide: true, hide: true,
}, },
tooltip: {
formatter: '{b}：{c}吨'
},
shape: [ shape: [
{type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']} {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
] ]
}, },
data2: [ data2: [
{name: '稻小龙虾', value: 900}, {name: '稻小龙虾', value: 10650.02},
{name: '稻青虾', value: 800}, {name: '稻青虾', value: 0},
{name: '稻蟹', value: 700}, {name: '稻蟹', value: 385.28},
{name: '稻鲤', value: 600}, {name: '稻鲤', value: 0},
{name: '稻鳅', value: 500}, {name: '稻鳅', value: 0},
{name: '稻鳖', value: 400}, {name: '稻鳖', value: 0},
{name: '稻蛙', value: 300}, {name: '稻蛙', value: 0},
{name: '稻螺', value: 200}, {name: '稻螺', value: 0},
{name: '其他', value: 100}, {name: '其他', value: 0},
], ],
config3: { config3: {
colors: ['#fe3c3a', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'], colors: ['#fe3c3a', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
legend: { legend: {
hide: true, hide: true,
}, },
tooltip: {
formatter: '{b}：{c}万元'
},
shape: [ shape: [
{type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']} {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
] ]
}, },
data3: [ data3: [
{name: '稻小龙虾', value: 900}, {name: '稻小龙虾', value: 3863},
{name: '稻青虾', value: 800}, {name: '稻青虾', value: 0},
{name: '稻蟹', value: 700}, {name: '稻蟹', value: 316},
{name: '稻鲤', value: 600}, {name: '稻鲤', value: 0},
{name: '稻鳅', value: 500}, {name: '稻鳅', value: 0},
{name: '稻鳖', value: 400}, {name: '稻鳖', value: 0},
{name: '稻蛙', value: 300}, {name: '稻蛙', value: 0},
{name: '稻螺', value: 200}, {name: '稻螺', value: 0},
{name: '其他', value: 100}, {name: '其他', value: 0},
],
data4: [
{name: '稻小龙虾', value: 2305.104},
{name: '稻青虾', value: 0},
{name: '稻蟹', value: 75.546},
{name: '稻鲤', value: 0},
{name: '稻鳅', value: 0},
{name: '稻鳖', value: 0},
{name: '稻蛙', value: 0},
{name: '稻螺', value: 0},
{name: '其他', value: 0},
],
data5: [
{name: '稻小龙虾', value: 8190},
{name: '稻青虾', value: 0},
{name: '稻蟹', value: 334},
{name: '稻鲤', value: 0},
{name: '稻鳅', value: 0},
{name: '稻鳖', value: 0},
{name: '稻蛙', value: 0},
{name: '稻螺', value: 0},
{name: '其他', value: 0},
], ],
} }
}, },
......
src/views/components/rice-fish/nation.vue
View file @ cf77f202
...@@ -49,11 +49,11 @@ export default { ...@@ -49,11 +49,11 @@ export default {
disease: '2019', disease: '2019',
options: ['2019', '2018', '2017'], options: ['2019', '2018', '2017'],
dataComparison: [ dataComparison: [
{year: '2015', area: 200000, product: 300000}, {year: '2015', area: 125478.9, product: 83652.6},
{year: '2016', area: 300000, product: 450000}, {year: '2016', area: 162541.2, product: 108360.8},
{year: '2017', area: 400000, product: 500000}, {year: '2017', area: 204785.6, product: 136523.7},
{year: '2018', area: 500000, product: 650000}, {year: '2018', area: 248459.2, product: 165639.5},
{year: '2019', area: 600000, product: 750000}, {year: '2019', area: 287391, product: 192180.2},
] ]
} }
}, },
......
src/views/components/rice-fish/process-situation.vue
View file @ cf77f202
...@@ -31,18 +31,18 @@ export default { ...@@ -31,18 +31,18 @@ export default {
} }
}, },
data: [ data: [
{month: '1月', val1: 20000, val2: 12000, val3: 14000, val4: 26000, val5: 4000}, {month: '1月', val1: 80, val2: 60, val3: 300, val4: 20, val5: 20},
{month: '2月', val1: 22000, val2: 14000, val3: 18000, val4: 20000, val5: 6000}, {month: '2月', val1: 90, val2: 50, val3: 20, val4: 30, val5: 30},
{month: '3月', val1: 24000, val2: 16000, val3: 24000, val4: 24000, val5: 8000}, {month: '3月', val1: 90, val2: 70, val3: 40, val4: 30, val5: 40},
{month: '4月', val1: 26000, val2: 18000, val3: 24000, val4: 20000, val5: 10000}, {month: '4月', val1: 300, val2: 210, val3: 120, val4: 140, val5: 80},
{month: '5月', val1: 28000, val2: 20000, val3: 20000, val4: 22000, val5: 8000}, {month: '5月', val1: 580, val2: 290, val3: 190, val4: 120, val5: 70},
{month: '6月', val1: 20000, val2: 22000, val3: 22000, val4: 23000, val5: 4000}, {month: '6月', val1: 850, val2: 610, val3: 250, val4: 140, val5: 40},
{month: '7月', val1: 28000, val2: 22000, val3: 20000, val4: 24000, val5: 5000}, {month: '7月', val1: 940, val2: 620, val3: 320, val4: 110, val5: 50},
{month: '8月', val1: 26000, val2: 18000, val3: 18000, val4: 25000, val5: 6000}, {month: '8月', val1: 1020, val2: 680, val3: 290, val4: 140, val5: 30},
{month: '9月', val1: 20000, val2: 20000, val3: 24000, val4: 26000, val5: 7000}, {month: '9月', val1: 650, val2: 320, val3: 210, val4: 180, val5: 60},
{month: '10月', val1: 28000, val2: 22000, val3: 28000, val4: 27000, val5: 8000}, {month: '10月', val1: 320, val2: 250, val3: 150, val4: 100, val5: 70},
{month: '11月', val1: 20000, val2: 20000, val3: 20000, val4: 28000, val5: 9000}, {month: '11月', val1: 280, val2: 120, val3: 140, val4: 80, val5: 20},
{month: '12月', val1: 23000, val2: 20000, val3: 24000, val4: 29000, val5: 10000}, {month: '12月', val1: 170, val2: 100, val3: 90, val4: 60, val5: 40},
], ],
} }
}, },
......
src/views/components/rice-fish/process-situation2.vue
View file @ cf77f202
...@@ -31,18 +31,18 @@ export default { ...@@ -31,18 +31,18 @@ export default {
} }
}, },
data: [ data: [
{month: '1月', val1: 20000, val2: 12000, val3: 14000, val4: 26000, val5: 4000}, {month: '1月', val1: 8, val2: 6, val3: 3, val4: 2, val5: 2},
{month: '2月', val1: 22000, val2: 14000, val3: 18000, val4: 20000, val5: 6000}, {month: '2月', val1: 9, val2: 5, val3: 2, val4: 3, val5: 3},
{month: '3月', val1: 24000, val2: 16000, val3: 24000, val4: 24000, val5: 8000}, {month: '3月', val1: 9, val2: 7, val3: 4, val4: 3, val5: 4},
{month: '4月', val1: 26000, val2: 18000, val3: 24000, val4: 20000, val5: 10000}, {month: '4月', val1: 30, val2: 21, val3: 12, val4: 14, val5: 8},
{month: '5月', val1: 28000, val2: 20000, val3: 20000, val4: 22000, val5: 8000}, {month: '5月', val1: 58, val2: 29, val3: 19, val4: 12, val5: 7},
{month: '6月', val1: 20000, val2: 22000, val3: 22000, val4: 23000, val5: 4000}, {month: '6月', val1: 85, val2: 61, val3: 25, val4: 14, val5: 4},
{month: '7月', val1: 28000, val2: 22000, val3: 20000, val4: 24000, val5: 5000}, {month: '7月', val1: 94, val2: 62, val3: 32, val4: 11, val5: 5},
{month: '8月', val1: 26000, val2: 18000, val3: 18000, val4: 25000, val5: 6000}, {month: '8月', val1: 102, val2: 68, val3: 29, val4: 14, val5: 3},
{month: '9月', val1: 20000, val2: 20000, val3: 24000, val4: 26000, val5: 7000}, {month: '9月', val1: 65, val2: 32, val3: 21, val4: 18, val5: 6},
{month: '10月', val1: 28000, val2: 22000, val3: 28000, val4: 27000, val5: 8000}, {month: '10月', val1: 32, val2: 25, val3: 15, val4: 10, val5: 7},
{month: '11月', val1: 20000, val2: 20000, val3: 20000, val4: 28000, val5: 9000}, {month: '11月', val1: 28, val2: 12, val3: 14, val4: 8, val5: 2},
{month: '12月', val1: 23000, val2: 20000, val3: 24000, val4: 29000, val5: 10000}, {month: '12月', val1: 17, val2: 10, val3: 9, val4: 6, val5: 4},
], ],
} }
}, },
......
src/views/components/rice-fish/province.vue
View file @ cf77f202
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<ModeRate2 /> <ModeRate2 />
</m-card> </m-card>
<m-card area="box2" title="各面积占比"> <m-card area="box2" title="各面积占比">
<AreaRate /> <AreaRate :data="areaData"/>
</m-card> </m-card>
<m-card area="box3" title="稻小龙虾数据对比"> <m-card area="box3" title="稻小龙虾数据对比">
<DataComparison :data="dataComparison"/> <DataComparison :data="dataComparison"/>
...@@ -49,13 +49,19 @@ export default { ...@@ -49,13 +49,19 @@ export default {
disease: '2019', disease: '2019',
options: ['2019', '2018', '2017'], options: ['2019', '2018', '2017'],
dataComparison: [ dataComparison: [
{year: '2013', area: 100000, product: 200000}, {year: '2013', area: 1089, product: 711.765},
{year: '2014', area: 150000, product: 280000}, {year: '2014', area: 3215, product: 2101.307},
{year: '2015', area: 200000, product: 300000}, {year: '2015', area: 7412, product: 4844.444},
{year: '2016', area: 300000, product: 450000}, {year: '2016', area: 9856, product: 6441.83},
{year: '2017', area: 400000, product: 500000}, {year: '2017', area: 12745, product: 8330.065},
{year: '2018', area: 500000, product: 650000}, {year: '2018', area: 16547, product: 10815.03},
{year: '2019', area: 600000, product: 750000}, {year: '2019', area: 19824, product: 12955.124},
],
areaData: [
{name: '3000亩以上', value: 19824},
{name: '1000-3000亩', value: 0},
{name: '500-1000亩', value: 780},
{name: '100-500亩', value: 0},
] ]
} }
}, },
......
src/views/components/rice-fish/rice-fish-map.vue
View file @ cf77f202
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="map-wrapper"> <div class="map-wrapper">
<BorderBox class="sum"> <BorderBox class="sum">
<p>{{curProvince ? `${curProvince}示范企业数量` : '示范区数量'}}</p> <p>{{curProvince ? `${curProvince}示范企业数量` : '示范区数量'}}</p>
<h2><m-count class="count" :value="54874589" :decimal="0"/> 个</h2> <h2><m-count class="count" :value="curProvince ? (provinceData.find(item => item.name === curProvince).company) : 95 " :decimal="0"/> 个</h2>
</BorderBox> </BorderBox>
<div class="map" ref="map"/> <div class="map" ref="map"/>
</div> </div>
...@@ -12,120 +12,109 @@ ...@@ -12,120 +12,109 @@
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 mock = [ const mock = [
{name: '浙江新农都物流中心（水产市场）', address: '杭州市石桥路115号', province: '浙江', value: [120.19706700, 30.24639100], visualMap: false, newDate: '2020-08-15'}, {name: '天津市宝坻区鸿腾国家级稻渔综合种养示范区', area: 3000, product1: 1650, val1: 594, product2: 100, val2: 243.75, value: [117.525896, 39.575499], visualMap: false},
{name: '厦门市水产品批发市场', address: '厦门市高崎北二路77-87号中埔水产批发市场', province: '福建', value: [118.11368800, 24.55107600], visualMap: false, newDate: '2020-08-15'}, {name: '吉林省白城市弘博国家级稻渔综合种养示范区', area: 2000, product1: 1220, val1: 497.76, product2: 30.2, val2: 151, value: [122.928114, 45.574453], visualMap: false},
{name: '福建省兴业华洲（福建）农贸市场有限公司', address: '泉州晋江市池店镇仕春工业区新华洲水产市场', province: '福建', value: [118.55729200, 24.86104200], visualMap: false, newDate: '2020-08-15'}, {name: '吉林省东辽县金洲国家级稻渔综合种养示范区', area: 3000, product1: 1200, val1: 1200, product2: 47, val2: 111, value: [124.999886, 42.941805], visualMap: false},
{name: '福建省三明市鲜活水产品批发市场', address: '三明市三元区白沙长安路34号', province: '福建', value: [117.61887900, 26.25029400], visualMap: false, newDate: '2020-08-15'}, {name: '吉林省松原市前郭县万亩良田国家级稻渔综合种养示范区', area: 7000, product1: 3500, val1: 1530, product2: 75, val2: 180, value: [122.928114, 45.574453], visualMap: false},
{name: '江西省九江鲜活水产品批发市场', address: '九江市庐峰路东端', province: '江西', value: [116.05598000, 29.75385500], visualMap: false, newDate: '2020-08-15'}, {name: '黑龙江省北安市乌裕尔国家级稻渔综合种养示范区', area: 12000, product1: 5520, val1: 1766.4, product2: 121.25, val2: 653.4, value: [126.502404, 48.246249], visualMap: false},
{name: '江西南昌市水产品综合交易批发市场', address: '江西省南昌市东湖区富有路9号', province: '江西', value: [115.92204500, 28.71739100], visualMap: false, newDate: '2020-08-15'}, {name: '黑龙江省绥化市北林区国家级稻渔综合种养示范区', area: 5000, product1: 276, val1: 967.75, product2: 197.5, val2: 130.35, value: [126.985684, 46.805695], visualMap: false},
{name: '山东省王尔庄海蜇批发市场', address: '山东省滨州市沾化县富桥路405号', province: '山东', value: [117.94507500, 37.75016700], visualMap: false, newDate: '2020-08-15'}, {name: '江苏省东海县瑞沃国家级稻渔综合种养示范区', area: 3200, product1: 160, val1: 347, product2: 300, val2: 900, value: [118.756208, 34.541536], visualMap: false},
{name: '山东省临沂市华东淡水鱼批发市场', address: '临沂市北园路6号', province: '山东', value: [118.34964500, 35.15801000], visualMap: false, newDate: '2020-08-15'}, {name: '江苏省盱眙县小河国家级稻渔综合种养示范区', area: 3600, product1: 1872, val1: 468, product2: 482.4, val2: 2026, value: [118.361917, 32.919313], visualMap: false},
{name: '山东省威海水产品批发市场', address: '山东省威海市环翠区顺河街188号', province: '山东', value: [122.11957200, 37.50407200], visualMap: false, newDate: '2020-08-15'}, {name: '江苏省泗洪县环宇国家级稻渔综合种养示范区', area: 3208, product1: 1967, val1: 767, product2: 390, val2: 975, value: [118.515099, 33.405585], visualMap: false},
{name: '河南省郑州市柳林水产批发市场', address: '郑州市金水区柳林镇郑花路北段柳林水产品批发市场', province: '河南', value: [113.69081200, 34.83705700], visualMap: false, newDate: '2020-08-15'}, {name: '江苏省沛县湖西国家级稻渔综合种养示范区', area: 6466, product1: 3556.3, val1: 925, product2: 808.25, val2: 2829, value: [117.079993, 34.724683], visualMap: false},
{name: '湖北省武汉市白沙洲农副产品大市场', address: '湖北省武汉市洪山区张家湾特1号', province: '湖北', value: [114.27418500, 30.47076800], visualMap: false, newDate: '2020-08-15'}, {name: '江苏省盐都区七星国家级稻渔综合种养示范区', area: 4130, product1: 2040, val1: 1672, product2: 400, val2: 1794, value: [120.1187, 33.318169], visualMap: false},
{name: '湖北省孝感市南大水产品批发市场', address: '孝感市107国道与316国道交合处', province: '湖北', value: [113.97923200, 30.88929600], visualMap: false, newDate: '2020-08-15'}, {name: '浙江省德清县清溪国家级稻渔综合种养示范区', area: 2880, product1: 1302.7, val1: 1264, product2: 191.1, val2: 3903, value: [120.197967, 30.243386], visualMap: false},
{name: '湖南洞庭渔都股份有限公司（岳阳洞庭水产批发市场）', address: '岳阳市楼区东风湖路78号', province: '湖南', value: [113.10916800, 29.39883800], visualMap: false, newDate: '2020-08-15'}, {name: '安徽省繁昌县盛典国家级稻渔综合种养示范区', area: 5120, product1: 2621.4, val1: 734, product2: 773.2, val2: 2319.4, value: [118.342283, 31.056628], visualMap: false},
{name: '广东省南海盐步环球水产交易市场', address: '佛山市南海区广佛公路平地路段', province: '广东', value: [113.16316200, 23.11600200], visualMap: false, newDate: '2020-08-15'}, {name: '安徽省全椒县赤镇国家级稻渔综合种养示范区', area: 13500, product1: 8100, val1: 1944, product2: 2835, val2: 9072, value: [120.197967, 30.243386], visualMap: false},
{name: '广东省汕头大洋水产交易市场', address: '汕头市海滨路33号', province: '广东', value: [116.71700700, 23.35911200], visualMap: false, newDate: '2020-08-15'}, {name: '安徽省庐江县放马滩国家级稻渔综合种养示范区', area: 12000, product1: 6000, val1: 1440, product2: 780, val2: 3120, value: [117.379768, 31.136248], visualMap: false},
{name: '东莞市沿江富绅市场经营管理有限公司', address: '东莞市虎门镇沿江东路62号新洲水产品批发市场办公室', province: '广东', value: [113.67847800, 22.81675900], visualMap: false, newDate: '2020-08-15'}, {name: '安徽省巢湖市高瑞国家级稻渔综合种养示范区', area: 3700, product1: 2035, val1: 520.96, product2: 555, val2: 1887, value: [117.599752, 31.686859], visualMap: false},
{name: '广州水产集团鱼市场经营管理有限公司', address: '广州市荔湾区芳村招村70亩商业区', province: '广东', value: [113.26457300, 23.14327900], visualMap: false, newDate: '2020-08-15'}, {name: '安徽省肥东县润枝国家级稻渔综合种养示范区', area: 8530, product1: 4423.6, val1: 2875.34, product2: 980.95, val2: 3923.8, value: [117.488041, 31.743138], visualMap: false},
{name: '广东省江门水产（咸鱼）批发市场', address: '江门市江会路70号', province: '广东', value: [113.08075600, 22.56740300], visualMap: false, newDate: '2020-08-15'}, {name: '安徽省全椒县银花国家级稻渔综合种养示范区', area: 5200, product1: 2860, val1: 692.12, product2: 728, val2: 2184, value: [118.252027, 32.117209], visualMap: false},
{name: '广西北海市外沙水产品批发市场', address: '广西北海市合浦县廉州镇爱卫街二巷2号', province: '广西', value: [109.21357100, 21.66720800], visualMap: false, newDate: '2020-08-15'}, {name: '安徽省宣城市念念国家级稻渔综合种养示范区', area: 4500, product1: 2700, val1: 648, product2: 675, val2: 2025, value: [119.007731, 30.984564], visualMap: false},
{name: '四川省内江市水产批发市场', address: '四川省内江市中区牌楼路313号', province: '四川', value: [105.07417600, 29.57049200], visualMap: false, newDate: '2020-08-15'}, {name: '福建省松溪县稻花鱼国家级稻渔综合种养示范区', area: 360, product1: 165.6, val1: 129.168, product2: 16.2, val2: 81, value: [118.73601, 27.595787], visualMap: false},
{name: '福州名成水产品市场有限公司', address: '福州市马尾区青洲路66号', province: '福建', value: [119.47893300, 25.99550200], visualMap: false, newDate: '2020-08-15'}, {name: '福建省政和县瑞圣国家级稻渔综合种养示范区', area: 613, product1: 306.5, val1: 61.3, product2: 5.3, val2: 21.2, value: [118.641993, 27.420024], visualMap: false},
{name: '四川成都农产品中心批发市水产分场', address: '成都市西航港成白路98号', province: '四川', value: [104.07537900, 30.70897800], visualMap: false, newDate: '2020-08-15'}, {name: '江西省彭泽县九江凯瑞国家级稻渔综合种养示范区', area: 10000, product1: 5000, val1: 1000, product2: 1500, val2: 4500, value: [116.678683, 29.954903], visualMap: false},
{name: '乌鲁木齐北园春果业经营有限责任公司', address: '新疆乌鲁木齐市沙依巴克区克拉玛依西街1168号北园春农产品批发市场B4-4-1-9号', province: '新疆', value: [87.58357400, 43.82808700], visualMap: false, newDate: '2020-08-15'}, {name: '江西省万载县丁家源国家级稻渔综合种养示范区', area: 3000, product1: 1350, val1: 486, product2: 285, val2: 684, value: [116.471523, 29.540593], visualMap: false},
{name: '浙江省温州浙福边贸水产城（苍南）', address: '浙江苍南县城建兴西路608号', province: '浙江', value: [120.38836000, 27.50192500], visualMap: false, newDate: '2020-08-15'}, {name: '江西省余江县神农氏国家级稻渔综合种养示范区', area: 2800, product1: 557.52, val1: 1204.2432, product2: 739.48, val2: 7386.128, value: [116.991676, 28.375221], visualMap: false},
{name: '山东省青岛市城阳蔬菜水产品批发市场有限公司', address: '青岛城阳区政府308国道西侧山东国际农展中心二楼信息科', province: '山东', value: [120.38249400, 36.30921600], visualMap: false, newDate: '2020-08-15'}, {name: '江西省彭泽县中梁国家级稻渔综合种养示范区', area: 6169, product1: 4000, val1: 800, product2: 1230, val2: 1500, value: [116.668768, 29.917313], visualMap: false},
{name: '北京京丰岳各庄农副产品批发市场中心', address: '北京市丰台区西四环中路140号', province: '北京', value: [116.28465800, 39.88338100], visualMap: false, newDate: '2020-08-15'}, {name: '江西省进贤县军山湖国家级稻渔综合种养示范区', area: 7600, product1: 3762, val1: 790, product2: 760, val2: 623, value: [116.286082, 28.61954], visualMap: false},
{name: '山西太原五龙口海鲜市场', address: '太原市敦化南路49号', province: '山西', value: [112.59758100, 37.88774100], visualMap: false, newDate: '2020-08-15'}, {name: '山东省鱼台县丰谷国家级稻渔综合种养示范区', area: 5600, product1: 2275, val1: 1001, product2: 450, val2: 2700, value: [116.595303, 35.088097], visualMap: false},
{name: '河北唐山市君瑞联合农贸市场有限公司', address: '河北省唐山市南新东道252号', province: '河北', value: [118.11221200, 39.65745100], visualMap: false, newDate: '2020-08-15'}, {name: '山东省滨城市澍稻廪实国家级稻渔综合种养示范区', area: 6000, product1: 2100, val1: 446, product2: 135, val2: 652.5, value: [118.560394, 37.931575], visualMap: false},
{name: '呼和浩特融桥海鲜批发市场', address: '大学东路与展东路路口', province: '内蒙古', value: [111.67110800, 40.83416600], visualMap: false, newDate: '2020-08-15'}, {name: '山东省高青县大芦湖国家级稻渔综合种养示范区', area: 500, product1: 187.6, val1: 260, product2: 37.5, val2: 168, value: [117.896273, 37.240488], visualMap: false},
{name: '辽宁省东港黄海水产品市场', address: '东港市东港路98号', province: '辽宁', value: [124.15754500, 39.91121100], visualMap: false, newDate: '2020-08-15'}, {name: '山东省东营市汇海国家级稻渔综合种养示范区', area: 3000, product1: 990, val1: 257.4, product2: 68, val2: 307.2, value: [118.649066, 37.329375], visualMap: false},
{name: '辽宁省盘山县胡家河蟹市场', address: '盘山县胡家镇', province: '辽宁', value: [121.95696200, 41.29536400], visualMap: false, newDate: '2020-08-15'}, {name: '河南省潢川县黄国粮业国家级稻渔综合种养示范区', area: 4564, product1: 2078, val1: 831.2, product2: 253.8, val2: 761, value: [115.11061, 32.134403], visualMap: false},
{name: '江苏凌家塘市场发展有限公司', address: '江苏省常州市武进区新312国道邹区段西侧', province: '江苏', value: [119.86913300, 31.78283700], visualMap: false, newDate: '2020-08-15'}, {name: '河南省光山县青龙河国家级稻渔综合种养示范区', area: 3620, product1: 1810, val1: 543, product2: 289.6, val2: 231.68, value: [114.704624, 31.985003], visualMap: false},
{name: '江苏省苏州市南环桥农副产品批发市场', address: '苏州市南环东路南环桥东堍', province: '江苏', value: [120.69496400, 31.26949400], visualMap: false, newDate: '2020-08-15'}, {name: '河南华来时代稻渔综合种养示范区', area: 750, product1: 397.5, val1: 119.25, product2: 81.25, val2: 372, value: [112.949188, 33.045476], visualMap: false},
{name: '浙江省中国水产城(象山石浦)', address: '浙江省宁波市象山县石浦镇中国水产城管委会', province: '浙江', value: [121.91634400, 29.19378000], visualMap: false, newDate: '2020-08-15'}, {name: '湖北省龙感湖管理区洋湖国家级稻渔综合种养示范区', area: 10000, product1: 6000, val1: 1440, product2: 1500, val2: 3300, value: [112.529443, 32.997326], visualMap: false},
{name: '浙江省慈溪农副产品批发市场', address: '慈溪市白沙街道东外环线东北侧（二楼财务室王群）', province: '浙江', value: [121.29022500, 30.17822100], visualMap: false, newDate: '2020-08-15'}, {name: '湖北省潜江市莱克国家级稻渔综合种养示范区', area: 40600, product1: 20706, val1: 4969.44, product2: 8526, val2: 20462.4, value: [112.884988, 30.417564], visualMap: false},
{name: '浙江省台州市华东水产品交易有限公司', address: '浙江省台州市椒江区工人西路998号（葭芷渔港内）', province: '浙江', value: [121.43639400, 28.68584300], visualMap: false, newDate: '2020-08-15'}, {name: '湖北省潜江市华山国家级稻渔综合种养示范区', area: 30000, product1: 18000, val1: 4680, product2: 8100, val2: 17820, value: [112.793, 30.319697], visualMap: false},
{name: '浙江省瑞安市瑞城水产品市场管理有限公司', address: '浙江省瑞安经济开发区滨江大道860号', province: '浙江', value: [120.65405100, 27.75456700], visualMap: false, newDate: '2020-08-15'}, {name: '湖北省公安县通威国家级稻渔综合种养示范区', area: 5863, product1: 3205.8, val1: 865, product2: 1817.53, val2: 6543, value: [113.412162, 30.44749], visualMap: false},
{name: '大连盛兴水产品交易市场有限公司', address: '辽宁省大连市西岗区沿海街8号', province: '辽宁', value: [121.72472600, 39.02015600], visualMap: false, newDate: '2020-08-15'}, {name: '湖北省汉川市南河古渡国家级稻渔综合种养示范区', area: 6680, product1: 3383.42, val1: 1001.49, product2: 750.164, val2: 2190.48, value: [113.756978, 30.492272], visualMap: false},
{name: '温州市水产批发交易市场', address: '温州市龙湾区海棠路与滨海四道交叉口西南50米', province: '浙江', value: [120.80459200, 27.83950300], visualMap: false, newDate: '2020-08-15'}, {name: '湖北省监利县福娃国家级稻渔综合种养示范区', area: 12100, product1: 4840, val1: 1450, product2: 980.1, val2: 2940, value: [112.967447, 30.129134], visualMap: false},
{name: '浙江省中国舟山国际水产城', address: '舟山市普陀区沈家门渔市大街1号5F', province: '浙江', value: [122.29109200, 29.94694100], visualMap: false, newDate: '2020-08-15'}, {name: '湖北省京山市盛老汉国家级稻渔综合种养示范区', area: 5600, product1: 2240, val1: 618, product2: 1120, val2: 28672, value: [112.790209, 30.892451], visualMap: false},
{name: '安徽省合肥市周谷堆水产品批发市场', address: '安徽省合肥市瑶海区大兴镇', province: '安徽', value: [117.39211600, 31.84919800], visualMap: false, newDate: '2020-08-15'}, {name: '湖北省天门市四海国家级稻渔综合种养示范区', area: 6800, product1: 3720, val1: 4400, product2: 776, val2: 5900, value: [113.355574, 30.523175], visualMap: false},
{name: '河北省秦皇岛海港区天桥市场', address: '秦皇岛海港区', province: '河北', value: [119.61504900, 39.93687900], visualMap: false, newDate: '2020-08-15'}, {name: '湖南省南县君富国家级稻渔综合种养示范区', area: 3075.55, product1: 3383.105, val1: 420, product2: 676.621, val2: 1020, value: [112.386204, 29.201543], visualMap: false},
{name: '北京大红门京深海鲜批发市场有限公司', address: '北京市丰台区石榴庄西街232号', province: '北京', value: [116.42196000, 39.84838000], visualMap: false, newDate: '2020-08-15'}, {name: '湖南省华容县天星洲国家级稻渔综合种养示范区', area: 5620.7, product1: 3642.408, val1: 983.45, product2: 786.94, val2: 1888.66, value: [112.678457, 29.525739], visualMap: false},
{name: '河北省石家庄雨润农产品全球采购有限公司', address: '石家庄南二环大桥', province: '河北', value: [114.50717400, 37.97755600], visualMap: false, newDate: '2020-08-15'}, {name: '广西壮族自治区桂平市维军生态国家级稻渔综合种养示范区', area: 3350, product1: 2574.81, val1: 1390.395, product2: 652.78, val2: 3270.384, value: [110.001602, 23.670861], visualMap: false},
{name: '辽宁省沈阳水产品批发市场', address: '沈阳水产品', province: '辽宁', value: [123.31391000, 41.78260900], visualMap: false, newDate: '2020-08-15'}, {name: '广西壮族自治区桂林市绿淼国家级稻渔综合种养示范区', area: 1600, product1: 800, val1: 240, product2: 96, val2: 576, value: [109.782755, 25.175259], visualMap: false},
{name: '辽宁省前当堡鲜鱼批发市场', address: ' 无', province: '辽宁', value: [122.88651200, 41.78901000], visualMap: false, newDate: '2020-08-15'}, {name: '四川省昭化区万田国家级稻渔综合种养示范区', area: 4300, product1: 1935, val1: 564.3, product2: 465, val2: 747, value: [105.868863, 32.42413], visualMap: false},
{name: '吉林省长春市光复路水产批发市场', address: '长春市光复路', province: '吉林', value: [125.34919600, 43.91155900], visualMap: false, newDate: '2020-08-15'}, {name: '四川省宣汉县鸭池国家级稻渔综合种养示范区', area: 2000, product1: 1000, val1: 300, product2: 200, val2: 400, value: [107.671792, 31.56672], visualMap: false},
{name: '吉林省延吉市西市场', address: '吉林省延边朝鲜族自治州延吉市解放路', province: '吉林', value: [129.51478200, 42.91275800], visualMap: false, newDate: '2020-08-15'}, {name: '四川省开江县稻法自然国家级稻渔综合种养示范区', area: 3000, product1: 1242, val1: 497, product2: 262.5, val2: 615, value: [107.870691, 31.095923], visualMap: false},
{name: '上海东方国际水产中心经营管理有限公司', address: '上海东方国际水产中心', province: '上海', value: [121.54900500, 31.33938500], visualMap: false, newDate: '2020-08-15'}, {name: '四川省江油市贯福国家级稻渔综合种养示范区', area: 4360, product1: 2005.6, val1: 816.5, product2: 649.75, val2: 1348.8, value: [104.594498, 31.659064], visualMap: false},
{name: '安徽省安庆市皖宜季牛水产养殖有限责任公司长青大市场分公司', address: '安庆市华中路79号', province: '安徽', value: [117.079784, 30.513423], visualMap: false, newDate: '2020-08-15'}, {name: '四川省隆昌市隆农汇国家级稻渔综合种养示范区', area: 5632, product1: 2421.76, val1: 1453, product2: 563.2, val2: 2816, value: [105.31057, 29.411789], visualMap: false},
{name: '安徽省蚌埠城南农副产品交易有限公司', address: '安徽省蚌埠', province: '安徽', value: [117.33269200, 32.89946300], visualMap: false, newDate: '2020-08-15'}, {name: '四川省邛崃市稻渔源国家级稻渔综合种养示范区', area: 5000, product1: 2500, val1: 1680, product2: 750, val2: 3000, value: [103.589504, 30.387263], visualMap: false},
{name: '中国供销上饶农产品交易城', address: '江西省上饶市上饶县城南大道11号 ', province: '江西', value: [117.92193300, 28.39829100], visualMap: false, newDate: '2020-08-15'}, {name: '贵州省湄潭县满地金国家级稻渔综合种养示范区', area: 1200, product1: 540, val1: 270, product2: 150, val2: 600, value: [107.503809, 27.689073], visualMap: false},
{name: '山东济南海鲜大市场', address: '济南市市中区小梁庄街277号', province: '山东', value: [116.99420600, 36.64910600], visualMap: false, newDate: '2020-08-15'}, {name: '贵州省遵义市山至金国家级稻渔综合种养示范区', area: 670, product1: 335, val1: 536, product2: 33.5, val2: 134, value: [107.056897, 27.76848], visualMap: false},
{name: '长沙市马王堆农产品股份有限公司海鲜水产批发市场', address: '长沙市马王堆农产品股份有限公司', province: '湖南', value: [113.04102400, 28.20187700], visualMap: false, newDate: '2020-08-15'}, {name: '云南省元阳县呼山众创国家级稻渔综合种养示范区', area: 84, product1: 17.734, val1: 12.41, product2: 5.04, val2: 30.24, value: [102.85925, 23.231776], visualMap: false},
{name: '海南马井水产品交易市场管理有限公司', address: '海南马井', province: '海南', value: [109.22729200, 19.72200900], visualMap: false, newDate: '2020-08-15'}, {name: '云南省大理市荣江国家级稻渔综合种养示范区', area: 1020, product1: 663, val1: 954.7, product2: 51, val2: 255, value: [100.327186, 25.619677], visualMap: false},
{name: '重庆市乐邦水产品有限公司', address: '重庆沙坪坝区井口街道', province: '重庆', value: [106.48452800, 29.59447400], visualMap: false, newDate: '2020-08-15'}, {name: '云南省红河县红河中海国家级稻渔综合种养示范区', area: 620, product1: 235.6, val1: 141.36, product2: 18.692, val2: 52.34, value: [102.80335, 23.975334], visualMap: false},
{name: '重庆市龙门实业（集团）有限公司西三街农副水产品市场', address: '龙门实业（集团）有限公司西三街农副水产品市场', province: '重庆', value: [106.58898500, 29.56126400], visualMap: false, newDate: '2020-08-15'}, {name: '陕西省榆林市百川国家级稻渔综合种养示范区', area: 2000, product1: 900, val1: 234, product2: 30, val2: 168, value: [109.535959, 38.067351], visualMap: false},
{name: '普洱天恒市场经营公司五一市场', address: '普洱天恒市场经营公司五一市场', province: '云南', value: [100.97417100, 22.79145600], visualMap: false, newDate: '2020-08-15'}, {name: '陕西省旬阳县绿富地国家级稻渔综合种养示范区', area: 2300, product1: 1311, val1: 280, product2: 345, val2: 414, value: [109.366707, 32.844277], visualMap: false},
{name: '西安海隆实业有限责任公司（北二环水产批发中心）', address: '西安海隆实业有限责任公司（北二环水产批发中心）', province: '陕西', value: [108.95263000, 34.27420400], visualMap: false, newDate: '2020-08-15'}, {name: '宁夏回族自治区贺兰县广银米业国家级稻渔综合种养示范区', area: 3600, product1: 1828.2, val1: 586.46, product2: 201.75, val2: 345, value: [106.375024, 38.633595], visualMap: false},
{name: '甘肃省兰州市绿色食品市场', address: '兰州市绿色食品市场', province: '甘肃', value: [103.88351700, 36.06708900], visualMap: false, newDate: '2020-08-15'}, {name: '宁夏回族自治区贺兰县生瑞国家级稻渔综合种养示范区', area: 7300, product1: 4022.3, val1: 1046, product2: 216.6, val2: 543, value: [106.335298, 38.558586], visualMap: false},
{name: '江苏省南京市众彩农副产品批发市场', address: '南京市', province: '江苏', value: [118.89382400, 31.99477500], visualMap: false, newDate: '2020-08-15'}, {name: '宁夏回族自治区灵武市金河渔业国家级稻渔综合种养示范区', area: 3115, product1: 1401.75, val1: 504.63, product2: 68.396, val2: 246.67, value: [106.346874, 38.274853], visualMap: false},
{name: '甘肃陇南市武都区体育场大市场', address: '陇南市武都区体育场', province: '甘肃', value: [104.967414, 33.373396], visualMap: false, newDate: '2020-08-15'}, {name: '宁夏回族自治区银川市军华国家级稻渔综合种养示范区', area: 3000, product1: 1800, val1: 432, product2: 31.5, val2: 78.6, value: [106.186844, 38.568521], visualMap: false},
{name: '白银市白银区文化路市场', address: '白银市白银区文化路', province: '甘肃', value: [104.184824, 36.554399], visualMap: false, newDate: '2020-08-15'}, {name: '部级水产健康养殖示范场', area: 6820, product1: 4089.98, val1: 993.94, product2: 129.95, val2: 267.005, value: [106.173443, 38.565809], visualMap: false},
{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'}, const provinceDetail = [
{name: '福建省莆田市闽中水产品批发市场', address: ' 福建省莆田市涵江区塘北路西侧', province: '福建', value: [119.11405600, 25.46307200], visualMap: false, newDate: '2020-08-15'}, {province: '江苏省', city: '连云港市东海县', name: '江苏瑞沃农业开发有限公司', manager: '李前方', phone: '18994501768', address: '江苏省东海县黄川镇新联村36-66号', value: [118.756208, 34.541536], visualMap: false},
{name: '攀枝花攀达水产批发市场有限公司', address: '攀枝花市东区银江镇沙坝村马家田', province: '四川', value: [104.07537900, 30.70897800], visualMap: false, newDate: '2020-08-15'}, {province: '江苏省', city: '淮安市盱眙县', name: '盱眙小河农业发展有限公司', manager: '汪祖佳', phone: '0517-88485668', address: '盱眙县黄花塘镇岗村街西2队68号', value: [118.361917, 32.919313], visualMap: false},
{name: '重庆市涪陵区新大兴国际农产品批发市场', address: '重庆市涪陵区人民东路后街109号', province: '重庆', value: [107.40430500, 29.71266100], visualMap: false, newDate: '2020-08-15'}, {province: '江苏省', city: '宿迁市泗洪县', name: '泗洪县环宇粮食种植家庭农场', manager: '汤球', phone: '13951199293', address: '泗洪县龙集镇', value: [118.515099, 33.405585], visualMap: false},
{name: '江西省萍乡市城南水产批发市场', address: '萍乡市环城南路与萍麻公路交汇处', province: '江西', value: [113.85277800, 27.61884100], visualMap: false, newDate: '2020-08-15'}, {province: '江苏省', city: '沛县', name: '江苏徐垦湖西农业发展有限公司', manager: '水爱莲', phone: '15052061411', address: '沛县湖西农场', value: [117.079993, 34.724683], visualMap: false},
{name: '上海江杨水产品批发市场经营管理有限公司', address: '上海市宝山区铁城路1555号', province: '上海', value: [121.458468, 31.361636], visualMap: false, newDate: '2020-08-15'}, {province: '江苏省', city: '盐都区', name: '盐城市盐都七星现代农业发展有限公司', manager: '宋长锋', phone: '18936318361', address: '江苏省盐城市盐都地区', value: [119.986907, 33.172954], visualMap: false},
{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: 0 },
{ name: '天津', value: 42 }, { name: '河北', value: 0 },
{ name: '河北', value: 102 }, { name: '山西', value: 0 },
{ name: '山西', value: 81 }, { name: '内蒙古', value: 0 },
{ name: '内蒙古', value: 17 }, { name: '辽宁', value: 0 },
{ name: '辽宁', value: 67 }, { name: '上海', value: 0 },
{ name: '吉林', value: 182 }, { name: '湖南', value: 0 },
{ name: '黑龙江', value: 100 }, { name: '重庆', value: 0 },
{ name: '上海', value: 24 }, { name: '西藏', value: 0 },
{ name: '江苏', value: 299 }, { name: '甘肃', value: 0 },
{ name: '浙江', value: 114 }, { name: '青海', value: 0 },
{ name: '安徽', value: 29 }, { name: '新疆', value: 0 },
{ name: '福建', value: 316 }, { name: '广东', value: 0 },
{ name: '江西', value: 91 }, { name: '海南', value: 0 },
{ name: '山东', value: 19 }, {name: '天津', value: 1, region: 1, company: 1, area: 3000, product1: 1650, val1: 594, product2: 100, val2: 243.75, },
{ name: '河南', value: 137 }, {name: '吉林', value: 3, region: 3, company: 3, area: 12000, product1: 5920, val1: 3227.76, product2: 152.2, val2: 442, },
{ name: '湖北', value: 26 }, {name: '黑龙江', value: 2, region: 2, company: 2, area: 17000, product1: 8285, val1: 2734.15, product2: 317.75, val2: 783.75, },
{ name: '湖南', value: 114 }, {name: '江苏', value: 5, region: 5, company: 5, area: 20604, product1: 11035.3, val1: 4179, product2: 2380.65, val2: 8524, },
{ name: '重庆', value: 91 }, {name: '浙江', value: 1, region: 1, company: 1, area: 2880, product1: 1302.7, val1: 1264, product2: 191.1, val2: 3903, },
{ name: '四川', value: 25 }, {name: '安徽', value: 7, region: 7, company: 7, area: 52550, product1: 26705, val1: 8854.42, product2: 6772.15, val2: 24531.2, },
{ name: '贵州', value: 62 }, {name: '福建', value: 2, region: 2, company: 2, area: 973, product1: 472.1, val1: 190.468, product2: 21.5, val2: 102.2, },
{ name: '云南', value: 83 }, {name: '江西', value: 5, region: 5, company: 5, area: 29569, product1: 14669.52, val1: 4280.24, product2: 4514.48, val2: 14693.13, },
{ name: '西藏', value: 9 }, {name: '山东', value: 4, region: 4, company: 4, area: 15100, product1: 5552.6, val1: 2064.4, product2: 690.5, val2: 3827.7, },
{ name: '陕西', value: 80 }, {name: '河南', value: 3, region: 3, company: 3, area: 8934, product1: 4285.5, val1: 1493.45, product2: 624.65, val2: 1364.68, },
{ name: '甘肃', value: 256 }, {name: '湖北', value: 10, region: 10, company: 10, area: 117643, product1: 62095.22, val1: 19423.93, product2: 23569.79, val2: 87827.88, },
{ name: '青海', value: 10 }, {name: '广西', value: 2, region: 2, company: 2, area: 4950, product1: 3374.81, val1: 1630.397, product2: 748.78, val2: 3846.384, },
{ name: '宁夏', value: 18 }, {name: '四川', value: 6, region: 6, company: 6, area: 24292, product1: 11104.36, val1: 5310.8, product2: 2890.45, val2: 8926.8, },
{ name: '新疆', value: 67 }, {name: '贵州', value: 2, region: 2, company: 2, area: 1870, product1: 875, val1: 806, product2: 183.5, val2: 734, },
{ name: '广东', value: 123 }, {name: '云南', value: 3, region: 3, company: 3, area: 1724, product1: 916.33, val1: 1108.47, product2: 74.73, val2: 337.58, },
{ name: '广西', value: 59 }, {name: '陕西', value: 2, region: 2, company: 2, area: 4300, product1: 2211, val1: 514, product2: 375, val2: 582, },
{ name: '海南', value: 14 } {name: '宁夏', value: 5, region: 5, company: 6, area: 20535, product1: 13142.23, val1: 3563.03, product2: 648.2, val2: 1480.27, },
] ]
const provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan'] const provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan']
const provinceText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'] const provinceText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾']
...@@ -152,27 +141,28 @@ export default { ...@@ -152,27 +141,28 @@ export default {
type: [String, Function], type: [String, Function],
default() { default() {
return ({data}) => { return ({data}) => {
if (data.name && data.address) { if (data.region && data.company) {
return ` return `
<div class="map-tooltip-info"> <div class="map-tooltip-info">
<h3>${data.name}</h3> <h3>${data.name}</h3>
<p><span>区域：</span>苏州市吴中区</p> <p><span>示范区数量：</span>${this.$com.transNumber(data.region)}个</p>
<p><span>总面积：</span>487亩</p> <p><span>企业数量：</span>${this.$com.transNumber(data.company)}个</p>
<p><span>水稻总产值/产量：</span>178,533万元/83,474吨</p> <p><span>总面积：</span>${this.$com.transNumber(data.area)}亩</p>
<p><span>水产品总产值/产量：</span>98,533万元/23,474吨</p> <p><span>水稻总产值/产量：</span>${this.$com.transNumber(data.val1)}万元/${this.$com.transNumber(data.product1)}吨</p>
<p><span>水产品总产值/产量：</span>${this.$com.transNumber(data.val2)}万元/${this.$com.transNumber(data.product2)}吨</p>
</div> </div>
` `
} else { } else if (data.val1 && data.product1){
return ` return `
<div class="map-tooltip-info"> <div class="map-tooltip-info">
<h3>${data.name}</h3> <h3>${data.name}</h3>
<p><span>示范区数量：</span>59,844个</p> <p><span>总面积：</span>${this.$com.transNumber(data.area)}亩</p>
<p><span>企业数量：</span>6,548,874个</p> <p><span>水稻总产值/产量：</span>${this.$com.transNumber(data.val1)}万元/${this.$com.transNumber(data.product1)}吨</p>
<p><span>总面积：</span>548,799亩</p> <p><span>水产品总产值/产量：</span>${this.$com.transNumber(data.val2)}万元/${this.$com.transNumber(data.product2)}吨</p>
<p><span>水稻总产值/产量：</span>45,178,533万元/983,474吨</p>
<p><span>水产品总产值/产量：</span>398,533万元/423,474吨</p>
</div> </div>
` `
} else {
return null
} }
} }
} }
...@@ -180,7 +170,10 @@ export default { ...@@ -180,7 +170,10 @@ export default {
visualConfig: { visualConfig: {
type: Object, type: Object,
default() { default() {
return {} return {
min: 0,
max: 10,
}
} }
}, },
}, },
...@@ -222,6 +215,7 @@ export default { ...@@ -222,6 +215,7 @@ export default {
series: [] series: []
}, },
curProvince: null, curProvince: null,
provinceData: provinceData,
} }
}, },
mounted() { mounted() {
...@@ -308,7 +302,30 @@ export default { ...@@ -308,7 +302,30 @@ export default {
}, },
regions: [], regions: [],
}, },
series: [] tooltip: {
trigger: 'item',
formatter: ({data}) => {
return `
<div class="map-tooltip-info">
<h3>${data.name}</h3>
<p><span>联系人：</span>${data.manager}</p>
<p><span>联系电话：</span>${data.phone}</p>
<p><span>公司地址：</span>${data.address}</p>
</div>
`
},
},
series: [{
type: 'scatter', // series图表类型
coordinateSystem: 'geo', // series坐标系类型
data: name === '江苏' ? provinceDetail : [],
itemStyle: {
color: 'gold'
},
symbolSize: 20 * this.sizeRate,
symbol: 'pin',
geoIndex: 0,
}],
} }
this.map.setOption(config) this.map.setOption(config)
}, },
......
src/views/components/seedling/area-count.vue 0 → 100644
View file @ cf77f202
<template>
<div class="area-count" v-if="showChart">
<m-chart :config="config" :data="data"/>
<p>面积（公顷）</p>
<p>数量（个）</p>
</div>
</template>
<script>
export default {
name: 'AreaCount',
data() {
return {
showChart: false,
config: {
colors: [['#1ca4ec', '#7060e8'], ['#fd912a', '#fb5d4c']],
legend: {
hide: true,
},
shape: [
{key: 'area', type: 'bar', barWidth: '20%', barGap: '50%', yAxisIndex: 0, borderRadius: [10, 10, 10, 10]},
{key: 'count', type: 'bar', barWidth: '20%', barGap: '50%', yAxisIndex: 1, borderRadius: [10, 10, 10, 10]},
],
xAxis: {
key: 'year',
},
},
data: [
{year: '2015', area: 200000, count: 300000},
{year: '2016', area: 300000, count: 450000},
{year: '2017', area: 400000, count: 500000},
{year: '2018', area: 500000, count: 650000},
{year: '2019', area: 600000, count: 750000},
]
}
},
mounted() {
setTimeout(() => this.showChart = true, 0)
},
}
</script>
<style lang="stylus" scoped>
.area-count
width 100%
height 80%
margin-top 2rem
overflow hidden
p
position absolute
top 3rem
font-size .8rem
font-weight bold
color #0597e6
&:first-child
left 1rem
&:last-child
color #ea7c37
right 1rem
</style>
src/views/components/seedling/consult-info.vue 0 → 100644
View file @ cf77f202
<template>
<div class="consult-info">
<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'};width:100%;`">{{col.title}}</div>
</i-col>
</Row>
<m-scroll :length="model.length" :limit="3">
<Row class="row" v-for="(row, rowIndex) in model" :key="rowIndex" :style="`${row.count >= 15 ? 'color:#d04e4b': ''}`">
<i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0">
<div v-if="typeof row[col.key] === 'number'" :style="`text-align: ${col.align || 'left'};color: ${col.color};width:100%;`">
<m-count :value="row[col.key]" :decimal="0"/>
</div>
<div v-else-if="col.formatter">
{{col.formatter(row[col.key])}}
</div>
<div v-else :style="`text-align: ${col.align || 'left'};color: ${col.color};width:100%;`">{{row[col.key]}}</div>
</i-col>
</Row>
</m-scroll>
</div>
</template>
<script>
export default {
name: 'ConsultInfo',
data() {
return {
layout: [
{
title: '主题',
key: 'theme',
width: 6,
},
{
title: '处理状态',
key: 'status',
width: 4,
formatter: val => {
return val == '1' ? '已处理' : '未处理'
}
},
{
title: '送检单位',
key: 'unit',
width: 6,
},
{
title: '送检时间',
key: 'time',
width: 4,
},
{
title: '处理时间',
key: 'done',
width: 4,
},
],
model: [
{theme: '送检鱼已经死亡，鱼体表鳞片…', status: '1', unit: '呼山众创农业开发有限公司', time: '2020.08.20 14:12:02', done: '2020.08.23 14:12:00'},
{theme: '送检鱼已经死亡，鱼体表鳞片…', status: '1', unit: '呼山众创农业开发有限公司', time: '2020.08.20 14:12:02', done: '2020.08.23 14:12:00'},
{theme: '送检鱼已经死亡，鱼体表鳞片…', status: '0', unit: '呼山众创农业开发有限公司', time: '2020.08.20 14:12:02', done: '2020.08.23 14:12:00'},
{theme: '送检鱼已经死亡，鱼体表鳞片…', status: '1', unit: '呼山众创农业开发有限公司', time: '2020.08.20 14:12:02', done: '2020.08.23 14:12:00'},
{theme: '送检鱼已经死亡，鱼体表鳞片…', status: '1', unit: '呼山众创农业开发有限公司', time: '2020.08.20 14:12:02', done: '2020.08.23 14:12:00'},
{theme: '送检鱼已经死亡，鱼体表鳞片…', status: '0', unit: '呼山众创农业开发有限公司', time: '2020.08.20 14:12:02', done: '2020.08.23 14:12:00'},
{theme: '送检鱼已经死亡，鱼体表鳞片…', status: '1', unit: '呼山众创农业开发有限公司', time: '2020.08.20 14:12:02', done: '2020.08.23 14:12:00'},
{theme: '送检鱼已经死亡，鱼体表鳞片…', status: '1', unit: '呼山众创农业开发有限公司', time: '2020.08.20 14:12:02', done: '2020.08.23 14:12:00'},
{theme: '送检鱼已经死亡，鱼体表鳞片…', status: '0', unit: '呼山众创农业开发有限公司', time: '2020.08.20 14:12:02', done: '2020.08.23 14:12:00'},
]
}
},
}
</script>
<style lang="stylus" scoped>
.consult-info
width 100%
height 100%
overflow hidden
.row
display flex
align-items center
// line-height 2.4rem
line-height 2.5
&.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>
src/views/components/seedling/migrate-map.vue 0 → 100644
View file @ cf77f202
<template>
<div class="map-wrapper">
<BorderBox class="sum">
<p>主要品种</p>
<h2>草鱼、南美白对虾、罗非鱼</h2>
</BorderBox>
<div class="map" ref="map"/>
</div>
</template>
<script>
import china from 'echarts/map/json/china.json'
import BorderBox from '../border-box'
export default {
name: 'MigrateMap',
components: {
BorderBox,
},
props: {
data: {
type: Array,
default() {
return []
}
},
visualLabel: {
type: Array,
default() {
return ['高', '低']
}
},
visualFormatter: {
type: [String, Function],
default() {
return ({data}) => {
const {data: info} = data
return `
<div class="map-tooltip-info">
<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>
`
}
}
},
visualConfig: {
type: Object,
default() {
return {}
}
},
},
data() {
return {
map: null,
mapName: 'china',
config: {
geo: {
map: 'china',
layoutCenter: ['50%', '38%'],
layoutSize: '100%',
zoom: 1, //当前视角的缩放比例
// roam: true, //是否开启平游或缩放
// scaleLimit: { //滚轮缩放的极限控制
// min: 0.8,
// max: 2,
// },
label: {
show: true,
color: '#fff',
fontSize: 12 * this.sizeRate,
// normal: {
// show: false,
// color: '#cfcfcf',
// },
emphasis: {
color: '#fff',
// fontSize: Math.floor(screen.height * 2 / 100),
// fontFamily: 'Pangmenzhengdao',
}
},
itemStyle: {
normal: {
areaColor: 'rgba(91, 213, 255, 0.2)',
borderColor: 'rgba(91, 213, 255, 0.9)',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(91, 213, 255, 0.2)',
borderColor: 'rgba(91, 213, 255, 0.9)',
}
},
regions: [],
},
series: []
},
curProvince: null,
}
},
mounted() {
this.$nextTick(this.initMap)
},
computed: {
sizeRate() {
return Number((screen.height / 800).toFixed(1))
},
},
methods: {
initMap() {
// 初始化echarts
this.$echarts.registerMap(this.mapName, china)
this.map = this.$echarts.init(this.$refs.map)
// this.addEvent()
// this.config.series.push({
// type: 'scatter', // series图表类型
// coordinateSystem: 'geo', // series坐标系类型
// data: mapData,
// itemStyle: {
// color: 'gold'
// },
// symbolSize: 20 * this.sizeRate,
// symbol: 'pin',
// })
// this.config.tooltip = {
// trigger: 'item',
// formatter: this.visualFormatter,
// // extraCssText: `background-image:url(${require('@/assets/images/tooltip.png')});background-size:cover;`,
// }
this.config.tooltip = {
trigger: 'item',
}
this.config.series = [
{
'type': 'lines',
'zlevel': 2,
'effect': {
'show': true,
'period': 4,
'trailLength': 0.02,
'symbol': 'arrow',
'symbolSize': 5
},
'lineStyle': {
'normal': {
'width': 1,
'opacity': 0.6,
'curveness': 0.2,
color: 'gold',
}
},
'tooltip': {
'trigger': 'item'
},
data: [
{
'fromName': '江苏',
'toName': '安徽',
'value': 17,
'coords': [
[
118.796252,
32.0739
],
[
'117.229',
'31.917'
],
]
},
{
'fromName': '江苏',
'toName': '上海',
'value': 25,
'coords': [
[
118.796252,
32.0739
],
[
'121.465',
'31.289'
],
]
},
{
'fromName': '江苏',
'toName': '湖北',
'value': 31,
'coords': [
[
118.796252,
32.0739
],
[
'114.39',
'30.663'
],
]
},
{
'fromName': '江苏',
'toName': '福建',
'value': 12,
'coords': [
[
118.796252,
32.0739
],
[
'119.454',
'25.922'
],
]
},
{
'fromName': '江苏',
'toName': '浙江',
'value': 19,
'coords': [
[
118.796252,
32.0739
],
[
'119.531',
'29.877'
],
]
},
{
'fromName': '江苏',
'toName': '陕西',
'value': 18,
'coords': [
[
118.796252,
32.0739
],
[
'109.116',
'34.2'
],
]
},
{
'fromName': '江苏',
'toName': '河南',
'value': 15,
'coords': [
[
118.796252,
32.0739
],
[
'113.467',
'34.623'
],
]
},
{
'fromName': '江苏',
'toName': '山东',
'value': 12,
'coords': [
[
118.796252,
32.0739
],
[
'116.972',
'36.737'
],
]
},
{
'fromName': '江苏',
'toName': '广东',
'value': 12,
'coords': [
[
118.796252,
32.0739
],
[
'113.511',
'23.22'
],
]
},
{
'fromName': '江苏',
'toName': '四川',
'value': 10,
'coords': [
[
118.796252,
32.0739
],
[
'103.953',
'30.762'
],
]
},
{
'fromName': '江苏',
'toName': '江西',
'value': 9,
'coords': [
[
118.796252,
32.0739
],
[
'116.005',
'28.663'
],
]
},
]
},
{
'name': '收货地址',
'type': 'effectScatter',
'coordinateSystem': 'geo',
'zlevel': 2,
'rippleEffect': {
'period': 4,
'brushType': 'stroke',
'scale': 4
},
'tooltip': {
'trigger': 'item'
},
'label': {
'normal': {
'show': false,
'position': 'left',
'offset': [
-5,
5
],
'formatter': '{b}'
},
'emphasis': {
'show': true
}
},
'hoverAnimation': true,
'symbol': 'circle',
'symbolSize': 5,
'itemStyle': {
'normal': {
'show': false,
'color': 'rgba(245,216,47,.5)'
}
},
data: [
{
'name': '安徽',
'value': [
'117.229',
'31.917',
17
]
},
{
'name': '上海',
'value': [
'121.465',
'31.289',
25
]
},
{
'name': '湖北',
'value': [
'114.39',
'30.663',
31
]
},
{
'name': '福建',
'value': [
'119.454',
'25.922',
22
]
},
{
'name': '浙江',
'value': [
'119.531',
'29.877',
19
]
},
{
'name': '陕西',
'value': [
'109.116',
'34.2',
18
]
},
{
'name': '河南',
'value': [
'113.467',
'34.623',
15
]
},
{
'name': '山东',
'value': [
'116.972',
'36.737',
12
]
},
{
'name': '广东',
'value': [
'113.511',
'23.22',
12
]
},
{
'name': '四川',
'value': [
'103.953',
'30.762',
10
]
},
{
'name': '江西',
'value': [
'116.005',
'28.663',
9
]
},
]
},
{
'name': '发送地址',
'type': 'scatter',
'coordinateSystem': 'geo',
'zlevel': 2,
'tooltip': {
'trigger': 'item'
},
'label': {
'normal': {
'show': true,
'position': 'right',
'color': '#00ffff',
'formatter': '{b}',
'textStyle': {
'color': '#00ffff'
}
},
'emphasis': {
'show': true
}
},
'symbol': 'circle',
'symbolSize': 5,
'itemStyle': {
'normal': {
'show': false,
'color': 'rgba(16,228,253,.5)'
}
},
'data': [
{
'name': '江苏',
'value': [
'119.68',
'33.199',
19
]
},
]
}
]
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: {
// '$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>
<style lang="stylus" scoped>
.map-wrapper
width 50%
height 70%
left 25%
position absolute
>.map
width 100%
height 100%
z-index 99
>.sum
width 50%
// margin 0 auto
margin 1rem 0 0 1rem
text-align center
font-weight bold
h2
color $edgeColor
font-family $font-pang
font-size 1.5rem
font-weight 400
</style>
<style lang="stylus">
.map-tooltip-info
color $edgeColor
padding 1rem
border .1rem solid $edgeColor
span
color #fff
</style>
src/views/components/seedling/operate-situation.vue 0 → 100644
View file @ cf77f202
<template>
<div class="operate-situation">
<div class="sum">
<div>
<img src="@/assets/images/slice1.png"/>
<div>
<p>总收入</p>
<p style="color:#f3d813;"><m-count style="color:#f3d813;font-weight:bold;" :value="8784187" :decimal="0"/>万元</p>
</div>
</div>
<div>
<img src="@/assets/images/slice2.png"/>
<div>
<p>利润</p>
<p style="color:#05fd70;"><m-count style="color:#05fd70;font-weight:bold;" :value="444877" :decimal="0"/>万元</p>
</div>
</div>
</div>
<div class="chart" ref="chart"/>
</div>
</template>
<script>
const mockValue = [4874454, 224454, 3314454, 4874454]
export default {
name: 'OperateSituation',
data() {
return {
option: {
tooltip: {
trigger: 'axis',
},
radar: [{
name: {
rich: {
a: {
color: '#fff',
lineHeight: 20,
fontSize: 12 * this.sizeRate,
},
b: {
color: '#04c8e2',
align: 'center',
fontSize: 12 * this.sizeRate,
}
},
formatter: (text, {index}) => {
return `{a|${text}}\n{b|${this.$com.transNumber(mockValue[index]) + '万元'}}`
},
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(1,124,143, 1)', 'rgba(1,124,143,0.9)', 'rgba(1,124,143,.7)', 'rgba(1,124,143,.5)', 'rgba(1,124,143,.3)']
}
},
splitLine: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(1,124,143, 1)'
}
},
indicator: [
{text: '人力成本', index: 0, max: 6000000},
{text: '其他投入', index: 1, max: 500000},
{text: '其他成本', index: 2, max: 6000000},
{text: '饲料成本', index: 3, max: 6000000},
],
center: ['50%', '50%'],
radius: '50%',
}],
series: [{
type: 'radar',
tooltip: {
trigger: 'item',
},
lineStyle: {
color: '#1db2b6'
},
areaStyle: {
color: 'rgba(252, 213, 28, .5)',
splitLine: {
color: 'blue',
}
},
data: [{
value: mockValue,
name: '经营情况'
}]
}]
}
}
},
mounted() {
setTimeout(this.init, 0)
},
computed: {
sizeRate() {
return Number((screen.height / 800).toFixed(1))
},
},
methods: {
init() {
this.$echarts.init(this.$refs.chart).setOption(this.option)
}
}
}
</script>
<style lang="stylus" scoped>
.operate-situation
width 100%
height 100%
display flex
flex-direction column
overflow hidden
.sum
display flex
justify-content space-around
margin .5rem 0
>div
display flex
align-items center
justify-content space-around
width 45%
padding .8rem .5rem
background #004a56
p
font-weight bold
img
width 2rem
height @width
margin-right .5rem
.chart
flex 1
</style>
src/views/components/seedling/place-list.vue 0 → 100644
View file @ cf77f202
<template>
<div class="place-list">
<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'};width:100%;`">{{col.title}}</div>
</i-col>
</Row>
<m-scroll :length="model.length" :limit="12">
<Row class="row" v-for="(row, rowIndex) in model" :key="rowIndex" :style="`${row.count >= 15 ? 'color:#d04e4b': ''}`">
<i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0">
<div v-if="typeof row[col.key] === 'number'" :style="`text-align: ${col.align || 'left'};color: ${col.color};width:100%;`">
<m-count :value="row[col.key]" :decimal="0"/>
</div>
<div v-else :style="`text-align: ${col.align || 'left'};color: ${col.color};width:100%;`">{{row[col.key]}}</div>
</i-col>
</Row>
</m-scroll>
</div>
</template>
<script>
export default {
name: 'PlaceList',
data() {
return {
layout: [
{
title: '序号',
key: 'index',
width: 4,
align: 'center',
},
{
title: '良种场名称',
key: 'name',
width: 20,
align: 'center',
},
],
model: [
{index: 1, name: '苏州市大有乡鑫富洋海参养殖场'},
{index: 2, name: '苏州市德诚渔业有限公司'},
{index: 3, name: '苏州市大有乡鑫富洋海参养殖场'},
{index: 4, name: '苏州市德诚渔业有限公司'},
{index: 5, name: '苏州市大有乡鑫富洋海参养殖场'},
{index: 6, name: '苏州市德诚渔业有限公司'},
{index: 7, name: '苏州市大有乡鑫富洋海参养殖场'},
{index: 8, name: '苏州市德诚渔业有限公司'},
{index: 9, name: '苏州市大有乡鑫富洋海参养殖场'},
{index: 10, name: '苏州市德诚渔业有限公司'},
{index: 11, name: '苏州市大有乡鑫富洋海参养殖场'},
{index: 12, name: '苏州市德诚渔业有限公司'},
{index: 13, name: '苏州市大有乡鑫富洋海参养殖场'},
{index: 14, name: '苏州市德诚渔业有限公司'},
{index: 15, name: '苏州市大有乡鑫富洋海参养殖场'},
{index: 16, name: '苏州市德诚渔业有限公司'},
]
}
},
}
</script>
<style lang="stylus" scoped>
.place-list
width 100%
height 100%
overflow hidden
.row
display flex
align-items center
line-height 2.5
&.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>
src/views/components/seedling/product-area.vue 0 → 100644
View file @ cf77f202
<template>
<div class="product-area">
<div v-if="showChart">
<p class="title"><span/>面积</p>
<m-chart v-if="showChart" :config="config" :data="data" />
<div class="legend">
<div v-for="(item,i) in config.colors" :key="item">
<span :style="`background:${item}`"/>
<p>{{data[i].name}}</p>
</div>
</div>
</div>
<div v-if="showChart">
<p class="title"><span/>产量</p>
<m-chart v-if="showChart" :config="config2" :data="data2"/>
<div class="legend">
<div v-for="(item,i) in config2.colors" :key="item">
<span :style="`background:${item}`"/>
<p>{{data2[i].name}}</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ProductArea',
data() {
return {
showChart: false,
config: {
colors: ['#9478f5', '#4ef4e9', '#05bcfe'],
legend: {hide: true},
shape: [
{type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
]
},
data: [
{name: '品种1', value: 52},
{name: '品种2', value: 26},
{name: '品种3', value: 22},
],
config2: {
colors: ['#ff4d4c', '#f7ff14', '#5eec64'],
legend: {hide: true},
shape: [
{type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
]
},
data2: [
{name: '品种1', value: 52},
{name: '品种2', value: 26},
{name: '品种3', value: 22},
],
}
},
mounted() {
setTimeout(() => this.showChart = true, 100)
}
}
</script>
<style lang="stylus" scoped>
.product-area
width 100%
height 100%
overflow hidden
display flex
>div
position relative
flex 1
.title
position absolute
left 1rem
top 0
display flex
align-items center
font-weight bold
font-size 1rem
>span
display block
width .3rem
height 1.2rem
background $edgeColor
margin-right .6rem
.legend
position absolute
bottom 1rem
display flex
justify-content space-around
width 100%
div
display flex
flex-direction column
align-items center
span
display block
width .8rem
height @width
border-radius 50%
</style>
src/views/components/seedling/property-analysis.vue 0 → 100644
View file @ cf77f202
<template>
<div class="property-analysis" v-if="showChart">
<m-chart style="z-index:99;" :config="config" :data="data" :options="{legend: {height: '75%', top: '10%'}}"/>
<div class="border" />
</div>
</template>
<script>
export default {
name: 'PropertyAnalysis',
data() {
return {
showChart: false,
config: {
colors: ['#9779fe', '#51f2ea', '#05bcfe', '#7efe95', '#fef170', '#feaf62', '#f6633b', '#fc3239', '#fb74fb', '#a936f2'],
legend: {
align: 'right',
orient: 'vertical',
},
shape: [
{type: 'pie', radius: [35 * Number((screen.height / 800).toFixed(1)), 45 * Number((screen.height / 800).toFixed(1))], center: ['20%', '50%']}
]
},
data: [
{name: '合资', value: 30},
{name: '外资', value: 20},
{name: '私营', value: 15},
{name: '自营', value: 5},
{name: '国有控股', value: 5},
{name: '大专院校', value: 5},
{name: '社会团体', value: 5},
{name: '党政机关', value: 5},
{name: '事业单位', value: 30},
{name: '科研院所', value: 5},
],
}
},
mounted() {
setTimeout(() => this.showChart = true, 0)
},
}
</script>
<style lang="stylus" scoped>
.property-analysis
width 100%
height 100%
overflow hidden
.border
width 9rem
height @width
border 0.2rem solid #00f2ff
position absolute
top 60%
left 22.5%
transform translate(-50%, -50%)
border-radius 50%
box-shadow 0 0 1rem 0.2rem rgba(255,255,255,0.3), inset 0 0 1rem 0.2rem rgba(255,255,255,0.3)
opacity .9
</style>
src/views/components/seedling/sales-data.vue 0 → 100644
View file @ cf77f202
<template>
<div class="sales-data">
<div class="tabs">
<p>产销数量</p>
<p>销售金额</p>
</div>
<div class="list">
<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'};width:100%;`">{{col.title}}</div>
</i-col>
</Row>
<m-scroll :length="model.length" :limit="12">
<Row class="row" v-for="(row, rowIndex) in model" :key="rowIndex" :style="`${row.count >= 15 ? 'color:#d04e4b': ''}`">
<i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0">
<div v-if="typeof row[col.key] === 'number'" :style="`text-align: ${col.align || 'left'};color: ${col.color};width:100%;`">
<m-count :value="row[col.key]" :decimal="0"/>
</div>
<div v-else :style="`text-align: ${col.align || 'left'};color: ${col.color};width:100%;`">{{row[col.key]}}</div>
</i-col>
</Row>
</m-scroll>
</div>
</div>
</template>
<script>
export default {
name: 'SalesData',
data() {
return {
layout: [
{
title: '名称',
key: 'name',
width: 8,
align: 'center',
},
{
title: '产量(万吨)',
key: 'product',
width: 8,
align: 'center',
},
{
title: '销量(万吨)',
key: 'sales',
width: 8,
align: 'center',
},
],
model: [
{name: '草鱼', product: 1548746, sales: 248745},
{name: '鲫鱼', product: 1548746, sales: 248745},
{name: '鲈鱼', product: 1548746, sales: 248745},
{name: '桂鱼', product: 1548746, sales: 248745},
{name: '草鱼', product: 1548746, sales: 248745},
{name: '鲫鱼', product: 1548746, sales: 248745},
{name: '鲈鱼', product: 1548746, sales: 248745},
{name: '桂鱼', product: 1548746, sales: 248745},
{name: '草鱼', product: 1548746, sales: 248745},
{name: '鲫鱼', product: 1548746, sales: 248745},
{name: '鲈鱼', product: 1548746, sales: 248745},
{name: '桂鱼', product: 1548746, sales: 248745},
{name: '草鱼', product: 1548746, sales: 248745},
{name: '鲫鱼', product: 1548746, sales: 248745},
{name: '鲈鱼', product: 1548746, sales: 248745},
{name: '桂鱼', product: 1548746, sales: 248745},
]
}
},
}
</script>
<style lang="stylus" scoped>
.sales-data
width 100%
height 100%
overflow hidden
display flex
flex-direction column
.tabs
width 50%
margin 0 auto 1rem
border-bottom .1rem solid $edgeColor
display flex
justify-content space-around
>p
text-align center
flex 1
&:first-child
color $edgeColor
font-weight bold
border-bottom .2rem solid $edgeColor
.list
flex 1
.row
display flex
align-items center
// line-height 2.4rem
line-height 2.5
&.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>
src/views/components/seedling/seedling-map.vue 0 → 100644
View file @ cf77f202
<template>
<div class="map-wrapper">
<BorderBox v-if="curProvince" class="title">
<h2>{{curProvince}}</h2>
</BorderBox>
<BorderBox v-else class="sum">
<p>良种场总数量</p>
<h2><m-count class="count" :value="255448745" :decimal="0"/> 个</h2>
</BorderBox>
<div class="map" ref="map"/>
</div>
</template>
<script>
import china from 'echarts/map/json/china.json'
import BorderBox from '../border-box'
const mock = [
{name: '浙江新农都物流中心（水产市场）', address: '杭州市石桥路115号', province: '浙江', value: [120.19706700, 30.24639100], visualMap: false, newDate: '2020-08-15'},
{name: '厦门市水产品批发市场', address: '厦门市高崎北二路77-87号中埔水产批发市场', province: '福建', value: [118.11368800, 24.55107600], visualMap: false, newDate: '2020-08-15'},
{name: '福建省兴业华洲（福建）农贸市场有限公司', address: '泉州晋江市池店镇仕春工业区新华洲水产市场', province: '福建', value: [118.55729200, 24.86104200], visualMap: false, newDate: '2020-08-15'},
{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 = [
{ 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 provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan']
const provinceText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾']
export default {
name: 'SeedlingMap',
components: {
BorderBox,
},
props: {
data: {
type: Array,
default() {
return []
}
},
visualLabel: {
type: Array,
default() {
return ['高', '低']
}
},
visualFormatter: {
type: [String, Function],
default() {
return ({data}) => {
if (data.name && data.address) {
// return `
// <div class="map-tooltip-info">
// <h3>${data.name}</h3>
// <p><span>区域：</span>苏州市吴中区</p>
// <p><span>总面积：</span>487亩</p>
// <p><span>水稻总产值/产量：</span>178,533万元/83,474吨</p>
// <p><span>水产品总产值/产量：</span>98,533万元/23,474吨</p>
// </div>
// `
return null
} else {
return `
<div class="map-tooltip-info">
<h3>${data.name}</h3>
<p><span>良种场个数：</span>154,878个</p>
<p><span>面积：</span><br/>
湖泊（4,867亩)&nbsp;&nbsp;
水域（4,867亩）<br/>
池塘（4,867亩）
实验室（4,867亩）<br/>
海域（4,867亩)&nbsp;&nbsp;
生产车间（4,867亩）<br/>
</p>
</div>
`
}
}
}
},
visualConfig: {
type: Object,
default() {
return {}
}
},
},
data() {
return {
range: [0, 80],
map: null,
mapName: 'china',
config: {
geo: {
map: 'china',
// left: '1%',
// right: '1%',
layoutCenter: ['50%', '40%'],
layoutSize: '100%',
zoom: 1, //当前视角的缩放比例
label: {
normal: {
show: true,
color: '#fff',
fontSize: 12 * this.sizeRate,
},
emphasis: {
color: '#fff',
fontSize: 15 * this.sizeRate,
}
},
itemStyle: {
normal: {
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.loadNationMap()
},
loadNationMap() {
this.curProvince = null
this.map.clear()
this.config.series = [{
type: 'map',
map: this.mapName,
geoIndex: 0,
data: provinceData,
}, {
type: 'scatter', // series图表类型
coordinateSystem: 'geo', // series坐标系类型
data: mock,
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)
},
isProvince(name) {
return provinceText.some(province => province === name)
},
loadMapSource(name) {
// 获取这个省的拼音名字 name = '四川' => pinyinName = 'sichuan'
const pinyinName = provinces[provinceText.indexOf(name)]
// 引入这个对应的地图JS，如果是在项目中要打包，请将这些文件提取出来，放在静态资源中
// build的时候这些文件不会被打包，无可加载资源地图是不会显示的！！！！
require(`echarts/map/js/province/${pinyinName}`)
this.loadMap(name)
},
loadMap(name) {
this.map.clear()
const config = {
geo: {
map: name,
layoutCenter: ['50%', '45%'],
layoutSize: '90%',
zoom: 1, //当前视角的缩放比例
itemStyle: {
areaColor: 'rgba(0, 0, 0, 0.5)',
borderColor: 'rgba(91, 213, 255, 1)',
borderWidth: 1,
},
emphasis: {
label: {
show: false,
},
itemStyle: {
areaColor: 'rgba(0, 0, 0, 0.5)',
}
},
regions: [],
},
series: []
}
this.map.setOption(config)
},
addEvent() {
this.map.on('click', ({name}) => {
if (this.isProvince(name)) {
this.$emit('select', name)
this.curProvince = name
this.loadMapSource(name)
} else if(mock.some(item => item.name === name)) {
this.$emit('choice', name)
}
})
},
},
}
</script>
<style lang="stylus" scoped>
.map-wrapper
width 50%
height 100%
padding-top 3rem
position absolute
left 25%
>.map
width 100%
height 100%
z-index 99
>.title
margin 0 auto
width 30%
h2
text-align center
font-family $font-pang
font-weight 400
letter-spacing .3rem
color $edgeColor
font-size 2rem
>.sum
width 40%
margin 0 auto
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">
.map-tooltip-info
color $edgeColor
padding 1rem
border .1rem solid $edgeColor
span
color #fff
</style>
src/views/components/seedling/smart-control.vue 0 → 100644
View file @ cf77f202
<template>
<div class="smart-control">
<div v-for="item in list" :key="item.name">
<p>
<img :src="require(`@/assets/images/${getStatus(item.status).icon}`)"/>
设备名称：{{item.name}}
</p>
<p>
<span :style="`background:${getStatus(item.status).color}`"></span>
状态：{{getStatus(item.status).txt}}
</p>
<span :class="item.status === 1 ? 'on' : ''">禁用</span>
</div>
</div>
</template>
<script>
export default {
name: 'SmartControl',
data() {
return {
list: [
{name: '1号塘', status: 0},
{name: '2号塘', status: 1},
{name: '3号塘', status: 0},
{name: '4号塘', status: 2},
]
}
},
methods: {
getStatus(status) {
switch (status) {
case 0:
return {
icon: 'gray.png',
color: '#a9a9ab',
txt: '不在线'
}
case 1:
return {
icon: 'green.png',
color: '#73fe3e',
txt: '在线'
}
case 2:
return {
icon: 'red.png',
color: '#fe2323',
txt: '异常'
}
default:
break
}
}
}
}
</script>
<style lang="stylus" scoped>
.smart-control
width 100%
height 100%
overflow hidden
>div
display flex
align-items center
margin 1rem 0
p
display flex
align-items center
&:nth-child(2)
margin-left 1rem
flex 1
img
width 2rem
height @width
margin-right .5rem
>span
display inline-block
width 1rem
height @width
border-radius 50%
margin-right .5rem
>span
padding .1rem .5rem
border-radius 1.2rem
background #999
font-weight bold
cursor pointer
align-self end
border .1rem solid #999
&.on,
&:hover
border .1rem solid $edgeColor
color $edgeColor
background $color-map()
</style>
src/views/components/seedling/tail-water.vue 0 → 100644
View file @ cf77f202
<template>
<div class="tail-water">
<p>采集时间：2020-08-23 14:09:11</p>
<div class="wrapper">
<div v-for="item in list" :key="item.name">
<i-circle
:percent="item.value"
:size="80 * sizeRate"
:trail-width="6 * sizeRate"
:stroke-color="item.color"
trail-color="rgba(255,255,255,0.1)">
<span :style="`color:${item.color};font-size:1.5rem;font-weight:bold;`">{{item.value}}%</span>
</i-circle>
<p :style="`color:${item.color}`">{{item.count}}</p>
<p :style="`color:${item.color}`">{{item.name}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'TailWater',
data() {
return {
list: [
{name: '总磷', value: 80, color: '#4ec6fd', count: '0.217mg/L'},
{name: '总氮', value: 72, color: '#40fdfc', count: '2.4654mg/L'},
{name: 'COD', value: 20, color: '#9375fd', count: '7.452mg/L'},
]
}
},
computed: {
sizeRate() {
return Number((screen.height / 800).toFixed(1))
},
}
}
</script>
<style lang="stylus" scoped>
.tail-water
width 100%
height 100%
>p
text-align center
.wrapper
display flex
align-items center
justify-content space-around
margin-top 1rem
>div
p
font-size 1.2rem
text-align center
font-weight bold
line-height 1.5
</style>
src/views/components/seedling/trend.vue 0 → 100644
View file @ cf77f202
<template>
<div class="trend">
<Select class="select" value="南美白对虾" transfer>
<Option v-for="item in ['南美白对虾']" :key="item" :value="item">{{item}}</Option>
</Select>
<div class="chart" v-if="showChart">
<p><span/>价格趋势</p>
<div class="unit">单位：元</div>
<div class="inner">
<m-chart :config="config" :data="data"/>
</div>
</div>
<div class="chart" v-if="showChart">
<p><span/>产量趋势</p>
<div class="unit">单位：吨</div>
<div class="inner">
<m-chart :config="config2" :data="data2"/>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Trend',
data() {
return {
showChart: false,
config: {
colors: [['rgba(248,199,22,1)', 'rgba(248,199,22,0.2)']],
legend: {
hide: true,
},
shape: [
{type: 'line', areaStyle: {}, key: 'value'},
],
xAxis: {
key: 'name',
},
},
data: [
{name: '1月', value: 30},
{name: '2月', value: 25},
{name: '3月', value: 30},
{name: '4月', value: 35},
{name: '5月', value: 40},
{name: '6月', value: 45},
{name: '7月', value: 50},
{name: '8月', value: 40},
{name: '9月', value: 35},
{name: '10月', value: 30},
{name: '11月', value: 35},
{name: '12月', value: 40},
],
config2: {
colors: [['rgba(220,66,69,1)', 'rgba(220,66,69,0.2)']],
legend: {
hide: true,
},
shape: [
{type: 'line', areaStyle: {}, key: 'value'},
],
xAxis: {
key: 'name',
},
},
data2: [
{name: '1月', value: 300000},
{name: '2月', value: 250000},
{name: '3月', value: 300000},
{name: '4月', value: 350000},
{name: '5月', value: 400000},
{name: '6月', value: 450000},
{name: '7月', value: 500000},
{name: '8月', value: 400000},
{name: '9月', value: 350000},
{name: '10月', value: 300000},
{name: '11月', value: 350000},
{name: '12月', value: 400000},
],
}
},
mounted() {
setTimeout(() => this.showChart = true, 0)
}
}
</script>
<style lang="stylus" scoped>
.trend
width 100%
height 100%
overflow hidden
>.select
display block
width 50%
margin 0 auto
>.chart
width 100%
height 48%
position relative
display flex
flex-direction column
.unit
color $edgeColor
margin .5rem 0
.inner
flex 1
span
display block
text-align center
color $edgeColor
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
</style>
src/views/components/seedling/water-test.vue 0 → 100644
View file @ cf77f202
<template>
<div class="water-test">
<p>采集时间：2020-08-23 14:09:01</p>
<div class="wrapper">
<div v-for="item in list" :key="item.name">
<img :src="require(`@/assets/images/${item.src}`)"/>
<p>{{item.name}}</p>
<p>{{item.value}}</p>
</div>
</div>
<p>历史数据 >>></p>
</div>
</template>
<script>
export default {
name: 'WaterTest',
data() {
return {
list: [
{name: 'PH值', value: 7.76, src: 'icon1.png'},
{name: '温度', value: '29.52℃', src: 'icon2.png'},
{name: '溶氧量', value: '9.39mg/L', src: 'icon3.png'},
]
}
},
}
</script>
<style lang="stylus" scoped>
.water-test
width 100%
height 100%
>p
text-align center
&:last-child
color $edgeColor
.wrapper
display flex
justify-content space-around
margin 2rem 0
>div
text-align center
flex 1
&:first-child
color #d63d41
&:nth-child(2)
color #f7d009
&:last-child
color #48b4e4
img
width 3rem
p
&:last-child
font-size 1.3rem
font-weight bold
</style>
src/views/components/seedling/weather.vue 0 → 100644
View file @ cf77f202
<template>
<div class="weather">
<p>采集时间：2020-08-23 14:08:23</p>
<div class="wrapper">
<div v-for="item in list" :key="item.name">
<img :src="require(`@/assets/images/${item.icon}`)"/>
<div>
<p>{{item.name}}</p>
<p>{{item.value}}</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Weather',
data() {
return {
list: [
{name: '气压', value: '99.5Pa', icon: '1.png'},
{name: '大气湿度', value: '75.6RH', icon: '2.png'},
{name: '大气温度', value: '29.1℃', icon: '3.png'},
{name: '风速', value: '1.24m/s', icon: '4.png'},
{name: '风向', value: '225°', icon: '5.png'},
{name: '光照', value: '14778lux', icon: '6.png'},
{name: '雨量', value: '27.5mm', icon: '7.png'},
]
}
},
}
</script>
<style lang="stylus" scoped>
.weather
width 100%
height 100%
>p
text-align center
margin-bottom .5rem
.wrapper
display flex
flex-wrap wrap
>div
width 33%
display flex
align-items center
padding .5rem .3rem
img
width 2.5rem
// height @width
margin-right .3rem
div
>p
&:last-child
color $edgeColor
font-weight bold
</style>
src/views/ocean-farm.vue
View file @ cf77f202
...@@ -106,6 +106,10 @@ export default { ...@@ -106,6 +106,10 @@ export default {
mounted() { mounted() {
this.$nextTick(this.initMap) this.$nextTick(this.initMap)
}, },
beforeDestroy() {
this.map && this.map.destroy()
this.map = null
},
methods: { methods: {
initMap() { initMap() {
this.map = new AMap.Map('oceanMap', this.mapConfig) this.map = new AMap.Map('oceanMap', this.mapConfig)
......
src/views/seedling.vue 0 → 100644
View file @ cf77f202
<template>
<m-grid
area="grid"
:template="[
'left . right',
'left . right',
'left bottom right',
]"
columns="1fr 2fr 1fr"
rows="1fr 1fr 1fr"
gap="0.5rem">
<m-animate enter="fadeInDown" leave="fadeOutUp">
<SeedlingMap v-if="!showCompany" ref="map" @select="handleMapSelect" @choice="handleMapChoice"/>
</m-animate>
<m-animate enter="fadeInDown" leave="fadeOutUp">
<MigrateMap v-if="showCompany" />
</m-animate>
<div v-if="showProvince || showCompany" class="back-btn" @click="handleBack">
<Icon type="md-arrow-round-back" /> 返回
</div>
<m-animate enter="fadeInLeft" leave="fadeOutLeft">
<div v-show="!showProvince && !showCompany" area="left" class="content part-left">
<m-card title="近5年面积与数量对比">
<AreaCount />
</m-card>
<m-card title="产销数据信息">
<SalesData />
</m-card>
</div>
</m-animate>
<m-animate enter="fadeInLeft" leave="fadeOutLeft">
<div v-show="showProvince" area="left" class="content part-left">
<m-card title="近5年面积与数量对比">
<AreaCount v-if="showProvince"/>
</m-card>
<m-card title="良种场列表">
<PlaceList v-if="showProvince" />
</m-card>
</div>
</m-animate>
<m-animate enter="fadeInLeft" leave="fadeOutLeft">
<div v-show="showCompany" area="left" class="content part-left2">
<m-card title="企业简介">
<Select class="custom-select" value="宣传图片" transfer>
<Option v-for="item in ['宣传图片']" :key="item" :value="item">{{item}}</Option>
</Select>
<img style="width:100%;height:92%;" src="@/assets/images/img4.png"/>
</m-card>
<m-card title="水质监测">
<WaterTest />
</m-card>
<m-card title="尾水监测">
<TailWater />
</m-card>
</div>
</m-animate>
<m-animate enter="fadeInRight" leave="fadeOutRight">
<div v-show="!showProvince && !showCompany" area="right" class="content part-right">
<m-card title="良种场性质分析">
<PropertyAnalysis />
</m-card>
<m-card title="良种场经营情况">
<OperateSituation />
</m-card>
</div>
</m-animate>
<m-animate enter="fadeInRight" leave="fadeOutRight">
<div v-show="showProvince" area="right" class="content part-right">
<m-card title="产量和面积">
<ProductArea v-if="showProvince"/>
</m-card>
<m-card title="良种价格和产量趋势">
<Trend v-if="showProvince"/>
</m-card>
</div>
</m-animate>
<m-animate enter="fadeInRight" leave="fadeOutRight">
<div v-show="showCompany" area="right" class="content part-right2">
<m-card title="视频监控">
<Select class="custom-select" value="线路1" transfer>
<Option v-for="item in ['线路1']" :key="item" :value="item">{{item}}</Option>
</Select>
<img style="width:100%;height:92%;" src="@/assets/images/img5.png"/>
</m-card>
<m-card title="气象监测">
<Weather />
</m-card>
<m-card title="智能控制">
<SmartControl />
</m-card>
</div>
</m-animate>
<m-animate enter="fadeInUp" leave="fadeOutDown">
<m-card v-show="showCompany" area="bottom" title="会诊信息">
<ConsultInfo />
</m-card>
</m-animate>
</m-grid>
</template>
<script>
import AreaCount from './components/seedling/area-count'
import SalesData from './components/seedling/sales-data'
import PropertyAnalysis from './components/seedling/property-analysis'
import OperateSituation from './components/seedling/operate-situation'
import SeedlingMap from './components/seedling/seedling-map'
import MigrateMap from './components/seedling/migrate-map'
import PlaceList from './components/seedling/place-list'
import ProductArea from './components/seedling/product-area'
import Trend from './components/seedling/trend'
import WaterTest from './components/seedling/water-test'
import TailWater from './components/seedling/tail-water'
import Weather from './components/seedling/weather'
import SmartControl from './components/seedling/smart-control'
import ConsultInfo from './components/seedling/consult-info'
export default {
name: 'Seedling',
components: {
AreaCount,
SalesData,
PropertyAnalysis,
OperateSituation,
SeedlingMap,
MigrateMap,
PlaceList,
ProductArea,
Trend,
WaterTest,
TailWater,
Weather,
SmartControl,
ConsultInfo,
},
data() {
return {
showProvince: false,
showCompany: false,
}
},
methods: {
handleMapSelect() {
this.showProvince = true
},
handleBack() {
this.$refs.map && this.$refs.map.loadNationMap()
this.showProvince = false
this.showCompany = false
},
handleMapChoice() {
this.showCompany = true
}
}
}
</script>
<style lang="stylus" scoped>
.content
display flex
flex-direction column
width 100%
height 100%
overflow hidden
>div
margin-top .5rem
&.part-left,
&.part-right
>div
&:nth-child(1)
flex 1
&:nth-child(2)
flex 2
&.part-left2,
&.part-right2
>div
flex 1
</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