Skip to content

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

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

parent c30c2744
Expand all 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/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
This diff is collapsed.
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
This diff is collapsed.
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