调整

src/App.vue

 <template>
-  <div id="app">
+  <div id="app" :style="getBgImg">
     <m-loader v-show="$store.state.showLoading"/>
     <m-title hideDate hideTime :bgImg="require('@/assets/images/title-bg3.png')"/>
     <m-animate enter="zoomIn" leave="zoomOut">
@@ -11,20 +11,25 @@
 <script>
 export default {
   name: 'App',
-  // computed: {
-  //   style() {
-  //     return this.$route.path === '/quality-safety'
-  //       ? ({'background-size': '110%', 'background-position': '90% -50%'})
-  //       : ({'background-size': '100%', 'background-position': '50% 50%'})
-  //   }
-  // },
+  computed: {
+    getBgImg() {
+      const {path} = this.$route
+      return (path === '/quality-safety' || path === '/seedling')
+        ? ({
+          'background': `url(${require('./assets/images/bg.jpeg')})`,
+          'background-size': 'cover',
+          'background-position': 'center',
+        })
+        : ({})
+    }
+  },
 }
 </script>
 
 <style lang="stylus" scoped>
 #app
-  background url('./assets/images/bg.png') no-repeat
-  // transition background 1s
+  background url('./assets/images/bg.png')
+  background-repeat no-repeat
   background-size 110%
   background-position 90% -50%
   .router-view

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

@@ -24,13 +24,13 @@ export default {
     return {
       showChart: false,
       config: {
-        // colors: ['#0062f0', '#49a7db', '#72b3f7', '#c8dfff'],
+        colors: ['#0062f0', '#49a7db', '#72b3f7', '#c8dfff'].reverse(),
         legend: {
           hide: true,
         },
         tooltip: {
+          formatter: '{b}<br/>{c}亩 ({d}%)',
           confine: true,
-          formatter: '{c}亩'
         },
         shape: [
           {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/mode-rate.vue

@@ -4,12 +4,17 @@
       <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>
+      <p v-for="(item, i) in data2" :key="item.name"><span :style="`background:${config2.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>
+          <m-chart :config="{...config, colors: ['#41D9C7', 'gray']}" :data="data[0]"/>
+          <m-chart :config="{...config, colors: ['#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#5CA3E6', '#F04864', '#D598D9']}" :data="data[1]"/>
+          <span class="pointer"/>
+          <span class="pointer"/>
+        </div>
       </div>
       <div>
         <div>
@@ -32,7 +37,11 @@ const mock = [
   {
     key: '水稻',
     data1: [
+      [
         {name: '稻小龙虾', value: 232816.3},
+        {name: '剩余', value: 54575},
+      ],
+      [
         {name: '稻青虾', value: 520},
         {name: '稻蟹', value: 7590},
         {name: '稻鲤', value: 9073},
@@ -41,7 +50,7 @@ const mock = [
         {name: '稻蛙', value: 600},
         {name: '稻螺', value: 0},
         {name: '其他', value: 28672},
-      // {value: 287391.3}
+      ]
     ],
     data2: [
       {name: '稻小龙虾', value: 124596.413},
@@ -117,11 +126,11 @@ export default {
           hide: true,
         },
         tooltip: {
-          formatter: '{b}：{c}亩',
+          formatter: '{b}<br/>{c}亩 ({d}%)',
           confine: true,
         },
         shape: [
-          {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 50 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
+          {type: 'pie', startAngle: -30, radius: [35 * Number((screen.height / 800).toFixed(1)), 50 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
         ]
       },
       data: mock[0].data1,
@@ -130,6 +139,10 @@ export default {
         legend: {
           hide: true,
         },
+        tooltip: {
+          formatter: '{b}<br/>{c}吨 ({d}%)',
+          confine: true,
+        },
         shape: [
           {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
         ]
@@ -140,6 +153,10 @@ export default {
         legend: {
           hide: true,
         },
+        tooltip: {
+          formatter: '{b}<br/>{c}万元 ({d}%)',
+          confine: true,
+        },
         shape: [
           {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
         ]
@@ -187,6 +204,25 @@ export default {
     >div
       width 49%
       height calc(100% - 1rem)
+      &:first-child
+        >div
+          width 100%
+          height 100%
+          display flex
+          position relative
+          .pointer
+            position absolute
+            background gray
+            left 35%
+            width 10rem
+            height 0.1rem
+            transform rotate(-15deg)
+            top 26%
+            &:last-child
+              transform rotate(15deg)
+              top 70%
+          >div
+            flex 1
       &:last-child
         display flex
         border-left .1rem solid $color-map()

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

@@ -141,7 +141,7 @@ export default {
       type: [String, Function],
       default() {
         return ({data}) => {
-          if (data.region && data.company) {
+          if (data && data.region && data.company) {
             return `
               <div class="map-tooltip-info">
                 <h3>${data.name}</h3>
@@ -152,7 +152,7 @@ export default {
                 <p><span>水产品总产值/产量：</span>${this.$com.transNumber(data.val2)}万元/${this.$com.transNumber(data.product2)}吨</p>
               </div>
             `
-          } else if (data.val1 && data.product1){
+          } else if (data && data.val1 && data.product1){
             return `
               <div class="map-tooltip-info">
                 <h3>${data.name}</h3>

src/views/ocean-farm.vue

@@ -163,9 +163,10 @@ export default {
       curVideo: null,
       videoModal: false,
       mapConfig: {
-        zoom: 7,
-        zooms: [6, 15],
-        center: [121.973849, 28.142576], // 钓鱼岛附近
+        zoom: 6,
+        zooms: [5, 15],
+        center: [121.694959, 38.869911], // 大连附近
+        // center: [121.973849, 28.142576], // 钓鱼岛附近
         mapStyle: 'amap://styles/blue',
         features: ['bg', 'road', 'point'],
       },