08.24会后调整（缺收起按钮和功能）

src/assets/css/reset.styl

@@ -58,7 +58,7 @@ $color-main = #5BD5FF
     position absolute
     top 1rem
     right .5rem
-    width 7rem
+    width 6rem
   .back-btn
     position fixed
     top .6rem

src/assets/css/variables.styl

-// $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)

src/util/common.js

@@ -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)

src/views/components/disease/disease-forecast.vue

@@ -75,6 +75,7 @@ export default {
       chart: null,
       option: {
         tooltip: {
+          confine: true,
           trigger: 'axis',
         },
         grid: {

src/views/components/disease/disease-map.vue

@@ -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;`,
       }

src/views/components/disease/disease-warning.vue

 <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>`

src/views/components/disease/special-monitoring.vue

@@ -31,6 +31,7 @@ export default {
       chart: null,
       option: {
         tooltip: {
+          confine: true,
           trigger: 'axis',
         },
         legend: {

src/views/components/fishing-price/fishing-price-map.vue

@@ -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,

src/views/components/fishing-price/new-quotation.vue

@@ -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>

src/views/components/fishing-price/price-analysis.vue

@@ -49,7 +49,7 @@ export default {
   name: 'PriceAnalysis',
   data() {
     return {
-      type: ['青鱼'],
+      type: ['青鱼', '草鱼', '鳙'],
       options: [
         {name: '青鱼', disabled: false},
         {name: '草鱼', disabled: false},

src/views/components/fishing-price/trade-situation.vue

@@ -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() {

src/views/components/ocean-farm/area-count.vue

 <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() {

src/views/components/ocean-farm/data-identify.vue

@@ -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>

src/views/components/ocean-farm/farm-rate.vue

@@ -13,6 +13,7 @@ export default {
       config: {
         colors: ['#feec40', '#05bbfd', '#fe4949'],
         tooltip: {
+          confine: true,
           trigger: 'item',
           formatter: '{b}<br/>{c}公顷'
         },

src/views/components/quality-safety/forecast.vue

@@ -26,6 +26,7 @@ export default {
       option: {
         tooltip: {
           trigger: 'axis',
+          confine: true,
         },
         grid: {
           top: '16%',

src/views/components/quality-safety/quality-warning.vue

@@ -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>`

src/views/components/rice-fish/area-rate.vue

@@ -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%']}
         ]
       },
     }

src/views/components/rice-fish/data-comparison.vue

 <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() {

src/views/components/rice-fish/mode-rate.vue

@@ -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,
         },

src/views/components/rice-fish/mode-rate2.vue

@@ -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%']}

src/views/components/rice-fish/nation.vue

@@ -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="稻小龙虾数据对比">

src/views/components/rice-fish/province.vue

@@ -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="稻小龙虾数据对比">

src/views/components/rice-fish/rice-fish-map.vue

@@ -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">

src/views/components/seedling/area-count.vue

 <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() {

src/views/components/seedling/consult-info.vue

@@ -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

src/views/components/seedling/operate-situation.vue

@@ -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

src/views/components/seedling/property-analysis.vue

 <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>

src/views/components/seedling/seedling-map.vue

@@ -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: [],

src/views/components/seedling/smart-control.vue

@@ -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

src/views/components/seedling/trend.vue

@@ -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() {

src/views/fishing-price.vue

@@ -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"
   >

src/views/seedling.vue

@@ -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>