Commit cf642d29 authored by 郭铭瑶's avatar 郭铭瑶 🤘

08.24会后调整(缺收起按钮和功能)

parent 21609145
......@@ -58,7 +58,7 @@ $color-main = #5BD5FF
position absolute
top 1rem
right .5rem
width 7rem
width 6rem
.back-btn
position fixed
top .6rem
......
// $font-yahei = Microsoft YaHei UI, 'Avenir', Helvetica, Arial, sans-serif
$font-yahei = Microsoft YaHei UI, 'Avenir', Helvetica, Arial, sans-serif
$font-pang = Pangmenzhengdao, 'Avenir', Helvetica, Arial, sans-serif
$font-din = DIN, 'Avenir', Helvetica, Arial, sans-serif
$color-map(opacity = 0.3)
......
......@@ -37,7 +37,7 @@ export default {
*/
transNumber(num) {
const arr = num.toString().split('.')
let int = arr[0], result = ''
let [int] = arr, result = ''
while (int.length > 3) {
result = ',' + int.slice(-3) + result
int = int.slice(0, int.length - 3)
......
......@@ -75,6 +75,7 @@ export default {
chart: null,
option: {
tooltip: {
confine: true,
trigger: 'axis',
},
grid: {
......
......@@ -121,6 +121,7 @@ export default {
// })
this.config.tooltip = {
trigger: 'item',
confine: true,
formatter: this.visualFormatter,
// extraCssText: `background-image:url(${require('@/assets/images/tooltip.png')});background-size:cover;`,
}
......
<template>
<div class="disease-warning">
<p>预警指标:报,问诊,用药,天气情况</p>
<p>预警指标:报,问诊,用药,天气情况</p>
<Select v-model="type" class="custom-select" @on-change="setMapData" size="small" transfer>
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select>
......@@ -65,7 +65,7 @@ export default {
},
tooltip: {
trigger: 'item',
// formatter: '{b}:{c}'
confine: true,
formatter: ({data}) => {
if (data && data.value) {
return `<div>${data.name}${data.value}</div>`
......
......@@ -31,6 +31,7 @@ export default {
chart: null,
option: {
tooltip: {
confine: true,
trigger: 'axis',
},
legend: {
......
......@@ -188,16 +188,9 @@ export default {
config: {
geo: {
map: 'china',
left: '1%',
right: '1%',
// top: 'auto',
// bottom: '10%',
zoom: 1, //当前视角的缩放比例
// roam: true, //是否开启平游或缩放
// scaleLimit: { //滚轮缩放的极限控制
// min: 0.8,
// max: 2,
// },
layoutCenter: ['45%', '50%'],
layoutSize: '95%',
label: {
normal: {
show: true,
......
......@@ -126,17 +126,17 @@ export default {
{
title: '日期',
key: 'date',
width: 4,
width: 3,
},
{
title: '品种',
key: 'type',
width: 6,
width: 4,
},
{
title: '规格',
key: 'size',
width: 5,
width: 8,
},
{
title: '价格(元)',
......@@ -165,6 +165,7 @@ export default {
align-items center
// line-height 2.4rem
line-height 2
font-family 'Avenir', Helvetica, Arial, sans-serif !important
&.row-title
font-weight bold
background-color $color-map()
......@@ -172,9 +173,9 @@ export default {
&:nth-child(2n)
background-color $color-map(0.15)
.col
padding 0 .5rem
padding 0 .3rem
display flex
align-items center
flex-wrap wrap
font-size .9rem
font-size .85rem
</style>
......@@ -49,7 +49,7 @@ export default {
name: 'PriceAnalysis',
data() {
return {
type: ['青鱼'],
type: ['青鱼', '草鱼', '鳙'],
options: [
{name: '青鱼', disabled: false},
{name: '草鱼', disabled: false},
......
......@@ -7,7 +7,7 @@
<div v-if="showChart">
<p><span/>销售额</p>
<span class="unit">单位:万元</span>
<m-chart class="chart" :config="config2" :data="data2"/>
<m-chart class="chart" :config="config2" :data="data2" :options="{xAxis}"/>
</div>
</div>
</template>
......@@ -64,7 +64,7 @@ export default {
hide: true,
},
shape: [
{type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 60 * Number((screen.height / 800).toFixed(1))], startAngle: 0, label: {show: true, fontSize: 12 * Number((screen.height / 800).toFixed(1)), formatter: '{b}: {c}万吨'}}
{type: 'pie', radius: [35 * Number((screen.height / 800).toFixed(1)), 55 * Number((screen.height / 800).toFixed(1))], startAngle: 0, label: {show: true, fontSize: 12 * Number((screen.height / 800).toFixed(1)), formatter: '{b}: {c}万吨'}}
]
},
data: [],
......@@ -81,6 +81,16 @@ export default {
},
},
data2: [],
xAxis: {
axisLabel: {
rotate: 0,
interval: 0,
fontSize: 12 * Number((screen.height / 800).toFixed(1)),
textStyle: {
color: '#fff',
},
}
}
}
},
mounted() {
......
<template>
<div class="area-count" v-if="showChart">
<m-chart :config="config" :data="data"/>
<m-chart :config="config" :data="data" :options="{xAxis}"/>
<p>面积(公顷)</p>
<p>数量(个)</p>
</div>
......@@ -31,7 +31,17 @@ export default {
{year: '2017', area: 400000, count: 500000},
{year: '2018', area: 500000, count: 650000},
{year: '2019', area: 600000, count: 750000},
]
],
xAxis: {
axisLabel: {
rotate: 0,
interval: 0,
fontSize: 12 * Number((screen.height / 800).toFixed(1)),
textStyle: {
color: '#fff',
},
}
}
}
},
mounted() {
......
......@@ -7,7 +7,7 @@
</div>
<div>
<p><span/>种群数量</p>
<span class="tips">本月识别种类:鱿鱼、鲳鱼、鲷鱼、尤头鱼</span>
<span class="tips">本月识别数量:15,238尾</span>
<div class="chart" ref="chart2" />
</div>
</div>
......
......@@ -13,6 +13,7 @@ export default {
config: {
colors: ['#feec40', '#05bbfd', '#fe4949'],
tooltip: {
confine: true,
trigger: 'item',
formatter: '{b}<br/>{c}公顷'
},
......
......@@ -26,6 +26,7 @@ export default {
option: {
tooltip: {
trigger: 'axis',
confine: true,
},
grid: {
top: '16%',
......
......@@ -32,7 +32,7 @@ export default {
},
tooltip: {
trigger: 'item',
// formatter: '{b}:{c}'
confine: true,
formatter: ({data}) => {
if (data && data.value) {
return `<div>${data.name}${data.value}</div>`
......
......@@ -24,15 +24,16 @@ export default {
return {
showChart: false,
config: {
colors: ['#0062f0', '#49a7db', '#72b3f7', '#c8dfff'],
// colors: ['#0062f0', '#49a7db', '#72b3f7', '#c8dfff'],
legend: {
hide: true,
},
tooltip: {
confine: true,
formatter: '{c}亩'
},
shape: [
{type: 'pie', radius: [30, 60 * Number((screen.height / 800).toFixed(1))], startAngle: 30, label: {show: true, formatter: '{d}%\n{b}', fontSize: 12 * Number((screen.height / 800).toFixed(1))}, center: ['50%', '52%']}
{type: 'pie', radius: [40 * Number((screen.height / 800).toFixed(1)), 60 * Number((screen.height / 800).toFixed(1))], startAngle: 30, label: {show: true, formatter: '{d}%\n{b}', fontSize: 12 * Number((screen.height / 800).toFixed(1))}, center: ['50%', '52%']}
]
},
}
......
<template>
<div class="data-comparison" v-if="showChart">
<m-chart :config="config" :data="data"/>
<m-chart :config="config" :data="data" :options="{xAxis}"/>
<p>面积(亩)</p>
<p>产量(吨)</p>
</div>
......@@ -33,6 +33,16 @@ export default {
key: 'year',
},
},
xAxis: {
axisLabel: {
rotate: 0,
interval: 0,
fontSize: 12 * Number((screen.height / 800).toFixed(1)),
textStyle: {
color: '#fff',
},
}
}
}
},
mounted() {
......
......@@ -41,7 +41,7 @@ const mock = [
{name: '稻蛙', value: 600},
{name: '稻螺', value: 0},
{name: '其他', value: 28672},
{value: 287391.3}
// {value: 287391.3}
],
data2: [
{name: '稻小龙虾', value: 124596.413},
......@@ -78,7 +78,7 @@ const mock = [
{name: '稻蛙', value: 600},
{name: '稻螺', value: 0},
{name: '其他', value: 28672},
{value: 287391.3}
// {value: 287391.3}
],
data2: [
{name: '稻小龙虾', value: 38155.739},
......@@ -112,20 +112,21 @@ export default {
type: '水稻',
options: ['水稻', '水产品'],
config: {
colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb', 'transparent'],
colors: ['#41D9C7', '#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#5CA3E6', '#F04864', '#D598D9'],
legend: {
hide: true,
},
tooltip: {
formatter: '{b}:{c}亩'
formatter: '{b}:{c}亩',
confine: true,
},
shape: [
{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%']}
{type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 50 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
]
},
data: mock[0].data1,
config2: {
colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
colors: ['#41D9C7', '#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#5CA3E6', '#F04864', '#D598D9'],
legend: {
hide: true,
},
......@@ -135,7 +136,7 @@ export default {
},
data2: mock[0].data2,
config3: {
colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
colors: ['#41D9C7', '#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#5CA3E6', '#F04864', '#D598D9'],
legend: {
hide: true,
},
......
......@@ -39,12 +39,13 @@ export default {
return {
showChart: false,
config: {
colors: ['#fe3c3a', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
colors: ['#41D9C7', '#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#5CA3E6', '#F04864', '#D598D9'],
legend: {
hide: true,
},
tooltip: {
formatter: '{b}:{c}亩'
formatter: '{b}:{c}亩',
confine: true,
},
shape: [
{type: 'pie', radius: [35 * Number((screen.height / 800).toFixed(1)), 55 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
......@@ -62,12 +63,13 @@ export default {
{name: '其他', value: 0},
],
config2: {
colors: ['#fe3c3a', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
colors: ['#41D9C7', '#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#5CA3E6', '#F04864', '#D598D9'],
legend: {
hide: true,
},
tooltip: {
formatter: '{b}:{c}吨'
formatter: '{b}:{c}吨',
confine: true,
},
shape: [
{type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
......@@ -85,12 +87,13 @@ export default {
{name: '其他', value: 0},
],
config3: {
colors: ['#fe3c3a', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
colors: ['#41D9C7', '#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#5CA3E6', '#F04864', '#D598D9'],
legend: {
hide: true,
},
tooltip: {
formatter: '{b}:{c}万元'
formatter: '{b}:{c}万元',
confine: true,
},
shape: [
{type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
......
......@@ -19,7 +19,7 @@
<m-card area="box1" title="养殖模式数据占比">
<ModeRate />
</m-card>
<m-card area="box2" title="各面积占比">
<m-card area="box2" title="示范区按面积分类占比">
<AreaRate />
</m-card>
<m-card area="box3" title="稻小龙虾数据对比">
......
......@@ -19,7 +19,7 @@
<m-card area="box1" title="养殖模式数据占比">
<ModeRate2 />
</m-card>
<m-card area="box2" title="各面积占比">
<m-card area="box2" title="示范区按面积分类占比">
<AreaRate :data="areaData"/>
</m-card>
<m-card area="box3" title="稻小龙虾数据对比">
......
......@@ -288,7 +288,7 @@ export default {
layoutSize: '90%',
zoom: 1, //当前视角的缩放比例
itemStyle: {
areaColor: 'rgba(0, 0, 0, 0.5)',
areaColor: 'rgba(140,228,252,0.3)',
borderColor: 'rgba(91, 213, 255, 1)',
borderWidth: 1,
},
......@@ -297,13 +297,14 @@ export default {
show: false,
},
itemStyle: {
areaColor: 'rgba(0, 0, 0, 0.5)',
areaColor: 'rgba(140,228,252,0.5)',
}
},
regions: [],
},
tooltip: {
trigger: 'item',
confine: true,
formatter: ({data}) => {
return `
<div class="map-tooltip-info">
......
<template>
<div class="area-count" v-if="showChart">
<m-chart :config="config" :data="data"/>
<m-chart :config="config" :data="data" :options="{xAxis}"/>
<p>面积(公顷)</p>
<p>数量(个)</p>
</div>
......@@ -31,7 +31,17 @@ export default {
{year: '2017', area: 400000, count: 500000},
{year: '2018', area: 500000, count: 650000},
{year: '2019', area: 600000, count: 750000},
]
],
xAxis: {
axisLabel: {
rotate: 0,
interval: 0,
fontSize: 12 * Number((screen.height / 800).toFixed(1)),
textStyle: {
color: '#fff',
},
}
}
}
},
mounted() {
......
......@@ -30,12 +30,12 @@ export default {
{
title: '主题',
key: 'theme',
width: 6,
width: 8,
},
{
title: '处理状态',
key: 'status',
width: 4,
width: 3,
formatter: val => {
return val == '1' ? '已处理' : '未处理'
}
......@@ -43,17 +43,17 @@ export default {
{
title: '送检单位',
key: 'unit',
width: 6,
width: 7,
},
{
title: '送检时间',
key: 'time',
width: 4,
width: 3,
},
{
title: '处理时间',
key: 'done',
width: 4,
width: 3,
},
],
model: [
......@@ -89,7 +89,7 @@ export default {
&:nth-child(2n)
background-color $color-map(0.15)
.col
padding 0 .5rem
padding 0 .3rem
display flex
align-items center
flex-wrap wrap
......
......@@ -29,6 +29,7 @@ export default {
option: {
tooltip: {
trigger: 'axis',
confine: true,
},
radar: [{
name: {
......@@ -76,6 +77,19 @@ export default {
type: 'radar',
tooltip: {
trigger: 'item',
confine: true,
formatter: ({data}) => {
const {value} = data
const [{indicator}] = this.option.radar
return `
<div>
<p>${indicator[0].text}:<span>${this.$com.transNumber(value[0])}万元</span></p>
<p>${indicator[1].text}:<span>${this.$com.transNumber(value[1])}万元</span></p>
<p>${indicator[2].text}:<span>${this.$com.transNumber(value[2])}万元</span></p>
<p>${indicator[3].text}:<span>${this.$com.transNumber(value[3])}万元</span></p>
</div>
`
}
},
lineStyle: {
color: '#1db2b6'
......@@ -120,7 +134,7 @@ export default {
.sum
display flex
justify-content space-around
margin .5rem 0
margin 1rem 0
>div
display flex
align-items center
......
<template>
<div class="property-analysis" v-if="showChart">
<m-chart style="z-index:99;" :config="config" :data="data" :options="{legend: {height: '75%', top: '10%'}}"/>
<m-chart style="z-index:99;" :config="config" :data="data" />
<div class="border" />
<div class="legend">
<p v-for="(item, i) in config.colors" :key="item">
<span :style="`background:${item}`"/>
{{data[i].name}}
</p>
</div>
</div>
</template>
......@@ -14,11 +20,10 @@ export default {
config: {
colors: ['#9779fe', '#51f2ea', '#05bcfe', '#7efe95', '#fef170', '#feaf62', '#f6633b', '#fc3239', '#fb74fb', '#a936f2'],
legend: {
align: 'right',
orient: 'vertical',
hide: true,
},
shape: [
{type: 'pie', radius: [35 * Number((screen.height / 800).toFixed(1)), 45 * Number((screen.height / 800).toFixed(1))], center: ['20%', '50%']}
{type: 'pie', radius: [35 * Number((screen.height / 800).toFixed(1)), 45 * Number((screen.height / 800).toFixed(1))], center: ['25%', '50%']}
]
},
data: [
......@@ -46,15 +51,36 @@ export default {
width 100%
height 100%
overflow hidden
position relative
.border
width 9rem
height @width
border 0.2rem solid #00f2ff
position absolute
top 60%
left 22.5%
top 50%
left 25%
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
.legend
position absolute
height 60%
width 50%
right 0
top 0
bottom 0
margin auto 0
display flex
flex-direction column
justify-content space-around
flex-wrap wrap
p
height 18%
width 50%
span
display inline-block
width .8rem
height @width
border-radius 50%
</style>
......@@ -302,7 +302,7 @@ export default {
layoutSize: '90%',
zoom: 1, //当前视角的缩放比例
itemStyle: {
areaColor: 'rgba(0, 0, 0, 0.5)',
areaColor: 'rgba(140,228,252,0.3)',
borderColor: 'rgba(91, 213, 255, 1)',
borderWidth: 1,
},
......@@ -311,7 +311,7 @@ export default {
show: false,
},
itemStyle: {
areaColor: 'rgba(0, 0, 0, 0.5)',
areaColor: 'rgba(140,228,252,0.5)',
}
},
regions: [],
......
......@@ -61,6 +61,7 @@ export default {
width 100%
height 100%
overflow hidden
font-size .9rem
>div
display flex
align-items center
......@@ -72,17 +73,17 @@ export default {
margin-left 1rem
flex 1
img
width 2rem
width 1.5rem
height @width
margin-right .5rem
>span
display inline-block
width 1rem
width .8rem
height @width
border-radius 50%
margin-right .5rem
>span
padding .1rem .5rem
padding .1rem .7rem
border-radius 1.2rem
background #999
font-weight bold
......
......@@ -7,14 +7,14 @@
<p><span/>价格趋势</p>
<div class="unit">单位:元</div>
<div class="inner">
<m-chart :config="config" :data="data"/>
<m-chart :config="config" :data="data" :options="{xAxis}"/>
</div>
</div>
<div class="chart" v-if="showChart">
<p><span/>产量趋势</p>
<div class="unit">单位:吨</div>
<div class="inner">
<m-chart :config="config2" :data="data2"/>
<m-chart :config="config2" :data="data2" :options="{xAxis}"/>
</div>
</div>
</div>
......@@ -78,6 +78,16 @@ export default {
{name: '11月', value: 350000},
{name: '12月', value: 400000},
],
xAxis: {
axisLabel: {
rotate: 45,
interval: 0,
fontSize: 12 * Number((screen.height / 800).toFixed(1)),
textStyle: {
color: '#fff',
},
}
}
}
},
mounted() {
......
......@@ -6,7 +6,7 @@
'map box2 box3',
'map box2 box4',
]"
columns="1fr 0.6fr 0.6fr"
columns="0.8fr 0.5fr 0.6fr"
rows="2rem 1fr 1fr 1fr"
gap="0.5rem"
>
......
......@@ -56,6 +56,12 @@
</m-animate>
<m-animate enter="fadeInRight" leave="fadeOutRight">
<div v-show="!showProvince && !showCompany" area="right" class="content part-right">
<div class="year-select-wrapper">
<p>主显示</p>
<Select class="year-select" value="2019" transfer>
<Option v-for="item in ['2019']" :key="item" :value="item">{{item}}</Option>
</Select>
</div>
<m-card title="良种场性质分析">
<PropertyAnalysis />
</m-card>
......@@ -66,6 +72,12 @@
</m-animate>
<m-animate enter="fadeInRight" leave="fadeOutRight">
<div v-show="showProvince" area="right" class="content part-right">
<div class="year-select-wrapper">
<p>主显示</p>
<Select class="year-select" value="2019" transfer>
<Option v-for="item in ['2019']" :key="item" :value="item">{{item}}</Option>
</Select>
</div>
<m-card title="产量和面积">
<ProductArea v-if="showProvince"/>
</m-card>
......@@ -162,15 +174,32 @@ export default {
overflow hidden
>div
margin-top .5rem
&.part-left,
&.part-right
&.part-left
>div
&:nth-child(1)
flex 1
&:nth-child(2)
flex 2
&.part-right
>div
&:nth-child(1)
flex 0.2
&:nth-child(2)
flex 1
&:nth-child(3)
flex 2
&.part-left2,
&.part-right2
>div
flex 1
.year-select-wrapper
display flex
align-items center
justify-content flex-end
p
font-size 1.2rem
font-weight bold
margin-right 1rem
.year-select
width 30%
</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