稻鱼种养

src/components/MonitorComponents/MonitorChart/monitor-chart.vue

@@ -186,7 +186,7 @@ export default {
         }
         const result = {
           barWidth: '50%',
-          barGap: 0,
+          barGap: item.barGap || 0,
           smooth: true,
           symbol: 'circle',
           itemStyle: { color, ...shadow, ...borderRadius },

src/components/MonitorComponents/MonitorTitle/monitor-title.vue

@@ -54,7 +54,7 @@ export default {
       menus: [
         {name: '病害防控', title: '病害防控大数据', path: '/disease'},
         {name: '质量安全', title: '水产品质量安全大数据', path: '/quality-safety'},
-        {name: '稻鱼种养'},
+        {name: '稻鱼种养', title: '稻鱼综合种养分析', path: '/rice-fish'},
         {name: '海洋牧场'},
         {name: '水产价格', title: '水产品价格分析', path: '/fishing-price'},
         {name: '苗种'},
@@ -75,12 +75,6 @@ export default {
       }
     }
     this.style = {...this.style, 'font-size': this.size}
-    const {path} = this.$route
-    if (path === '/') {
-      this.curIndex = 0
-    } else {
-      this.curIndex = this.menus.findIndex(menu => path === menu.path)
-    }
   },
   beforeDestroy() {
     clearInterval(this.timer)
@@ -110,6 +104,16 @@ export default {
         this.$router.push({path: item.path})
       }
     },
+  },
+  watch: {
+    $route(cur) {
+      const {path} = cur
+      if (path === '/') {
+        this.curIndex = 0
+      } else {
+        this.curIndex = this.menus.findIndex(menu => path === menu.path)
+      }
+    }
   }
 }
 </script>

src/router/index.js

@@ -4,6 +4,7 @@ import Router from 'vue-router'
 const Disease = () => import('@/views/disease')
 const FishingPrice = () => import('@/views/fishing-price')
 const QualitySafety = () => import('@/views/quality-safety.vue')
+const RiceFish = () => import('@/views/rice-fish.vue')
 
 Vue.use(Router)
 
@@ -28,5 +29,10 @@ export default new Router({
       path: '/quality-safety',
       component: QualitySafety,
     },
+    {
+      name: 'rice-fish',
+      path: '/rice-fish',
+      component: RiceFish,
+    },
   ]
 })

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

+<template>
+  <div class="area-rate" v-if="showChart">
+    <m-chart class="chart" :config="config" :data="data"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AreaRate',
+  data() {
+    return {
+      showChart: false,
+      config: {
+        colors: ['#0062f0', '#49a7db', '#72b3f7', '#c8dfff'],
+        legend: {
+          hide: true,
+        },
+        shape: [
+          {type: 'pie', radius: [30, 60 * Number((screen.height / 800).toFixed(1))], startAngle: 30, label: {show: true, formatter: '{c}%\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() {
+    setTimeout(() => this.showChart = true)
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.area-rate
+  width 100%
+  height 100%
+  overflow hidden
+</style>

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

+<template>
+  <div class="data-comparison" v-if="showChart">
+    <m-chart :config="config" :data="data"/>
+    <p>面积（亩）</p>
+    <p>产量（吨）</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DataComparison',
+  data() {
+    return {
+      showChart: false,
+      config: {
+        colors: [['#18a6ee', '#6f63ed'], ['#feb570', '#fd6a6c']],
+        legend: {
+          hide: true,
+        },
+        shape: [
+          {key: 'area', type: 'bar', barWidth: '20%', barGap: '50%', yAxisIndex: 0, borderRadius: [10, 10, 10, 10]},
+          {key: 'product', type: 'bar', barWidth: '20%', barGap: '50%', yAxisIndex: 1, borderRadius: [10, 10, 10, 10]},
+        ],
+        xAxis: {
+          key: 'year',
+        },
+      },
+      data: [
+        {year: '2015', area: 200000, product: 300000},
+        {year: '2016', area: 300000, product: 450000},
+        {year: '2017', area: 400000, product: 500000},
+        {year: '2018', area: 500000, product: 650000},
+        {year: '2019', area: 600000, product: 750000},
+      ],
+    }
+  },
+  mounted() {
+    setTimeout(() => this.showChart = true)
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.data-comparison
+  width 100%
+  height 100%
+  p
+    position absolute
+    top 2rem
+    font-size .8rem
+    font-weight bold
+    color #0292d5
+    &:first-child
+      left 1rem
+    &:last-child
+      color #e24d68
+      right 1rem
+</style>

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

+<template>
+  <div class="mode-rate">
+    <Select class="custom-select" v-model="type" transfer>
+      <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
+    </Select>
+    <div class="legend">
+      <p v-for="(item, i) in data" :key="item.name"><span :style="`background:${config.colors[i]}`"/> {{item.name}}</p>
+    </div>
+    <div class="chart-wrapper" v-if="showChart">
+      <div>
+        <p class="title"><span/>面积</p>
+        <m-chart :config="config" :data="data"/>
+      </div>
+      <div>
+        <div>
+          <p class="title"><span/>水稻产量</p>
+          <m-chart style="z-index:99;" :config="config2" :data="data2"/>
+          <div class="border" />
+        </div>
+        <div>
+          <p class="title"><span/>水稻产值</p>
+          <m-chart style="z-index:99;" :config="config3" :data="data3"/>
+          <div class="border" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ModeRate',
+  data() {
+    return {
+      showChart: false,
+      type: '水稻',
+      options: ['水稻'],
+      config: {
+        colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
+        legend: {
+          hide: true,
+        },
+        shape: [
+          {type: 'pie', radius: [20 * Number((screen.height / 800).toFixed(1)), 70 * Number((screen.height / 800).toFixed(1))], roseType: 'radius', center: ['50%', '50%']}
+        ]
+      },
+      data: [
+        {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},
+      ],
+      config2: {
+        colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
+        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: '稻小龙虾', 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: {
+        colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
+        legend: {
+          hide: true,
+        },
+        shape: [
+          {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
+        ]
+      },
+      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() {
+    setTimeout(() => this.showChart = true)
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.mode-rate
+  width 100%
+  height 100%
+  overflow hidden
+  .legend
+    display flex
+    align-items center
+    justify-content space-around
+    width 80%
+    margin 0 auto .5rem
+    span
+      display inline-block
+      width .8rem
+      height @width
+      border-radius 50%
+      margin-right .4rem
+  .chart-wrapper
+    width inherit
+    height inherit
+    display flex
+    div
+      position relative
+    >div
+      width 49%
+      height calc(100% - 1rem)
+      &:last-child
+        display flex
+        border-left .1rem solid $color-map()
+        >div
+          flex 1
+          .border
+            width 9rem
+            height 9rem
+            border 0.2rem solid #00f2ff
+            position absolute
+            top 50%
+            left 50%
+            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
+    .title
+      position absolute
+      left 1rem
+      top -0.5rem
+      display flex
+      align-items center
+      font-weight bold
+      font-size 1.2rem
+      >span
+        display block
+        width .3rem
+        height 1.2rem
+        background $edgeColor
+        margin-right .6rem
+</style>

src/views/components/rice-fish/process-situation.vue

+<template>
+  <div class="process-situation" v-if="showChart">
+    <m-chart :config="config" :data="data"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProcessSituation',
+  data() {
+    return {
+      showChart: false,
+      config: {
+        colors: ['#7e78f8', '#40bdf9', '#21f4f9', '#4ffb8b', '#faef3a'],
+        legend: {
+          align: 'right',
+          orient: 'horizontal',
+        },
+        shape: [
+          {name: '整虾加工量', key: 'val1', type: 'line', areaStyle: {opacity: 0.8}},
+          {name: '虾仁加工量', key: 'val2', type: 'line', areaStyle: {opacity: 0.7}},
+          {name: '虾尾加工量', key: 'val3', type: 'line', areaStyle: {opacity: 0.6}},
+          {name: '精深加工量', key: 'val4', type: 'line', areaStyle: {opacity: 0.5}},
+          {name: '其他产品加工量', key: 'val5', type: 'line', areaStyle: {opacity: 0.4}},
+        ],
+        xAxis: {
+          key: 'month',
+        },
+        yAxis: {
+          name: '单位：吨'
+        }
+      },
+      data: [
+        {month: '1月', val1: 20000, val2: 12000, val3: 14000, val4: 26000, val5: 4000},
+        {month: '2月', val1: 22000, val2: 14000, val3: 18000, val4: 20000, val5: 6000},
+        {month: '3月', val1: 24000, val2: 16000, val3: 24000, val4: 24000, val5: 8000},
+        {month: '4月', val1: 26000, val2: 18000, val3: 24000, val4: 20000, val5: 10000},
+        {month: '5月', val1: 28000, val2: 20000, val3: 20000, val4: 22000, val5: 8000},
+        {month: '6月', val1: 20000, val2: 22000, val3: 22000, val4: 23000, val5: 4000},
+        {month: '7月', val1: 28000, val2: 22000, val3: 20000, val4: 24000, val5: 5000},
+        {month: '8月', val1: 26000, val2: 18000, val3: 18000, val4: 25000, val5: 6000},
+        {month: '9月', val1: 20000, val2: 20000, val3: 24000, val4: 26000, val5: 7000},
+        {month: '10月', val1: 28000, val2: 22000, val3: 28000, val4: 27000, val5: 8000},
+        {month: '11月', val1: 20000, val2: 20000, val3: 20000, val4: 28000, val5: 9000},
+        {month: '12月', val1: 23000, val2: 20000, val3: 24000, val4: 29000, val5: 10000},
+      ],
+    }
+  },
+  mounted() {
+    setTimeout(() => this.showChart = true)
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.process-situation
+  width 100%
+  height 100%
+</style>

src/views/fishing-price.vue

@@ -67,5 +67,4 @@ export default {
     margin-right 1rem
   .year-select
     width 15%
-
 </style>

src/views/rice-fish.vue

+<template>
+  <m-grid
+    :template="[
+      'map select select',
+      'map box1 box1',
+      'map box2 box3',
+      'map box4 box4',
+    ]"
+    columns="1fr 0.6fr 0.6fr"
+    rows="2rem 1fr 1fr 1fr"
+    gap="0.5rem"
+  >
+    <div class="year-select-wrapper" area="select">
+      <p>主显示</p>
+      <Select class="year-select" @on-change="$store.commit('SET_MAIN_YEAR', $event)" v-model="disease" transfer>
+        <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
+      </Select>
+    </div>
+    <RiceFishMap area="map" />
+    <m-card area="box1" title="养殖模式数据占比">
+      <ModeRate />
+    </m-card>
+    <m-card area="box2" title="各面积占比">
+      <AreaRate />
+    </m-card>
+    <m-card area="box3" title="稻小龙虾数据对比">
+      <DataComparison />
+    </m-card>
+    <m-card area="box4" title="稻虾加工情况统计">
+      <ProcessSituation />
+    </m-card>
+  </m-grid>
+</template>
+
+<script>
+import RiceFishMap from './components/rice-fish/rice-fish-map'
+import ModeRate from './components/rice-fish/mode-rate'
+import AreaRate from './components/rice-fish/area-rate'
+import DataComparison from './components/rice-fish/data-comparison'
+import ProcessSituation from './components/rice-fish/process-situation'
+export default {
+  name: 'RiceFish',
+  components: {
+    RiceFishMap,
+    ModeRate,
+    AreaRate,
+    DataComparison,
+    ProcessSituation,
+  },
+  data() {
+    return {
+      disease: '2019',
+      options: ['2019', '2018', '2017'],
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.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 15%
+</style>