接入数据

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

@@ -316,6 +316,9 @@ export default {
         },
         tooltip: {
           trigger: 'axis',
+          textStyle: {
+            fontSize: this.fontSize,
+          },
           axisPointer: {
             type: 'shadow'
           },

src/main.js

@@ -5,7 +5,7 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import store from './store'
-import {Row, Col, Select, Option, DatePicker, Icon, Slider, Circle} from 'view-design'
+import {Row, Col, Select, Option, DatePicker, Icon, Slider, Circle, Carousel, CarouselItem} from 'view-design'
 import ajax from '@/server/ajax'
 import api from '@/server/api'
 import common from '@/util/common'
@@ -31,6 +31,8 @@ Vue.component('DatePicker', DatePicker)
 Vue.component('Icon', Icon)
 Vue.component('Slider', Slider)
 Vue.component('i-circle', Circle)
+Vue.component('Carousel', Carousel)
+Vue.component('CarouselItem', CarouselItem)
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/util/common.js

@@ -36,6 +36,7 @@ export default {
    * @param {Number | String} num [需转换的数字或字符串]
    */
   transNumber(num) {
+    if (!num) return '0'
     const arr = num.toString().split('.')
     let [int] = arr, result = ''
     while (int.length > 3) {

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

@@ -176,7 +176,6 @@ export default {
         },
       ]
       this.option.yAxis = Object.assign(this.option.yAxis, {max: Math.max(...list)})
-      console.log(this.option)
       this.chart.setOption(this.option)
     },
   }

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

@@ -131,7 +131,6 @@ export default {
     //   // 监听地图点击事件
     //   this.map.on('click', (ev) => {
     //     const {name} = ev.data
-    //     console.log(name)
     //     this.setRegions(name)
     //     this.curProvince = name
     //     this.$emit('select', name)

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

@@ -270,7 +270,6 @@ export default {
       // 监听地图点击事件
       this.map.on('click', (ev) => {
         const {name} = ev.data
-        console.log(name)
         this.setRegions(name)
         this.curProvince = name
         this.$emit('select', name)

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

@@ -119,7 +119,6 @@ export default {
       // this.config.yAxis.max = Math.max(...totalNumbers) + 1
       this.config.yAxis.min = Math.min(...totalNumbers) - 1
       this.data = result
-      console.log(this.data, this.config.shape)
     },
   }
 }

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

@@ -26,11 +26,11 @@ export default {
         },
       },
       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},
+        {year: '2015', area: 2971.1, count: 7},
+        {year: '2016', area: 6791.2, count: 16},
+        {year: '2017', area: 10611.2, count: 25},
+        {year: '2018', area: 13157.9, count: 31},
+        {year: '2019', area: 17823.1, count: 42},
       ],
       xAxis: {
         axisLabel: {

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

@@ -2,12 +2,14 @@
   <div class="data-identify">
     <div>
       <p><span/>海洋种类</p>
-      <span class="tips">本月识别种类：鱿鱼、鲳鱼、鲷鱼、尤头鱼</span>
+      <span class="tips" title="海鲈、鲆、石斑鱼、河鲀、龙虾、斑节对虾、梭子蟹、黄姑鱼、军曹鱼、大黄鱼、中国对虾、鲍、牡蛎、扇贝">
+        本月识别种类：海鲈、鲆、石斑鱼、河鲀、龙虾、斑节对虾、梭子蟹、黄姑鱼、军曹鱼、大黄鱼、中国对虾、鲍、牡蛎、扇贝
+      </span>
       <div class="chart" ref="chart" />
     </div>
     <div>
       <p><span/>种群数量</p>
-      <span class="tips">本月识别数量：15,238尾</span>
+      <span class="tips">本月识别数量：2,314,589尾</span>
       <div class="chart" ref="chart2" />
     </div>
   </div>
@@ -15,25 +17,49 @@
 
 <script>
 const mock = [
-  {year: '2020.01', value: 35},
-  {year: '2020.02', value: 29},
-  {year: '2020.03', value: 33},
-  {year: '2020.04', value: 20},
-  {year: '2020.05', value: 36},
-  {year: '2020.06', value: 25},
-  {year: '2020.07', value: 30},
-  {year: '2020.08', value: 28},
-]
+  {year: '2020.08', value: 14},
+  {year: '2020.07', value: 15},
+  {year: '2020.06', value: 13},
+  {year: '2020.05', value: 14},
+  {year: '2020.04', value: 13},
+  {year: '2020.03', value: 14},
+  {year: '2020.02', value: 13},
+  {year: '2020.01', value: 12},
+  {year: '2019.12', value: 12},
+  {year: '2019.11', value: 13},
+  {year: '2019.10', value: 11},
+  {year: '2019.09', value: 12},
+  {year: '2019.08', value: 11},
+  {year: '2019.07', value: 12},
+  {year: '2019.06', value: 10},
+  {year: '2019.05', value: 10},
+  {year: '2019.04', value: 11},
+  {year: '2019.03', value: 9},
+  {year: '2019.02', value: 9},
+  {year: '2019.01', value: 8},
+].reverse()
 const mock2 = [
-  {year: '2020.01', value: 35000},
-  {year: '2020.02', value: 29000},
-  {year: '2020.03', value: 33000},
-  {year: '2020.04', value: 20000},
-  {year: '2020.05', value: 36000},
-  {year: '2020.06', value: 25000},
-  {year: '2020.07', value: 30000},
-  {year: '2020.08', value: 28000},
-]
+  {year: '2020.08', value: 2314589},
+  {year: '2020.07', value: 2389457},
+  {year: '2020.06', value: 2068954},
+  {year: '2020.05', value: 1985625},
+  {year: '2020.04', value: 1921458},
+  {year: '2020.03', value: 1856324},
+  {year: '2020.02', value: 1952612},
+  {year: '2020.01', value: 1869853},
+  {year: '2019.12', value: 1789563},
+  {year: '2019.11', value: 1794123},
+  {year: '2019.10', value: 1654782},
+  {year: '2019.09', value: 1623014},
+  {year: '2019.08', value: 1556324},
+  {year: '2019.07', value: 1423658},
+  {year: '2019.06', value: 1102365},
+  {year: '2019.05', value: 1232453},
+  {year: '2019.04', value: 1102547},
+  {year: '2019.03', value: 1090856},
+  {year: '2019.02', value: 1003565},
+  {year: '2019.01', value: 985624},
+].reverse()
 import echarts from 'echarts'
 export default {
   name: 'DataIdentify',
@@ -111,7 +137,7 @@ export default {
           }, type: 'bar', barWidth: '20%', data: mock.map(item => item.value)},
         ],
         dataZoom: [{
-          start: 0,
+          start: 50,
           end: 100,
           backgroundColor: '#105179',
           fillerColor: '#46b9ef',
@@ -196,7 +222,7 @@ export default {
           }, type: 'bar', barWidth: '20%', data: mock2.map(item => item.value)},
         ],
         dataZoom: [{
-          start: 0,
+          start: 50,
           end: 100,
           backgroundColor: '#105179',
           fillerColor: '#46b9ef',
@@ -250,6 +276,9 @@ export default {
       display block
       text-align center
       color $edgeColor
+      overflow hidden
+      text-overflow ellipsis
+      white-space nowrap
     p
       display flex
       font-size 1.2rem

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

 <template>
   <div class="farm-build">
     <div class="sum">
-      <div v-for="item in sum" :key="item.name">
+      <div v-for="(item, i) in sumTitle" :key="item.name">
         <p>{{item.name}}</p>
-        <m-count class="count" :value="item.value" :decimal="0"/>
+        <m-count class="count" :value="sum[i]" :decimal="i === 0 ? 0 : 2"/>
       </div>
     </div>
     <div class="list">
@@ -16,7 +16,7 @@
         <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"/>
+              <m-count :value="row[col.key]" :decimal="col.decimal || 0"/>
             </div>
             <div v-else :style="`text-align: ${col.align || 'left'};color: ${col.color};width:100%;`">{{row[col.key]}}</div>
           </i-col>
@@ -29,56 +29,55 @@
 <script>
 export default {
   name: 'FarmBuild',
+  props: {
+    model: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    sum: {
+      type: Array,
+      default() {
+        return [0, 0, 0]
+      }
+    }
+  },
   data() {
     return {
-      sum: [
-        {name: '总数量(个)', value: 5847884},
-        {name: '总面积(公顷)', value: 879944},
-        {name: '总投资额(万元)', value: 9875645},
+      sumTitle: [
+        {name: '总数量(个)', value: 0},
+        {name: '总面积(公顷)', value: 0},
+        {name: '总投资额(万元)', value: 0},
       ],
       layout: [
         {
           title: '省份',
           key: 'province',
-          width: 4,
+          width: 5,
           align: 'center',
         },
         {
           title: '数量(个)',
           key: 'number',
-          width: 6,
+          width: 5,
           align: 'center',
         },
         {
           title: '面积(公顷)',
           key: 'area',
-          width: 6,
+          width: 7,
           align: 'center',
+          decimal: 2,
         },
         {
-          title: '投资总额(万元)',
+          title: '投资额(万元)',
           key: 'invest',
-          width: 8,
+          width: 7,
           align: 'center',
+          decimal: 2,
         },
       ],
-      model: [
-        {province: '福建', number: 6558745, area: 5487, invest: 59895464},
-        {province: '山东', number: 6558745, area: 5487, invest: 59895464},
-        {province: '上海', number: 6558745, area: 5487, invest: 59895464},
-        {province: '浙江', number: 6558745, area: 5487, invest: 59895464},
-        {province: '江苏', number: 6558745, area: 5487, invest: 59895464},
-        {province: '福建', number: 6558745, area: 5487, invest: 59895464},
-        {province: '山东', number: 6558745, area: 5487, invest: 59895464},
-        {province: '上海', number: 6558745, area: 5487, invest: 59895464},
-        {province: '浙江', number: 6558745, area: 5487, invest: 59895464},
-        {province: '江苏', number: 6558745, area: 5487, invest: 59895464},
-        {province: '福建', number: 6558745, area: 5487, invest: 59895464},
-        {province: '山东', number: 6558745, area: 5487, invest: 59895464},
-        {province: '上海', number: 6558745, area: 5487, invest: 59895464},
-        {province: '浙江', number: 6558745, area: 5487, invest: 59895464},
-        {province: '江苏', number: 6558745, area: 5487, invest: 59895464},
-      ],
     }
   },
 }

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

@@ -26,9 +26,9 @@ export default {
         ],
       },
       data: [
-        {name: '养护型', value: 62485},
-        {name: '增殖型', value: 29000},
-        {name: '休闲型', value: 31244},
+        {name: '养护型', value: 9457.593},
+        {name: '增殖型', value: 7248.358},
+        {name: '休闲型', value: 1117.159},
       ]
     }
   },

src/views/components/quality-safety/company-rate.vue

@@ -12,6 +12,10 @@ export default {
       showChart: false,
       config: {
         colors: ['#0f4aff', '#ff9e45', '#edfe63', '#8f45ee', '#05f8e8'],
+        tooltip: {
+          formatter: '{b}：{c}家 ({d}%)',
+          confine: true,
+        },
         legend: {
           align: 'right',
           orient: 'vertical',
@@ -21,11 +25,11 @@ export default {
         ]
       },
       data: [
-        {name: '江苏', value: 900},
-        {name: '湖北', value: 847},
-        {name: '江西', value: 400},
-        {name: '海南', value: 300},
-        {name: '河南', value: 200},
+        {name: '江苏', value: 1241},
+        {name: '湖北', value: 807},
+        {name: '江西', value: 450},
+        {name: '海南', value: 14},
+        {name: '河南', value: 178},
       ],
     }
   },

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

@@ -6,16 +6,25 @@
 
 <script>
 const mock = [
-  {name: '2019.10', value: 102},
-  {name: '2019.11', value: 280},
-  {name: '2019.12', value: 266},
-  {name: '2020.01', value: 256},
-  {name: '2020.02', value: 231},
-  {name: '2020.03', value: 337},
-  {name: '2020.04', value: 292},
-  {name: '2020.05', value: 266},
-  {name: '2020.06', value: 240},
-  {name: '2020.07', value: 142},
+  {name: '2019.01', value: 320},
+  {name: '2019.02', value: 335},
+  {name: '2019.03', value: 376},
+  {name: '2019.04', value: 389},
+  {name: '2019.05', value: 350},
+  {name: '2019.06', value: 323},
+  {name: '2019.07', value: 356},
+  {name: '2019.08', value: 374},
+  {name: '2019.09', value: 330},
+  {name: '2019.10', value: 341},
+  {name: '2019.11', value: 310},
+  {name: '2019.12', value: 405},
+  {name: '2020.01', value: 376},
+  {name: '2020.02', value: 364},
+  {name: '2020.03', value: 387},
+  {name: '2020.04', value: 369},
+  {name: '2020.05', value: 402},
+  {name: '2020.06', value: 388},
+  {name: '2020.07', value: 376},
 ]
 import echarts from 'echarts'
 export default {
@@ -30,9 +39,9 @@ export default {
         },
         grid: {
           top: '16%',
-          left: '5%',
-          right: '5%',
-          bottom: '10%',
+          left: '2%',
+          right: '4%',
+          bottom: '15%',
           width: 'auto',
           height: 'auto',
           containLabel: true,
@@ -80,12 +89,12 @@ export default {
         },
         series: [],
         dataZoom: [{
-          start: 0,
+          start: 60,
           end: 100,
           backgroundColor: '#105179',
           fillerColor: '#46b9ef',
           borderColor: 'transparent',
-          bottom: '2%',
+          bottom: '5%',
           height: 10,
           borderRadius: 10,
           handleSize: '200%',

src/views/components/quality-safety/medicine-flow.vue

 <template>
   <div class="medicine-flow" v-if="showChart">
     <m-chart :data="data" :config="config" :options="{legend: {top: '10%'}}"/>
-    <Select v-model="type" class="custom-select" size="small" transfer>
+    <Select v-model="type" @on-change="setChartData" class="custom-select" size="small" transfer>
       <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
     </Select>
   </div>
 </template>
 
 <script>
+const mock = [
+  {name: '江苏省', type: '杀虫药', value: 20.4},
+  {name: '江苏省', type: '消毒药', value: 17.5},
+  {name: '江苏省', type: '抗菌类药', value: 12.3},
+  {name: '江苏省', type: '环境改良剂', value: 18.8},
+  {name: '四川省', type: '杀虫药', value: 7.3},
+  {name: '四川省', type: '消毒药', value: 9.5},
+  {name: '四川省', type: '抗菌类药', value: 7.3},
+  {name: '四川省', type: '环境改良剂', value: 5.1},
+  {name: '贵州省', type: '杀虫药', value: 7.6},
+  {name: '贵州省', type: '消毒药', value: 6.5},
+  {name: '贵州省', type: '抗菌类药', value: 7.2},
+  {name: '贵州省', type: '环境改良剂', value: 7.3},
+  {name: '山东省', type: '杀虫药', value: 15.4},
+  {name: '山东省', type: '消毒药', value: 15.6},
+  {name: '山东省', type: '抗菌类药', value: 14.2},
+  {name: '山东省', type: '环境改良剂', value: 17.2},
+  {name: '安徽省', type: '杀虫药', value: 14.5},
+  {name: '安徽省', type: '消毒药', value: 13.3},
+  {name: '安徽省', type: '抗菌类药', value: 21},
+  {name: '安徽省', type: '环境改良剂', value: 15.5},
+  {name: '浙江省', type: '杀虫药', value: 17.5},
+  {name: '浙江省', type: '消毒药', value: 13.6},
+  {name: '浙江省', type: '抗菌类药', value: 14.5},
+  {name: '浙江省', type: '环境改良剂', value: 16.5},
+  {name: '陕西省', type: '杀虫药', value: 6.3},
+  {name: '陕西省', type: '消毒药', value: 14},
+  {name: '陕西省', type: '抗菌类药', value: 9.6},
+  {name: '陕西省', type: '环境改良剂', value: 4.3},
+  {name: '辽宁省', type: '杀虫药', value: 11},
+  {name: '辽宁省', type: '消毒药', value: 10},
+  {name: '辽宁省', type: '抗菌类药', value: 13.9},
+  {name: '辽宁省', type: '环境改良剂', value: 15.3},
+]
 export default {
   name: 'MedicineFlow',
   data() {
     return {
       showChart: false,
       type: '杀虫药',
-      options: ['杀虫药'],
+      options: ['杀虫药', '消毒药', '抗菌类药', '环境改良剂'],
       config: {
+        tooltip: {
+          formatter: '{b}：{c}%'
+        },
         colors: ['#8c7eee', '#57e8ed', '#feb301', '#f49a8f', '#fda4bd', '#f3729b', '#f87be2', '#e95dc1'],
         legend: {
           align: 'right',
@@ -25,20 +62,17 @@ export default {
           {type: 'pie', radius: [40 * Number((screen.height / 800).toFixed(1)), 70 * Number((screen.height / 800).toFixed(1))], center: ['30%', '50%']}
         ]
       },
-      data: [
-        {name: '江苏省', value: 24.2},
-        {name: '四川省', value: 24},
-        {name: '贵州省', value: 14},
-        {name: '山东省', value: 14},
-        {name: '安徽省', value: 14},
-        {name: '浙江省', value: 10},
-        {name: '陕西省', value: 10},
-        {name: '辽宁省', value: 10},
-      ],
+      data: [],
     }
   },
   mounted() {
     setTimeout(() => this.showChart = true, 0)
+    this.$nextTick(() => this.setChartData(this.type))
+  },
+  methods: {
+    setChartData(type) {
+      this.data = mock.filter(item => item.type === type)
+    }
   }
 }
 </script>

src/views/components/quality-safety/medicine-frequency.vue

 <template>
   <div class="medicine-frequency">
-    <Select v-model="type" class="custom-select" size="small" transfer>
+    <Select v-model="type" @on-change="setData" class="custom-select" size="small" transfer>
       <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
     </Select>
-    <p class="custom-select" style="color:#d04e4b;left:0.5rem;">安全值：15次</p>
+    <p class="custom-select" style="width:7rem;top:1.2rem;color:#d04e4b;left:1rem;">安全值:15次</p>
     <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>
@@ -21,19 +21,45 @@
 
 <script>
 const mock = [
-  {name: '张恒', date: '2020年7月购买杀虫药', count: 10},
-  {name: '张恒', date: '2020年7月购买杀虫药', count: 13},
-  {name: '张恒', date: '2020年7月购买杀虫药', count: 10},
-  {name: '张恒', date: '2020年7月购买杀虫药', count: 18},
-  {name: '张恒', date: '2020年7月购买杀虫药', count: 20},
-  {name: '张恒', date: '2020年7月购买杀虫药', count: 11},
+  {name: '张恒', date: '2020年7月购买杀虫药', count: 3},
+  {name: '张恒', date: '2020年6月购买消毒药', count: 2},
+  {name: '张恒', date: '2020年6月购买抗菌类药', count: 3},
+  {name: '张恒', date: '2020年7月购买环境改良剂', count: 4},
+  {name: '李阿三', date: '2020年7月购买杀虫药', count: 4},
+  {name: '李阿三', date: '2020年6月购买消毒药', count: 0},
+  {name: '李阿三', date: '2020年5月购买抗菌类药', count: 6},
+  {name: '李阿三', date: '2020年7月购买环境改良剂', count: 11},
+  {name: '王海生', date: '2020年7月购买杀虫药', count: 5},
+  {name: '王海生', date: '2020年7月购买消毒药', count: 1},
+  {name: '王海生', date: '2020年6月购买抗菌类药', count: 4},
+  {name: '王海生', date: '2020年7月购买环境改良剂', count: 4},
+  {name: '马伟明', date: '2020年6月购买杀虫药', count: 0},
+  {name: '马伟明', date: '2020年7月购买消毒药', count: 4},
+  {name: '马伟明', date: '2020年5月购买抗菌类药', count: 15},
+  {name: '马伟明', date: '2020年6月购买环境改良剂', count: 9},
+  {name: '张冬生', date: '2020年7月购买杀虫药', count: 2},
+  {name: '张冬生', date: '2020年5月购买消毒药', count: 3},
+  {name: '张冬生', date: '2020年7月购买抗菌类药', count: 8},
+  {name: '张冬生', date: '2020年7月购买环境改良剂', count: 2},
+  {name: '许文明', date: '2020年7月购买杀虫药', count: 4},
+  {name: '许文明', date: '2020年6月购买消毒药', count: 0},
+  {name: '许文明', date: '2020年7月购买抗菌类药', count: 4},
+  {name: '许文明', date: '2020年7月购买环境改良剂', count: 7},
+  {name: '朱年新', date: '2020年7月购买杀虫药', count: 16},
+  {name: '朱年新', date: '2020年6月购买消毒药', count: 2},
+  {name: '朱年新', date: '2020年7月购买抗菌类药', count: 5},
+  {name: '朱年新', date: '2020年7月购买环境改良剂', count: 10},
+  {name: '孙小光', date: '2020年7月购买杀虫药', count: 2},
+  {name: '孙小光', date: '2020年5月购买消毒药', count: 6},
+  {name: '孙小光', date: '2020年7月购买抗菌类药', count: 8},
+  {name: '孙小光', date: '2020年7月购买环境改良剂', count: 3},
 ]
 export default {
   name: 'MedicineFrequency',
   data() {
     return {
       type: '杀虫药',
-      options: ['杀虫药'],
+      options: ['杀虫药', '消毒药', '抗菌类药', '环境改良剂'],
       layout: [
         {
           title: '姓名',
@@ -54,9 +80,17 @@ export default {
           align: 'center',
         },
       ],
-      model: mock,
+      model: [],
     }
   },
+  mounted() {
+    this.$nextTick(() => this.setData(this.type))
+  },
+  methods: {
+    setData(type) {
+      this.model = mock.filter(item => item.date.indexOf(type) >= 0)
+    }
+  }
 }
 </script>
 

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

@@ -2,7 +2,7 @@
   <div class="online">
     <m-scroll :length="list.length" :limit="6">
       <div class="item" v-for="(item, i) in list" :key="i">
-        <p>{{i+1}}. {{item.question}}</p>
+        <p :title="item.question">{{i+1}}. {{item.question}}</p>
         <span :style="`color:${getColor(item.status)}`">{{item.date}} {{item.status ? '已处理' : '未处理'}}</span>
       </div>
     </m-scroll>
@@ -15,13 +15,18 @@ export default {
   data() {
     return {
       list: [
-        {date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 0},
-        {date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 0},
-        {date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 0},
-        {date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 0},
-        {date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 0},
-        {date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 1},
-        {date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 1},
+        {question: '病鱼上下颌，眼眶，鳍条基部，腹部充血发红，严重时眼球外突，两侧鳞片脱落，腹腔有淡红色液体。', date: '2020-8-21', status: 1},
+        {question: '病鱼体色发黑，身体消瘦，食欲减退，严重时有大量鱼体聚集池边，鳃丝肿胀，呼吸困难而死。', date: '2020-8-20', status: 1},
+        {question: '病鱼体色发黑，独游于池边，鳃丝腐烂带污泥，鳃丝末端有许多粘液。鳃盖骨内表中央部分被腐蚀成一个不规则的透明圆形窗。', date: '2020-8-20', status: 1},
+        {question: '鳃丝末端发白腐烂， 常粘有污泥．软骨外露，一些病鱼鳍条腐烂，严重患者鳃盖骨内、外表皮充血发炎', date: '2020-8-19', status: 1},
+        {question: '送检蟹活力较强，血液凝固较好，肠内有食，肝胰腺正常。镜检：鳃内未发现寄生虫，鳃丝清晰，肠内细菌', date: '2020-8-11', status: 1},
+        {question: '送检蟹活力好，体表清晰，肝胰腺颜色正常，肠内有食。镜检：鳃内未发现寄生虫，肠内细菌正常。', date: '2020-8-11', status: 1},
+        {question: '如何治疗河蟹水瘪子病？如何进行预防？', date: '2020-8-2', status: 1},
+        {question: '高温期间，如何做好鳜鱼病的防治工作', date: '2020-8-1', status: 1},
+        {question: '送检蟹活力较差，底板发黄，指尖发红，肝脏发肉色和白色。镜检：鳃内未发现寄生虫，污物较多，肠内细', date: '2020-7-30', status: 1},
+        {question: '镜检腮丝有纤毛虫，肠道与肛门红肿充血', date: '2020-7-30', status: 1},
+        {question: '鱼体表有疥疮，鱼鳍有部分腐烂，腮丝红肿充血，', date: '2020-7-30', status: 1},
+        {question: '鱼大批死亡', date: '2020-7-30', status: 1},
       ],
     }
   },

src/views/components/quality-safety/qualified-rate.vue

@@ -20,9 +20,9 @@ export default {
   data() {
     return {
       list: [
-        {name: '孔雀石绿', value: 80, color: '#4ec6fd'},
-        {name: '硝基呋喃', value: 72, color: '#40fdfc'},
-        {name: '氯霉素', value: 20, color: '#fdd80a'},
+        {name: '孔雀石绿', value: 99, color: '#4ec6fd'},
+        {name: '硝基呋喃', value: 97, color: '#40fdfc'},
+        {name: '氯霉素', value: 98, color: '#fdd80a'},
       ]
     }
   },

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

@@ -3,11 +3,11 @@
   <BorderBox class="sum">
     <div>
       <p>查询量</p>
-      <h2><m-count class="count" :value="5441" :decimal="0"/>万</h2>
+      <h2><m-count class="count" :value="103425935" :decimal="0"/>次</h2>
     </div>
     <div>
       <p>追溯码打印量</p>
-      <h2><m-count class="count" :value="365" :decimal="0"/>万</h2>
+      <h2><m-count class="count" :value="230065651" :decimal="0"/>张</h2>
     </div>
   </BorderBox>
   <div class="map" ref="map"/>
@@ -18,38 +18,37 @@
 import china from 'echarts/map/json/china.json'
 import BorderBox from '../border-box'
 const provinceData = [
-  { name: '北京', value: 177 },
-  { name: '天津', value: 42 },
-  { name: '河北', value: 102 },
-  { name: '山西', value: 81 },
-  { name: '内蒙古', value: 17 },
-  { name: '辽宁', value: 67 },
-  { name: '吉林', value: 182 },
-  { name: '黑龙江', value: 100 },
-  { name: '上海', value: 24 },
-  { name: '江苏', value: 299 },
-  { name: '浙江', value: 114 },
-  { name: '安徽', value: 29 },
-  { name: '福建', value: 316 },
-  { name: '江西', value: 91 },
-  { name: '山东', value: 19 },
-  { name: '河南', value: 137 },
-  { name: '湖北', value: 26 },
-  { name: '湖南', value: 114 },
-  { name: '重庆', value: 91 },
-  { name: '四川', value: 25 },
-  { name: '贵州', value: 62 },
-  { name: '云南', value: 83 },
-  { name: '西藏', value: 9 },
-  { name: '陕西', value: 80 },
-  { name: '甘肃', value: 256 },
-  { name: '青海', value: 10 },
-  { name: '宁夏', value: 18 },
-  { name: '新疆', value: 67 },
-  { name: '广东', value: 123 },
-  { name: '广西', value: 59 },
-  { name: '海南', value: 14 }
-
+  { name: '北京', value: 69 },
+  { name: '天津', value: 47 },
+  { name: '河北', value: 206 },
+  { name: '山西', value: 4 },
+  { name: '内蒙古', value: 84 },
+  { name: '辽宁', value: 170 },
+  { name: '吉林', value: 128 },
+  { name: '黑龙江', value: 220 },
+  { name: '上海', value: 80 },
+  { name: '江苏', value: 448 },
+  { name: '浙江', value: 405 },
+  { name: '安徽', value: 271 },
+  { name: '福建', value: 182 },
+  { name: '江西', value: 93 },
+  { name: '山东', value: 491 },
+  { name: '河南', value: 171 },
+  { name: '湖北', value: 154 },
+  { name: '湖南', value: 172 },
+  { name: '广东', value: 340 },
+  { name: '广西', value: 302 },
+  { name: '海南', value: 51 },
+  { name: '重庆', value: 82 },
+  { name: '四川', value: 116 },
+  { name: '贵州', value: 100 },
+  { name: '云南', value: 37 },
+  { name: '陕西', value: 120 },
+  { name: '甘肃', value: 80 },
+  { name: '青海', value: 29 },
+  { name: '宁夏', value: 48 },
+  { name: '新疆', value: 125 },
+  { name: '西藏', value: 0 },
 ]
 export default {
   name: 'QualityMap',
@@ -85,7 +84,10 @@ export default {
     visualConfig: {
       type: Object,
       default() {
-        return {}
+        return {
+          min: 0,
+          max: 500,
+        }
       }
     },
   },
@@ -97,16 +99,9 @@ export default {
       config: {
         geo: {
           map: 'china',
-          left: '1%',
-          right: '1%',
-          // top: 'auto',
-          // bottom: '10%',
+          layoutCenter: ['50%', '40%'],
+          layoutSize: '100%',
           zoom: 1, //当前视角的缩放比例
-          // roam: true, //是否开启平游或缩放
-          // scaleLimit: { //滚轮缩放的极限控制
-          //   min: 0.8,
-          //   max: 2,
-          // },
           label: {
             normal: {
               show: true,
@@ -175,7 +170,6 @@ export default {
     //   // 监听地图点击事件
     //   this.map.on('click', (ev) => {
     //     const {name} = ev.data
-    //     console.log(name)
     //     this.setRegions(name)
     //     this.curProvince = name
     //     this.$emit('select', name)
@@ -219,18 +213,17 @@ export default {
 
 <style lang="stylus" scoped>
 .map-wrapper
+  width 46%
+  height 70%
+  position absolute
+  left 27.27%
+  >.map
     width 100%
     height 100%
-  position relative
-  >.map
-    position absolute
-    width 45%
-    height 300%
     z-index 99
-    top 5%
   >.sum
     display flex
-    width 40%
+    width 60%
     margin 1rem auto 0
     justify-content space-between
     >div

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

@@ -11,7 +11,7 @@
 <script>
 import china from 'echarts/map/json/china.json'
 export default {
-  name: 'DiseaseWarning',
+  name: 'qualityWarning',
   data() {
     return {
       mapName: 'china',
@@ -45,7 +45,7 @@ export default {
         },
         visualMap: {
           min: 0,
-          max: 200,
+          max: 40,
           itemWidth: 10,
           left: 'auto',
           right: 0,
@@ -61,17 +61,11 @@ export default {
         series: [],
       },
       options: [
-        '草鱼',
-        '黄颡鱼',
-        '克氏原螯虾',
-        '鲤',
-        '鲢',
+        '小龙虾',
+        '加州鲈',
         '南美白对虾',
-        '青鱼',
-        '乌鳢',
-        '鳙',
       ],
-      type: '草鱼',
+      type: '小龙虾',
     }
   },
   mounted() {
@@ -79,129 +73,98 @@ export default {
     setTimeout(this.init, 0)
   },
   computed: {
-    diseaseWarning() {
+    qualityWarning() {
       return [
-        {'type': '草鱼', 'province': '北京市', 'value': 10},
-        {'type': '草鱼', 'province': '天津市', 'value': 70},
-        {'type': '草鱼', 'province': '河北省', 'value': 16},
-        {'type': '草鱼', 'province': '辽宁省', 'value': 30},
-        {'type': '草鱼', 'province': '吉林省', 'value': 9},
-        {'type': '草鱼', 'province': '黑龙江省', 'value': 10},
-        {'type': '草鱼', 'province': '上海市', 'value': 19},
-        {'type': '草鱼', 'province': '江苏省', 'value': 318},
-        {'type': '草鱼', 'province': '浙江省', 'value': 33},
-        {'type': '草鱼', 'province': '安徽省', 'value': 140},
-        {'type': '草鱼', 'province': '福建省', 'value': 242},
-        {'type': '草鱼', 'province': '江西省', 'value': 212},
-        {'type': '草鱼', 'province': '山东省', 'value': 84},
-        {'type': '草鱼', 'province': '河南省', 'value': 141},
-        {'type': '草鱼', 'province': '湖北省', 'value': 165},
-        {'type': '草鱼', 'province': '湖南省', 'value': 240},
-        {'type': '草鱼', 'province': '广东省', 'value': 294},
-        {'type': '草鱼', 'province': '广西', 'value': 280},
-        {'type': '草鱼', 'province': '重庆市', 'value': 59},
-        {'type': '草鱼', 'province': '四川省', 'value': 125},
-        {'type': '草鱼', 'province': '贵州省', 'value': 7},
-        {'type': '草鱼', 'province': '云南省', 'value': 17},
-        {'type': '草鱼', 'province': '陕西省', 'value': 72},
-        {'type': '草鱼', 'province': '甘肃省', 'value': 7},
-        {'type': '草鱼', 'province': '宁夏', 'value': 72},
-        {'type': '草鱼', 'province': '新疆', 'value': 4},
-        {'type': '黄颡鱼', 'province': '河北省', 'value': 1},
-        {'type': '黄颡鱼', 'province': '江苏省', 'value': 3},
-        {'type': '黄颡鱼', 'province': '浙江省', 'value': 11},
-        {'type': '黄颡鱼', 'province': '安徽省', 'value': 2},
-        {'type': '黄颡鱼', 'province': '江西省', 'value': 8},
-        {'type': '黄颡鱼', 'province': '湖北省', 'value': 11},
-        {'type': '黄颡鱼', 'province': '湖南省', 'value': 4},
-        {'type': '黄颡鱼', 'province': '广东省', 'value': 48},
-        {'type': '黄颡鱼', 'province': '广西', 'value': 33},
-        {'type': '黄颡鱼', 'province': '重庆市', 'value': 2},
-        {'type': '黄颡鱼', 'province': '四川省', 'value': 16},
-        {'type': '克氏原螯虾', 'province': '江苏省', 'value': 41},
-        {'type': '克氏原螯虾', 'province': '安徽省', 'value': 18},
-        {'type': '克氏原螯虾', 'province': '湖北省', 'value': 15},
-        {'type': '克氏原螯虾', 'province': '四川省', 'value': 1},
-        {'type': '克氏原螯虾', 'province': '贵州省', 'value': 3},
-        {'type': '鲤', 'province': '北京市', 'value': 12},
-        {'type': '鲤', 'province': '天津市', 'value': 72},
-        {'type': '鲤', 'province': '河北省', 'value': 15},
-        {'type': '鲤', 'province': '内蒙古', 'value': 13},
-        {'type': '鲤', 'province': '辽宁省', 'value': 38},
-        {'type': '鲤', 'province': '吉林省', 'value': 26},
-        {'type': '鲤', 'province': '黑龙江省', 'value': 60},
-        {'type': '鲤', 'province': '江苏省', 'value': 38},
-        {'type': '鲤', 'province': '浙江省', 'value': 28},
-        {'type': '鲤', 'province': '安徽省', 'value': 3},
-        {'type': '鲤', 'province': '山东省', 'value': 39},
-        {'type': '鲤', 'province': '河南省', 'value': 193},
-        {'type': '鲤', 'province': '湖南省', 'value': 8},
-        {'type': '鲤', 'province': '广东省', 'value': 9},
-        {'type': '鲤', 'province': '广西', 'value': 56},
-        {'type': '鲤', 'province': '重庆市', 'value': 2},
-        {'type': '鲤', 'province': '四川省', 'value': 44},
-        {'type': '鲤', 'province': '贵州省', 'value': 6},
-        {'type': '鲤', 'province': '云南省', 'value': 5},
-        {'type': '鲤', 'province': '陕西省', 'value': 47},
-        {'type': '鲤', 'province': '甘肃省', 'value': 7},
-        {'type': '鲤', 'province': '宁夏', 'value': 49},
-        {'type': '鲤', 'province': '新疆', 'value': 1},
-        {'type': '鲢', 'province': '天津市', 'value': 51},
-        {'type': '鲢', 'province': '河北省', 'value': 2},
-        {'type': '鲢', 'province': '辽宁省', 'value': 1},
-        {'type': '鲢', 'province': '吉林省', 'value': 22},
-        {'type': '鲢', 'province': '黑龙江省', 'value': 20},
-        {'type': '鲢', 'province': '上海市', 'value': 8},
-        {'type': '鲢', 'province': '江苏省', 'value': 128},
-        {'type': '鲢', 'province': '安徽省', 'value': 94},
-        {'type': '鲢', 'province': '江西省', 'value': 13},
-        {'type': '鲢', 'province': '山东省', 'value': 7},
-        {'type': '鲢', 'province': '河南省', 'value': 54},
-        {'type': '鲢', 'province': '湖北省', 'value': 89},
-        {'type': '鲢', 'province': '湖南省', 'value': 90},
-        {'type': '鲢', 'province': '广东省', 'value': 21},
-        {'type': '鲢', 'province': '广西', 'value': 28},
-        {'type': '鲢', 'province': '重庆市', 'value': 23},
-        {'type': '鲢', 'province': '四川省', 'value': 23},
-        {'type': '鲢', 'province': '贵州省', 'value': 1},
-        {'type': '鲢', 'province': '云南省', 'value': 4},
-        {'type': '鲢', 'province': '陕西省', 'value': 7},
-        {'type': '鲢', 'province': '甘肃省', 'value': 1},
-        {'type': '鲢', 'province': '宁夏', 'value': 15},
-        {'type': '南美白对虾', 'province': '广东省', 'value': 5},
-        {'type': '南美白对虾', 'province': '海南省', 'value': 4},
-        {'type': '青鱼', 'province': '江苏省', 'value': 15},
-        {'type': '青鱼', 'province': '浙江省', 'value': 18},
-        {'type': '青鱼', 'province': '安徽省', 'value': 5},
-        {'type': '青鱼', 'province': '湖北省', 'value': 1},
-        {'type': '青鱼', 'province': '湖南省', 'value': 15},
-        {'type': '青鱼', 'province': '广东省', 'value': 5},
-        {'type': '青鱼', 'province': '广西', 'value': 7},
-        {'type': '乌鳢', 'province': '江苏省', 'value': 7},
-        {'type': '乌鳢', 'province': '湖北省', 'value': 1},
-        {'type': '乌鳢', 'province': '湖南省', 'value': 8},
-        {'type': '乌鳢', 'province': '广东省', 'value': 66},
-        {'type': '乌鳢', 'province': '广西', 'value': 1},
-        {'type': '鳙', 'province': '天津市', 'value': 42},
-        {'type': '鳙', 'province': '河北省', 'value': 1},
-        {'type': '鳙', 'province': '吉林省', 'value': 12},
-        {'type': '鳙', 'province': '黑龙江省', 'value': 13},
-        {'type': '鳙', 'province': '上海市', 'value': 4},
-        {'type': '鳙', 'province': '江苏省', 'value': 74},
-        {'type': '鳙', 'province': '安徽省', 'value': 25},
-        {'type': '鳙', 'province': '江西省', 'value': 19},
-        {'type': '鳙', 'province': '山东省', 'value': 2},
-        {'type': '鳙', 'province': '河南省', 'value': 23},
-        {'type': '鳙', 'province': '湖北省', 'value': 54},
-        {'type': '鳙', 'province': '湖南省', 'value': 79},
-        {'type': '鳙', 'province': '广东省', 'value': 11},
-        {'type': '鳙', 'province': '广西', 'value': 15},
-        {'type': '鳙', 'province': '重庆市', 'value': 10},
-        {'type': '鳙', 'province': '四川省', 'value': 4},
-        {'type': '鳙', 'province': '贵州省', 'value': 2},
-        {'type': '鳙', 'province': '云南省', 'value': 1},
-        {'type': '鳙', 'province': '陕西省', 'value': 3},
-        {'type': '鳙', 'province': '宁夏', 'value': 8}
+        {province: '北京市', type: '小龙虾', value: 4},
+        {province: '北京市', type: '加州鲈', value: 0},
+        {province: '北京市', type: '南美白对虾', value: 0},
+        {province: '天津市', type: '小龙虾', value: 5},
+        {province: '天津市', type: '加州鲈', value: 2},
+        {province: '天津市', type: '南美白对虾', value: 0},
+        {province: '河北省', type: '小龙虾', value: 0},
+        {province: '河北省', type: '加州鲈', value: 0},
+        {province: '河北省', type: '南美白对虾', value: 0},
+        {province: '山西省', type: '小龙虾', value: 0},
+        {province: '山西省', type: '加州鲈', value: 0},
+        {province: '山西省', type: '南美白对虾', value: 0},
+        {province: '内蒙古自治区', type: '小龙虾', value: 0},
+        {province: '内蒙古自治区', type: '加州鲈', value: 0},
+        {province: '内蒙古自治区', type: '南美白对虾', value: 0},
+        {province: '辽宁省', type: '小龙虾', value: 0},
+        {province: '辽宁省', type: '加州鲈', value: 0},
+        {province: '辽宁省', type: '南美白对虾', value: 0},
+        {province: '吉林省', type: '小龙虾', value: 0},
+        {province: '吉林省', type: '加州鲈', value: 0},
+        {province: '吉林省', type: '南美白对虾', value: 0},
+        {province: '黑龙江省', type: '小龙虾', value: 0},
+        {province: '黑龙江省', type: '加州鲈', value: 0},
+        {province: '黑龙江省', type: '南美白对虾', value: 0},
+        {province: '上海市', type: '小龙虾', value: 1},
+        {province: '上海市', type: '加州鲈', value: 2},
+        {province: '上海市', type: '南美白对虾', value: 0},
+        {province: '江苏省', type: '小龙虾', value: 18},
+        {province: '江苏省', type: '加州鲈', value: 8},
+        {province: '江苏省', type: '南美白对虾', value: 7},
+        {province: '浙江省', type: '小龙虾', value: 8},
+        {province: '浙江省', type: '加州鲈', value: 15},
+        {province: '浙江省', type: '南美白对虾', value: 21},
+        {province: '安徽省', type: '小龙虾', value: 0},
+        {province: '安徽省', type: '加州鲈', value: 0},
+        {province: '安徽省', type: '南美白对虾', value: 2},
+        {province: '福建省', type: '小龙虾', value: 2},
+        {province: '福建省', type: '加州鲈', value: 8},
+        {province: '福建省', type: '南美白对虾', value: 13},
+        {province: '江西省', type: '小龙虾', value: 2},
+        {province: '江西省', type: '加州鲈', value: 2},
+        {province: '江西省', type: '南美白对虾', value: 0},
+        {province: '山东省', type: '小龙虾', value: 3},
+        {province: '山东省', type: '加州鲈', value: 3},
+        {province: '山东省', type: '南美白对虾', value: 12},
+        {province: '河南省', type: '小龙虾', value: 2},
+        {province: '河南省', type: '加州鲈', value: 0},
+        {province: '河南省', type: '南美白对虾', value: 0},
+        {province: '湖北省', type: '小龙虾', value: 39},
+        {province: '湖北省', type: '加州鲈', value: 3},
+        {province: '湖北省', type: '南美白对虾', value: 0},
+        {province: '湖南省', type: '小龙虾', value: 4},
+        {province: '湖南省', type: '加州鲈', value: 0},
+        {province: '湖南省', type: '南美白对虾', value: 0},
+        {province: '广东省', type: '小龙虾', value: 4},
+        {province: '广东省', type: '加州鲈', value: 21},
+        {province: '广东省', type: '南美白对虾', value: 14},
+        {province: '广西壮族自治区', type: '小龙虾', value: 2},
+        {province: '广西壮族自治区', type: '加州鲈', value: 13},
+        {province: '广西壮族自治区', type: '南美白对虾', value: 12},
+        {province: '海南省', type: '小龙虾', value: 0},
+        {province: '海南省', type: '加州鲈', value: 14},
+        {province: '海南省', type: '南美白对虾', value: 15},
+        {province: '重庆市', type: '小龙虾', value: 0},
+        {province: '重庆市', type: '加州鲈', value: 0},
+        {province: '重庆市', type: '南美白对虾', value: 0},
+        {province: '四川省', type: '小龙虾', value: 0},
+        {province: '四川省', type: '加州鲈', value: 0},
+        {province: '四川省', type: '南美白对虾', value: 0},
+        {province: '贵州省', type: '小龙虾', value: 0},
+        {province: '贵州省', type: '加州鲈', value: 0},
+        {province: '贵州省', type: '南美白对虾', value: 0},
+        {province: '云南省', type: '小龙虾', value: 0},
+        {province: '云南省', type: '加州鲈', value: 1},
+        {province: '云南省', type: '南美白对虾', value: 0},
+        {province: '陕西省', type: '小龙虾', value: 0},
+        {province: '陕西省', type: '加州鲈', value: 0},
+        {province: '陕西省', type: '南美白对虾', value: 0},
+        {province: '甘肃省', type: '小龙虾', value: 0},
+        {province: '甘肃省', type: '加州鲈', value: 0},
+        {province: '甘肃省', type: '南美白对虾', value: 0},
+        {province: '青海省', type: '小龙虾', value: 0},
+        {province: '青海省', type: '加州鲈', value: 0},
+        {province: '青海省', type: '南美白对虾', value: 0},
+        {province: '宁夏回族自治区', type: '小龙虾', value: 0},
+        {province: '宁夏回族自治区', type: '加州鲈', value: 0},
+        {province: '宁夏回族自治区', type: '南美白对虾', value: 0},
+        {province: '新疆维吾尔自治区', type: '小龙虾', value: 0},
+        {province: '新疆维吾尔自治区', type: '加州鲈', value: 0},
+        {province: '新疆维吾尔自治区', type: '南美白对虾', value: 0},
       ]
     },
   },
@@ -212,7 +175,7 @@ export default {
       this.map.setOption(this.config)
     },
     setMapData(type) {
-      const list = this.diseaseWarning.filter(item => item.type === type).map(item => {
+      const list = this.qualityWarning.filter(item => item.type === type).map(item => {
         return {
           name: item.province.replace('省', '').replace('市', ''),
           value: item.value,
@@ -229,7 +192,7 @@ export default {
     },
   },
   watch: {
-    diseaseWarning: {
+    qualityWarning: {
       handler(cur, past) {
         if (cur && cur !== past && cur.length > 0) {
           this.setMapData(this.type)

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

 <template>
   <div class="area-count" v-if="showChart">
     <m-chart :config="config" :data="data" :options="{xAxis}"/>
-    <p>面积（公顷）</p>
+    <p>面积（亩）</p>
     <p>数量（个）</p>
   </div>
 </template>
@@ -9,6 +9,20 @@
 <script>
 export default {
   name: 'AreaCount',
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return [
+          {year: '2015', area: 97200, count: 81},
+          {year: '2016', area: 106800, count: 89},
+          {year: '2017', area: 114000, count: 95},
+          {year: '2018', area: 123600, count: 103},
+          {year: '2019', area: 129600, count: 108},
+        ]
+      }
+    }
+  },
   data() {
     return {
       showChart: false,
@@ -25,13 +39,6 @@ export default {
           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},
-      ],
       xAxis: {
         axisLabel: {
           rotate: 0,

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

@@ -14,7 +14,7 @@
             <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>
+            <div v-else class="text" :title="row[col.key]" :style="`text-align: ${col.align || 'left'};color: ${col.color};width:100%;`">{{row[col.key]}}</div>
           </i-col>
         </Row>
       </m-scroll>
@@ -57,15 +57,18 @@ export default {
         },
       ],
       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'},
+        {theme: '病鱼上下颌，眼眶，鳍条基部，腹部充血发红，严重时眼球外突，两侧鳞片脱落，腹腔有淡红色液体。', status: '1', unit: ' 常熟市水产技术推广站', time: '2020/8/20 18:28:00', done: '2020/8/21 14:01:00'},
+        {theme: '病鱼体色发黑，身体消瘦，食欲减退，严重时有大量鱼体聚集池边，鳃丝肿胀，呼吸困难而死。', status: '1', unit: '渔友1YN95QGRA8TJ', time: '2020/8/19 20:40:00', done: '2020/8/20 18:37:00'},
+        {theme: '病鱼体色发黑，独游于池边，鳃丝腐烂带污泥，鳃丝末端有许多粘液。鳃盖骨内表中央部分被腐蚀成一个不规则的透明圆形窗。', status: '1', unit: ' 天祥公司', time: '2020/8/20 10:03:00', done: '2020/8/20 18:28:00'},
+        {theme: '鳃丝末端发白腐烂， 常粘有污泥．软骨外露，一些病鱼鳍条腐烂，严重患者鳃盖骨内、外表皮充血发炎', status: '1', unit: '宁河县韩军渔药经营部', time: '2020/8/19 20:40:00', done: '2020/8/19 20:40:00'},
+        {theme: '送检蟹活力较强，血液凝固较好，肠内有食，肝胰腺正常。镜检：鳃内未发现寄生虫，鳃丝清晰，肠内细菌', status: '1', unit: ' 安徽有机良庄农业科技股份有限公司', time: '2020/8/8 16:08:00', done: '2020/8/11 15:10:00'},
+        {theme: '送检蟹活力好，体表清晰，肝胰腺颜色正常，肠内有食。镜检：鳃内未发现寄生虫，肠内细菌正常。', status: '1', unit: ' 常熟市水产技术推广站', time: '2020/8/2 10:46:00', done: '2020/8/5 13:41:00'},
+        {theme: '如何治疗河蟹水瘪子病？如何进行预防？', status: '1', unit: '桂林鱼伯伯生态农业科技有限公司', time: '2020/8/1 9:21:00', done: '2020/8/2 15:46:00'},
+        {theme: '高温期间，如何做好鳜鱼病的防治工作', status: '1', unit: ' 乐亭县铭泰水产养殖有限公司', time: '2020/8/1 16:04:00', done: '2020/8/1 16:04:00'},
+        {theme: '送检蟹活力较差，底板发黄，指尖发红，肝脏发肉色和白色。镜检：鳃内未发现寄生虫，污物较多，肠内细', status: '1', unit: ' 肇庆市水产研究所', time: '2020/7/30 16:50:00', done: '2020/7/30 16:50:00'},
+        {theme: '镜检腮丝有纤毛虫，肠道与肛门红肿充血', status: '1', unit: ' 常熟市水产技术推广站', time: '2020/7/30 15:39:00', done: '2020/7/30 21:19:00'},
+        {theme: '鱼体表有疥疮，鱼鳍有部分腐烂，腮丝红肿充血，', status: '1', unit: ' 苏州市相城区水产技术推广站', time: '2020/7/29 13:32:00', done: '2020/7/30 16:12:00'},
+        {theme: '鱼大批死亡', status: '1', unit: '章俊', time: '2020/7/28 8:21:00', done: '2020/7/30 20:56:00'},
       ]
     }
   },
@@ -94,4 +97,8 @@ export default {
       align-items center
       flex-wrap wrap
       font-size .9rem
+      .text
+        overflow hidden
+        white-space nowrap
+        text-overflow ellipsis
 </style>

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

@@ -2,13 +2,26 @@
 <div class="map-wrapper">
   <BorderBox class="sum">
     <p>主要品种</p>
-    <h2>草鱼、南美白对虾、罗非鱼</h2>
+    <h2>草鱼</h2>
   </BorderBox>
   <div class="map" ref="map"/>
 </div>
 </template>
 
 <script>
+const mock = [
+  {name: '江苏省渔业技术推广中心扬中基地', location: [119.809835, 32.307434], to: '陕西', toLocation: [108.944866, 34.349753], value: 13.4},
+  {name: '江苏省渔业技术推广中心扬中基地', location: [119.809835, 32.307435], to: '广西', toLocation: [118.065326, 25.905837], value: 11.3},
+  {name: '江苏省渔业技术推广中心扬中基地', location: [119.809835, 32.307436], to: '山西', toLocation: [115.894445, 28.76435], value: 2.4},
+  {name: '江苏省渔业技术推广中心扬中基地', location: [119.809835, 32.307437], to: '湖北', toLocation: [114.174298, 30.571852], value: 15.6},
+  {name: '江苏省渔业技术推广中心扬中基地', location: [119.809835, 32.307438], to: '云南', toLocation: [102.942748, 24.027546], value: 5.3},
+  {name: '江苏省渔业技术推广中心扬中基地', location: [119.809835, 32.307439], to: '福建', toLocation: [118.065326, 25.905837], value: 5.5},
+  {name: '江苏省渔业技术推广中心扬中基地', location: [119.809835, 32.307440], to: '广东', toLocation: [113.484399, 23.230846], value: 6},
+  {name: '江苏省渔业技术推广中心扬中基地', location: [119.809835, 32.307441], to: '辽宁', toLocation: [120.530564, 40.789036], value: 7.2},
+  {name: '江苏省渔业技术推广中心扬中基地', location: [119.809835, 32.307442], to: '湖南', toLocation: [112.031013, 27.29511], value: 5.4},
+  {name: '江苏省渔业技术推广中心扬中基地', location: [119.809835, 32.307443], to: '新疆', toLocation: [86.716332, 42.486489], value: 3.2},
+  {name: '江苏省渔业技术推广中心扬中基地', location: [119.809835, 32.307444], to: '浙江', toLocation: [120.273002, 29.120389], value: 7},
+]
 import china from 'echarts/map/json/china.json'
 import BorderBox from '../border-box'
 export default {
@@ -146,183 +159,44 @@ export default {
           },
           'lineStyle': {
             'normal': {
-              'width': 1,
-              'opacity': 0.6,
-              'curveness': 0.2,
-              color: 'gold',
+              'width': 2,
+              'opacity': 0.5,
+              'curveness': 0.3,
+              color: ({value}) => {
+                if (value > 12) {
+                  return '#dd393a'
+                } else if (value > 6) {
+                  return '#fbc006'
+                } else {
+                  return '#58e61c'
+                }
+              }
             }
           },
           'tooltip': {
-            'trigger': 'item'
-          },
-          data: [
-            {
-              'fromName': '江苏',
-              'toName': '安徽',
-              'value': 17,
-              'coords': [
-
-                [
-                  118.796252,
-                  32.0739
-                ],
-                [
-                  '117.229',
-                  '31.917'
-                ],
-              ]
-            },
-            {
-              'fromName': '江苏',
-              'toName': '上海',
-              'value': 25,
-              'coords': [
-                [
-                  118.796252,
-                  32.0739
-                ],
-                [
-                  '121.465',
-                  '31.289'
-                ],
-              ]
-            },
-            {
-              'fromName': '江苏',
-              'toName': '湖北',
-              'value': 31,
-              'coords': [
-                [
-                  118.796252,
-                  32.0739
-                ],
-                [
-                  '114.39',
-                  '30.663'
-                ],
-              ]
-            },
-            {
-              'fromName': '江苏',
-              'toName': '福建',
-              'value': 12,
-              'coords': [
-                [
-                  118.796252,
-                  32.0739
-                ],
-                [
-                  '119.454',
-                  '25.922'
-                ],
-              ]
-            },
-            {
-              'fromName': '江苏',
-              'toName': '浙江',
-              'value': 19,
-              'coords': [
-                [
-                  118.796252,
-                  32.0739
-                ],
-                [
-                  '119.531',
-                  '29.877'
-                ],
-              ]
-            },
-            {
-              'fromName': '江苏',
-              'toName': '陕西',
-              'value': 18,
-              'coords': [
-                [
-                  118.796252,
-                  32.0739
-                ],
-                [
-                  '109.116',
-                  '34.2'
-                ],
-              ]
-            },
-            {
-              'fromName': '江苏',
-              'toName': '河南',
-              'value': 15,
-              'coords': [
-                [
-                  118.796252,
-                  32.0739
-                ],
-                [
-                  '113.467',
-                  '34.623'
-                ],
-              ]
-            },
-            {
-              'fromName': '江苏',
-              'toName': '山东',
-              'value': 12,
-              'coords': [
-                [
-                  118.796252,
-                  32.0739
-                ],
-                [
-                  '116.972',
-                  '36.737'
-                ],
-              ]
-            },
-            {
-              'fromName': '江苏',
-              'toName': '广东',
-              'value': 12,
-              'coords': [
-                [
-                  118.796252,
-                  32.0739
-                ],
-                [
-                  '113.511',
-                  '23.22'
-                ],
-              ]
-            },
-            {
-              'fromName': '江苏',
-              'toName': '四川',
-              'value': 10,
-              'coords': [
-                [
-                  118.796252,
-                  32.0739
-                ],
-                [
-                  '103.953',
-                  '30.762'
-                ],
-              ]
+            'trigger': 'item',
+            textStyle: {
+              fontSize: 12 * this.sizeRate,
             },
-            {
-              'fromName': '江苏',
-              'toName': '江西',
-              'value': 9,
-              'coords': [
-                [
-                  118.796252,
-                  32.0739
-                ],
-                [
-                  '116.005',
-                  '28.663'
-                ],
-              ]
+            confine: true,
+            formatter: ({data}) => {
+              return `
+                <div class="map-tooltip-info">
+                  <h3>${data.fromName}</h3>
+                  <p><span>销往省份：</span>${data.toName}</p>
+                  <p><span>销量：</span>${data.value}万尾</p>
+                </div>
+              `
+            }
           },
-          ]
+          data: mock.map(item => {
+            return {
+              fromName: item.name,
+              toName: item.to,
+              value: item.value,
+              coords: [item.location, item.toLocation],
+            }
+          }),
         },
         {
           'name': '收货地址',
@@ -356,100 +230,27 @@ export default {
           'symbolSize': 5,
           'itemStyle': {
             'normal': {
-              'show': false,
-              'color': 'rgba(245,216,47,.5)'
+              'show': true,
+              opacity: .5,
+              // 'color': 'rgba(245,216,47,.5)'
+              color: ({data}) => {
+                const {value} = data
+                if (value[2] > 12) {
+                  return '#dd393a'
+                } else if (value[2] > 6) {
+                  return '#fbc006'
+                } else {
+                  return '#58e61c'
+                }
+              }
             }
           },
-          data: [
-            {
-              'name': '安徽',
-              'value': [
-                '117.229',
-                '31.917',
-                17
-              ]
-            },
-            {
-              'name': '上海',
-              'value': [
-                '121.465',
-                '31.289',
-                25
-              ]
-            },
-            {
-              'name': '湖北',
-              'value': [
-                '114.39',
-                '30.663',
-                31
-              ]
-            },
-            {
-              'name': '福建',
-              'value': [
-                '119.454',
-                '25.922',
-                22
-              ]
-            },
-            {
-              'name': '浙江',
-              'value': [
-                '119.531',
-                '29.877',
-                19
-              ]
-            },
-            {
-              'name': '陕西',
-              'value': [
-                '109.116',
-                '34.2',
-                18
-              ]
-            },
-            {
-              'name': '河南',
-              'value': [
-                '113.467',
-                '34.623',
-                15
-              ]
-            },
-            {
-              'name': '山东',
-              'value': [
-                '116.972',
-                '36.737',
-                12
-              ]
-            },
-            {
-              'name': '广东',
-              'value': [
-                '113.511',
-                '23.22',
-                12
-              ]
-            },
-            {
-              'name': '四川',
-              'value': [
-                '103.953',
-                '30.762',
-                10
-              ]
-            },
-            {
-              'name': '江西',
-              'value': [
-                '116.005',
-                '28.663',
-                9
-              ]
-            },
-          ]
+          data: mock.map(item => {
+            return {
+              name: item.to,
+              value: [item.toLocation[0] + '', item.toLocation[1] + '', item.value],
+            }
+          }),
         },
         {
           'name': '发送地址',
@@ -483,11 +284,11 @@ export default {
           },
           'data': [
             {
-              'name': '江苏',
+              'name': '江苏省渔业技术推广中心扬中基地',
               'value': [
-                '119.68',
-                '33.199',
-                19
+                '119.809835',
+                '32.307434',
+                100
               ]
             },
           ]
@@ -499,7 +300,6 @@ export default {
     //   // 监听地图点击事件
     //   this.map.on('click', (ev) => {
     //     const {name} = ev.data
-    //     console.log(name)
     //     this.setRegions(name)
     //     this.curProvince = name
     //     this.$emit('select', name)
@@ -572,7 +372,7 @@ export default {
     height 100%
     z-index 99
   >.sum
-    width 50%
+    width 30%
     // margin 0 auto
     margin 1rem 0 0 1rem
     text-align center

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

@@ -5,14 +5,14 @@
         <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>
+          <p style="color:#f3d813;"><m-count style="color:#f3d813;font-weight:bold;" :value="25630820" :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>
+          <p style="color:#05fd70;"><m-count style="color:#05fd70;font-weight:bold;" :value="11533869" :decimal="0"/>万元</p>
         </div>
       </div>
     </div>
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-const mockValue = [4874454, 224454, 3314454, 4874454]
+const mockValue = [2114542.65, 7471384.03,	3383268.24,	1127756.08]
 export default {
   name: 'OperateSituation',
   data() {
@@ -65,10 +65,10 @@ export default {
             }
           },
           indicator: [
-            {text: '人力成本', index: 0, max: 6000000},
-            {text: '其他投入', index: 1, max: 500000},
-            {text: '其他成本', index: 2, max: 6000000},
-            {text: '饲料成本', index: 3, max: 6000000},
+            {text: '人力成本', index: 0, max: 7500000},
+            {text: '饲料成本', index: 1, max: 7500000},
+            {text: '其他成本', index: 2, max: 7500000},
+            {text: '其他投入', index: 3, max: 7500000},
           ],
           center: ['50%', '50%'],
           radius: '50%',
@@ -81,12 +81,13 @@ export default {
             formatter: ({data}) => {
               const {value} = data
               const [{indicator}] = this.option.radar
+              const total = value[0] + value[1] + value[2] + value[3]
               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>
+                  <p>${indicator[0].text}：<span>${this.$com.transNumber(value[0])} 万元 (${(value[0] / total * 100).toFixed(1)}%)</span></p>
+                  <p>${indicator[1].text}：<span>${this.$com.transNumber(value[1])} 万元 (${(value[1] / total * 100).toFixed(1)}%)</span></p>
+                  <p>${indicator[2].text}：<span>${this.$com.transNumber(value[2])} 万元 (${(value[2] / total * 100).toFixed(1)}%)</span></p>
+                  <p>${indicator[3].text}：<span>${this.$com.transNumber(value[3])} 万元 (${(value[3] / total * 100).toFixed(1)}%)</span></p>
                 </div>
               `
             }
@@ -134,12 +135,12 @@ export default {
   .sum
     display flex
     justify-content space-around
-    margin 1rem 0
+    margin .5rem 0
     >div
       display flex
       align-items center
       justify-content space-around
-      width 45%
+      width 47%
       padding .8rem .5rem
       background #004a56
       p

src/views/components/seedling/place-list.vue

@@ -8,10 +8,10 @@
       <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%;`">
+            <!-- <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>
+            </div> -->
+            <div :style="`text-align: ${col.align || 'left'};color: ${col.color};width:100%;`">{{row[col.key]}}</div>
           </i-col>
         </Row>
       </m-scroll>
@@ -38,22 +38,20 @@ export default {
         },
       ],
       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: '苏州市德诚渔业有限公司'},
+        {index: 1, name: '靖江市滨江水产良种场'},
+        {index: 2, name: '泰兴市水产良种场'},
+        {index: 3, name: '泰州水产养殖场'},
+        {index: 4, name: '兴化市良种场'},
+        {index: 5, name: '春江特种水产养殖场'},
+        {index: 6, name: '兴化市荣義水产养殖有限公司'},
+        {index: 7, name: '兴化鑫胜水产品交易有限公司'},
+        {index: 1, name: '靖江市滨江水产良种场'},
+        {index: 2, name: '泰兴市水产良种场'},
+        {index: 3, name: '泰州水产养殖场'},
+        {index: 4, name: '兴化市良种场'},
+        {index: 5, name: '春江特种水产养殖场'},
+        {index: 6, name: '兴化市荣義水产养殖有限公司'},
+        {index: 7, name: '兴化鑫胜水产品交易有限公司'},
       ]
     }
   },

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

@@ -3,22 +3,22 @@
     <div v-if="showChart">
       <p class="title"><span/>面积</p>
       <m-chart v-if="showChart" :config="config" :data="data" />
+    </div>
     <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 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>
   </div>
 </template>
@@ -30,28 +30,60 @@ export default {
     return {
       showChart: false,
       config: {
-        colors: ['#9478f5', '#4ef4e9', '#05bcfe'],
+        colors: ['#1890FF',
+          '#41D9C7',
+          '#2FC25B',
+          '#FACC14',
+          '#E6965C',
+          '#223273',
+          '#7564CC',
+          '#8543E0'],
         legend: {hide: true},
+        tooltip: {
+          formatter: '{b}：{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%']}
+          {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '30%']}
         ]
       },
       data: [
-        {name: '品种1', value: 52},
-        {name: '品种2', value: 26},
-        {name: '品种3', value: 22},
+        {name: '长春鳊', value: 189},
+        {name: '鳜鱼', value: 142},
+        {name: '青鱼', value: 156},
+        {name: '鲶鱼', value: 173},
+        {name: '鳙鱼', value: 165},
+        {name: '鲈鱼', value: 176.5},
+        {name: '鲫鱼', value: 154},
+        {name: '白丝', value: 165},
       ],
       config2: {
-        colors: ['#ff4d4c', '#f7ff14', '#5eec64'],
+        colors: ['#1890FF',
+          '#41D9C7',
+          '#2FC25B',
+          '#FACC14',
+          '#E6965C',
+          '#223273',
+          '#7564CC',
+          '#8543E0'],
         legend: {hide: true},
+        tooltip: {
+          formatter: '{b}：{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%']}
+          {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '30%']}
         ]
       },
       data2: [
-        {name: '品种1', value: 52},
-        {name: '品种2', value: 26},
-        {name: '品种3', value: 22},
+        {name: '长春鳊', value: 23678},
+        {name: '鳜鱼', value: 34981},
+        {name: '青鱼', value: 65143},
+        {name: '鲶鱼', value: 47189},
+        {name: '鳙鱼', value: 41191},
+        {name: '鲈鱼', value: 81912},
+        {name: '鲫鱼', value: 71023},
+        {name: '白丝', value: 37181},
       ],
     }
   },
@@ -86,14 +118,16 @@ export default {
       margin-right .6rem
   .legend
     position absolute
-    bottom 1rem
+    bottom .5rem
     display flex
     justify-content space-around
-    width 100%
+    width 90%
+    margin 0 auto
     div
       display flex
       flex-direction column
       align-items center
+      width 1rem
     span
       display block
       width .8rem

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

@@ -18,6 +18,10 @@ export default {
     return {
       showChart: false,
       config: {
+        tooltip: {
+          formatter: '{b}: {c}家 ({d}%)',
+          confine: true,
+        },
         colors: ['#9779fe', '#51f2ea', '#05bcfe', '#7efe95', '#fef170', '#feaf62', '#f6633b', '#fc3239', '#fb74fb', '#a936f2'],
         legend: {
           hide: true,
@@ -27,16 +31,16 @@ export default {
         ]
       },
       data: [
-        {name: '合资', value: 30},
-        {name: '外资', value: 20},
-        {name: '私营', value: 15},
-        {name: '自营', value: 5},
-        {name: '国有控股', value: 5},
+        {name: '合资', value: 23},
+        {name: '外资', value: 12},
+        {name: '私营', value: 40},
+        {name: '自营', value: 8},
+        {name: '国有控股', value: 4},
         {name: '大专院校', value: 5},
-        {name: '社会团体', value: 5},
+        {name: '社会团体', value: 1},
         {name: '党政机关', value: 5},
-        {name: '事业单位', value: 30},
-        {name: '科研院所', value: 5},
+        {name: '事业单位', value: 4},
+        {name: '科研院所', value: 6},
       ],
     }
   },

src/views/components/seedling/sales-data.vue

 <template>
   <div class="sales-data">
     <div class="tabs">
-      <p>产销数量</p>
-      <p>销售金额</p>
+      <p @click="curTab = '产销数量'" :class="`${curTab === '产销数量' ? 'on' : ''}`">产销数量</p>
+      <p @click="curTab = '销售金额'" :class="`${curTab === '销售金额' ? 'on' : ''}`">销售金额</p>
     </div>
     <div class="list">
       <Row class="row row-title">
@@ -25,11 +25,52 @@
 </template>
 
 <script>
+const mock = [
+  {name: '鲫鱼', product: 2755632, sales: 2476598},
+  {name: '鲈鱼', product: 477808, sales: 408647},
+  {name: '罗非鱼', product: 1641662, sales: 1487590},
+  {name: '鲟鱼', product: 102042, sales: 986755},
+  {name: '鳗鲡', product: 234223, sales: 209758},
+  {name: '南美白对虾', product: 671108, sales: 603456},
+  {name: '青虾', product: 225321, sales: 206427},
+  {name: '克氏原螯虾', product: 2089604, sales: 1985479},
+  {name: '河蟹', product: 778682, sales: 722861},
+  {name: '鲫鱼', product: 2755632, sales: 2476598},
+  {name: '鲈鱼', product: 477808, sales: 408647},
+  {name: '罗非鱼', product: 1641662, sales: 1487590},
+  {name: '鲟鱼', product: 102042, sales: 986755},
+  {name: '鳗鲡', product: 234223, sales: 209758},
+  {name: '南美白对虾', product: 671108, sales: 603456},
+  {name: '青虾', product: 225321, sales: 206427},
+  {name: '克氏原螯虾', product: 2089604, sales: 1985479},
+  {name: '河蟹', product: 778682, sales: 722861},
+]
+const mockSales = [
+  {name: '鲫鱼', value: 5200856},
+  {name: '鲈鱼', value: 2206694},
+  {name: '罗非鱼', value: 1785108},
+  {name: '鲟鱼', value: 4933775},
+  {name: '鳗鲡', value: 943911},
+  {name: '南美白对虾', value: 3620736},
+  {name: '青虾', value: 3302832},
+  {name: '克氏原螯虾', value: 11515778},
+  {name: '河蟹', value: 4554024},
+  {name: '鲫鱼', value: 5200856},
+  {name: '鲈鱼', value: 2206694},
+  {name: '罗非鱼', value: 1785108},
+  {name: '鲟鱼', value: 4933775},
+  {name: '鳗鲡', value: 943911},
+  {name: '南美白对虾', value: 3620736},
+  {name: '青虾', value: 3302832},
+  {name: '克氏原螯虾', value: 11515778},
+  {name: '河蟹', value: 4554024},
+]
 export default {
   name: 'SalesData',
   data() {
     return {
-      layout: [
+      curTab: '产销数量',
+      layout1: [
         {
           title: '名称',
           key: 'name',
@@ -37,38 +78,50 @@ export default {
           align: 'center',
         },
         {
-          title: '产量(万吨)',
+          title: '产量(吨)',
           key: 'product',
           width: 8,
           align: 'center',
         },
         {
-          title: '销量(万吨)',
+          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},
-      ]
+      layout2: [
+        {
+          title: '名称',
+          key: 'name',
+          width: 8,
+          align: 'center',
+        },
+        {
+          title: '金额(万元)',
+          key: 'value',
+          width: 16,
+          align: 'center',
+        },
+      ],
+    }
+  },
+  computed: {
+    layout() {
+      if (this.curTab === '产销数量') {
+        return this.layout1
+      } else {
+        return this.layout2
       }
     },
+    model() {
+      if (this.curTab === '产销数量') {
+        return mock
+      } else {
+        return mockSales
+      }
+    },
+  }
 }
 </script>
 
@@ -88,7 +141,8 @@ export default {
     >p
       text-align center
       flex 1
-      &:first-child
+      cursor pointer
+      &.on
         color $edgeColor
         font-weight bold
         border-bottom .2rem solid $edgeColor

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

@@ -5,7 +5,7 @@
   </BorderBox>
   <BorderBox v-else class="sum">
     <p>良种场总数量</p>
-    <h2><m-count class="count" :value="255448745" :decimal="0"/> 个</h2>
+    <h2><m-count class="count" :value="108" :decimal="0"/> 个</h2>
   </BorderBox>
   <div class="map" ref="map"/>
 </div>
@@ -14,121 +14,129 @@
 <script>
 import china from 'echarts/map/json/china.json'
 import BorderBox from '../border-box'
-const mock = [
-  {name: '浙江新农都物流中心（水产市场）', address: '杭州市石桥路115号', province: '浙江', value: [120.19706700, 30.24639100], visualMap: false, newDate: '2020-08-15'},
-  {name: '厦门市水产品批发市场', address: '厦门市高崎北二路77-87号中埔水产批发市场', province: '福建', value: [118.11368800, 24.55107600], visualMap: false, newDate: '2020-08-15'},
-  {name: '福建省兴业华洲（福建）农贸市场有限公司', address: '泉州晋江市池店镇仕春工业区新华洲水产市场', province: '福建', value: [118.55729200, 24.86104200], visualMap: false, newDate: '2020-08-15'},
-  {name: '福建省三明市鲜活水产品批发市场', address: '三明市三元区白沙长安路34号', province: '福建', value: [117.61887900, 26.25029400], visualMap: false, newDate: '2020-08-15'},
-  {name: '江西省九江鲜活水产品批发市场', address: '九江市庐峰路东端', province: '江西', value: [116.05598000, 29.75385500], visualMap: false, newDate: '2020-08-15'},
-  {name: '江西南昌市水产品综合交易批发市场', address: '江西省南昌市东湖区富有路9号', province: '江西', value: [115.92204500, 28.71739100], visualMap: false, newDate: '2020-08-15'},
-  {name: '山东省王尔庄海蜇批发市场', address: '山东省滨州市沾化县富桥路405号', province: '山东', value: [117.94507500, 37.75016700], visualMap: false, newDate: '2020-08-15'},
-  {name: '山东省临沂市华东淡水鱼批发市场', address: '临沂市北园路6号', province: '山东', value: [118.34964500, 35.15801000], visualMap: false, newDate: '2020-08-15'},
-  {name: '山东省威海水产品批发市场', address: '山东省威海市环翠区顺河街188号', province: '山东', value: [122.11957200, 37.50407200], visualMap: false, newDate: '2020-08-15'},
-  {name: '河南省郑州市柳林水产批发市场', address: '郑州市金水区柳林镇郑花路北段柳林水产品批发市场', province: '河南', value: [113.69081200, 34.83705700], visualMap: false, newDate: '2020-08-15'},
-  {name: '湖北省武汉市白沙洲农副产品大市场', address: '湖北省武汉市洪山区张家湾特1号', province: '湖北', value: [114.27418500, 30.47076800], visualMap: false, newDate: '2020-08-15'},
-  {name: '湖北省孝感市南大水产品批发市场', address: '孝感市107国道与316国道交合处', province: '湖北', value: [113.97923200, 30.88929600], visualMap: false, newDate: '2020-08-15'},
-  {name: '湖南洞庭渔都股份有限公司（岳阳洞庭水产批发市场）', address: '岳阳市楼区东风湖路78号', province: '湖南', value: [113.10916800, 29.39883800], visualMap: false, newDate: '2020-08-15'},
-  {name: '广东省南海盐步环球水产交易市场', address: '佛山市南海区广佛公路平地路段', province: '广东', value: [113.16316200, 23.11600200], visualMap: false, newDate: '2020-08-15'},
-  {name: '广东省汕头大洋水产交易市场', address: '汕头市海滨路33号', province: '广东', value: [116.71700700, 23.35911200], visualMap: false, newDate: '2020-08-15'},
-  {name: '东莞市沿江富绅市场经营管理有限公司', address: '东莞市虎门镇沿江东路62号新洲水产品批发市场办公室', province: '广东', value: [113.67847800, 22.81675900], visualMap: false, newDate: '2020-08-15'},
-  {name: '广州水产集团鱼市场经营管理有限公司', address: '广州市荔湾区芳村招村70亩商业区', province: '广东', value: [113.26457300, 23.14327900], visualMap: false, newDate: '2020-08-15'},
-  {name: '广东省江门水产（咸鱼）批发市场', address: '江门市江会路70号', province: '广东', value: [113.08075600, 22.56740300], visualMap: false, newDate: '2020-08-15'},
-  {name: '广西北海市外沙水产品批发市场', address: '广西北海市合浦县廉州镇爱卫街二巷2号', province: '广西', value: [109.21357100, 21.66720800], visualMap: false, newDate: '2020-08-15'},
-  {name: '四川省内江市水产批发市场', address: '四川省内江市中区牌楼路313号', province: '四川', value: [105.07417600, 29.57049200], visualMap: false, newDate: '2020-08-15'},
-  {name: '福州名成水产品市场有限公司', address: '福州市马尾区青洲路66号', province: '福建', value: [119.47893300, 25.99550200], visualMap: false, newDate: '2020-08-15'},
-  {name: '四川成都农产品中心批发市水产分场', address: '成都市西航港成白路98号', province: '四川', value: [104.07537900, 30.70897800], visualMap: false, newDate: '2020-08-15'},
-  {name: '乌鲁木齐北园春果业经营有限责任公司', address: '新疆乌鲁木齐市沙依巴克区克拉玛依西街1168号北园春农产品批发市场B4-4-1-9号', province: '新疆', value: [87.58357400, 43.82808700], visualMap: false, newDate: '2020-08-15'},
-  {name: '浙江省温州浙福边贸水产城（苍南）', address: '浙江苍南县城建兴西路608号', province: '浙江', value: [120.38836000, 27.50192500], visualMap: false, newDate: '2020-08-15'},
-  {name: '山东省青岛市城阳蔬菜水产品批发市场有限公司', address: '青岛城阳区政府308国道西侧山东国际农展中心二楼信息科', province: '山东', value: [120.38249400, 36.30921600], visualMap: false, newDate: '2020-08-15'},
-  {name: '北京京丰岳各庄农副产品批发市场中心', address: '北京市丰台区西四环中路140号', province: '北京', value: [116.28465800, 39.88338100], visualMap: false, newDate: '2020-08-15'},
-  {name: '山西太原五龙口海鲜市场', address: '太原市敦化南路49号', province: '山西', value: [112.59758100, 37.88774100], visualMap: false, newDate: '2020-08-15'},
-  {name: '河北唐山市君瑞联合农贸市场有限公司', address: '河北省唐山市南新东道252号', province: '河北', value: [118.11221200, 39.65745100], visualMap: false, newDate: '2020-08-15'},
-  {name: '呼和浩特融桥海鲜批发市场', address: '大学东路与展东路路口', province: '内蒙古', value: [111.67110800, 40.83416600], visualMap: false, newDate: '2020-08-15'},
-  {name: '辽宁省东港黄海水产品市场', address: '东港市东港路98号', province: '辽宁', value: [124.15754500, 39.91121100], visualMap: false, newDate: '2020-08-15'},
-  {name: '辽宁省盘山县胡家河蟹市场', address: '盘山县胡家镇', province: '辽宁', value: [121.95696200, 41.29536400], visualMap: false, newDate: '2020-08-15'},
-  {name: '江苏凌家塘市场发展有限公司', address: '江苏省常州市武进区新312国道邹区段西侧', province: '江苏', value: [119.86913300, 31.78283700], visualMap: false, newDate: '2020-08-15'},
-  {name: '江苏省苏州市南环桥农副产品批发市场', address: '苏州市南环东路南环桥东堍', province: '江苏', value: [120.69496400, 31.26949400], visualMap: false, newDate: '2020-08-15'},
-  {name: '浙江省中国水产城(象山石浦)', address: '浙江省宁波市象山县石浦镇中国水产城管委会', province: '浙江', value: [121.91634400, 29.19378000], visualMap: false, newDate: '2020-08-15'},
-  {name: '浙江省慈溪农副产品批发市场', address: '慈溪市白沙街道东外环线东北侧（二楼财务室王群）', province: '浙江', value: [121.29022500, 30.17822100], visualMap: false, newDate: '2020-08-15'},
-  {name: '浙江省台州市华东水产品交易有限公司', address: '浙江省台州市椒江区工人西路998号（葭芷渔港内）', province: '浙江', value: [121.43639400, 28.68584300], visualMap: false, newDate: '2020-08-15'},
-  {name: '浙江省瑞安市瑞城水产品市场管理有限公司', address: '浙江省瑞安经济开发区滨江大道860号', province: '浙江', value: [120.65405100, 27.75456700], visualMap: false, newDate: '2020-08-15'},
-  {name: '大连盛兴水产品交易市场有限公司', address: '辽宁省大连市西岗区沿海街8号', province: '辽宁', value: [121.72472600, 39.02015600], visualMap: false, newDate: '2020-08-15'},
-  {name: '温州市水产批发交易市场', address: '温州市龙湾区海棠路与滨海四道交叉口西南50米', province: '浙江', value: [120.80459200, 27.83950300], visualMap: false, newDate: '2020-08-15'},
-  {name: '浙江省中国舟山国际水产城', address: '舟山市普陀区沈家门渔市大街1号5F', province: '浙江', value: [122.29109200, 29.94694100], visualMap: false, newDate: '2020-08-15'},
-  {name: '安徽省合肥市周谷堆水产品批发市场', address: '安徽省合肥市瑶海区大兴镇', province: '安徽', value: [117.39211600, 31.84919800], visualMap: false, newDate: '2020-08-15'},
-  {name: '河北省秦皇岛海港区天桥市场', address: '秦皇岛海港区', province: '河北', value: [119.61504900, 39.93687900], visualMap: false, newDate: '2020-08-15'},
-  {name: '北京大红门京深海鲜批发市场有限公司', address: '北京市丰台区石榴庄西街232号', province: '北京', value: [116.42196000, 39.84838000], visualMap: false, newDate: '2020-08-15'},
-  {name: '河北省石家庄雨润农产品全球采购有限公司', address: '石家庄南二环大桥', province: '河北', value: [114.50717400, 37.97755600], visualMap: false, newDate: '2020-08-15'},
-  {name: '辽宁省沈阳水产品批发市场', address: '沈阳水产品', province: '辽宁', value: [123.31391000, 41.78260900], visualMap: false, newDate: '2020-08-15'},
-  {name: '辽宁省前当堡鲜鱼批发市场', address: ' 无', province: '辽宁', value: [122.88651200, 41.78901000], visualMap: false, newDate: '2020-08-15'},
-  {name: '吉林省长春市光复路水产批发市场', address: '长春市光复路', province: '吉林', value: [125.34919600, 43.91155900], visualMap: false, newDate: '2020-08-15'},
-  {name: '吉林省延吉市西市场', address: '吉林省延边朝鲜族自治州延吉市解放路', province: '吉林', value: [129.51478200, 42.91275800], visualMap: false, newDate: '2020-08-15'},
-  {name: '上海东方国际水产中心经营管理有限公司', address: '上海东方国际水产中心', province: '上海', value: [121.54900500, 31.33938500], visualMap: false, newDate: '2020-08-15'},
-  {name: '安徽省安庆市皖宜季牛水产养殖有限责任公司长青大市场分公司', address: '安庆市华中路79号', province: '安徽', value: [117.079784, 30.513423], visualMap: false, newDate: '2020-08-15'},
-  {name: '安徽省蚌埠城南农副产品交易有限公司', address: '安徽省蚌埠', province: '安徽', value: [117.33269200, 32.89946300], visualMap: false, newDate: '2020-08-15'},
-  {name: '中国供销上饶农产品交易城', address: '江西省上饶市上饶县城南大道11号 ', province: '江西', value: [117.92193300, 28.39829100], visualMap: false, newDate: '2020-08-15'},
-  {name: '山东济南海鲜大市场', address: '济南市市中区小梁庄街277号', province: '山东', value: [116.99420600, 36.64910600], visualMap: false, newDate: '2020-08-15'},
-  {name: '长沙市马王堆农产品股份有限公司海鲜水产批发市场', address: '长沙市马王堆农产品股份有限公司', province: '湖南', value: [113.04102400, 28.20187700], visualMap: false, newDate: '2020-08-15'},
-  {name: '海南马井水产品交易市场管理有限公司', address: '海南马井', province: '海南', value: [109.22729200, 19.72200900], visualMap: false, newDate: '2020-08-15'},
-  {name: '重庆市乐邦水产品有限公司', address: '重庆沙坪坝区井口街道', province: '重庆', value: [106.48452800, 29.59447400], visualMap: false, newDate: '2020-08-15'},
-  {name: '重庆市龙门实业（集团）有限公司西三街农副水产品市场', address: '龙门实业（集团）有限公司西三街农副水产品市场', province: '重庆', value: [106.58898500, 29.56126400], visualMap: false, newDate: '2020-08-15'},
-  {name: '普洱天恒市场经营公司五一市场', address: '普洱天恒市场经营公司五一市场', province: '云南', value: [100.97417100, 22.79145600], visualMap: false, newDate: '2020-08-15'},
-  {name: '西安海隆实业有限责任公司（北二环水产批发中心）', address: '西安海隆实业有限责任公司（北二环水产批发中心）', province: '陕西', value: [108.95263000, 34.27420400], visualMap: false, newDate: '2020-08-15'},
-  {name: '甘肃省兰州市绿色食品市场', address: '兰州市绿色食品市场', province: '甘肃', value: [103.88351700, 36.06708900], visualMap: false, newDate: '2020-08-15'},
-  {name: '江苏省南京市众彩农副产品批发市场', address: '南京市', province: '江苏', value: [118.89382400, 31.99477500], visualMap: false, newDate: '2020-08-15'},
-  {name: '甘肃陇南市武都区体育场大市场', address: '陇南市武都区体育场', province: '甘肃', value: [104.967414, 33.373396], visualMap: false, newDate: '2020-08-15'},
-  {name: '白银市白银区文化路市场', address: '白银市白银区文化路', province: '甘肃', value: [104.184824, 36.554399], visualMap: false, newDate: '2020-08-15'},
-  {name: '张掖市南关蔬菜果品水产品批发市场', address: '张掖市南关饮马桥', province: '甘肃', value: [100.468753, 38.930773], visualMap: false, newDate: '2020-08-15'},
-  {name: '山东日照市石臼市场', address: '日照市石臼街道石臼路', province: '山东', value: [119.55451100, 35.39756900], visualMap: false, newDate: '2020-08-15'},
-  {name: '福建省莆田市闽中水产品批发市场', address: ' 福建省莆田市涵江区塘北路西侧', province: '福建', value: [119.11405600, 25.46307200], visualMap: false, newDate: '2020-08-15'},
-  {name: '攀枝花攀达水产批发市场有限公司', address: '攀枝花市东区银江镇沙坝村马家田', province: '四川', value: [104.07537900, 30.70897800], visualMap: false, newDate: '2020-08-15'},
-  {name: '重庆市涪陵区新大兴国际农产品批发市场', address: '重庆市涪陵区人民东路后街109号', province: '重庆', value: [107.40430500, 29.71266100], visualMap: false, newDate: '2020-08-15'},
-  {name: '江西省萍乡市城南水产批发市场', address: '萍乡市环城南路与萍麻公路交汇处', province: '江西', value: [113.85277800, 27.61884100], visualMap: false, newDate: '2020-08-15'},
-  {name: '上海江杨水产品批发市场经营管理有限公司', address: '上海市宝山区铁城路1555号', province: '上海', value: [121.458468, 31.361636], visualMap: false, newDate: '2020-08-15'},
-  {name: '湖北中和农产品大市场有限责任公司', address: '仙桃市黄金大道西段55号', province: '湖北', value: [113.41922500, 30.36607300], visualMap: false, newDate: '2020-08-15'},
-  {name: '湖州菱湖乌板桥水产品批发市场', address: '浙江省湖州市南浔区菱湖镇北桥浜路52号', province: '浙江', value: [120.16171900, 30.78536700], visualMap: false, newDate: '2020-08-15'},
-  {name: '辽宁省大连辽渔国际水产品市场', address: '辽宁省大连市甘井子区大连湾街8-136号', province: '辽宁', value: [121.70593400, 39.02742000], visualMap: false, newDate: '2020-08-15'},
-  {name: '广西南宁海陆丰水产品批发市场', address: ' 无', province: '广西', value: [120.65405100, 27.75456700], visualMap: false, newDate: '2020-08-15'},
-  {name: '云南华潮水产品批发市场', address: ' 无', province: '云南', value: [102.77981500, 24.97897700], visualMap: false, newDate: '2020-08-15'},
-  {name: '上海江阳水产品批发交易市场经营管理有限公司', address: '上海市宝山区泰和路1700号', province: '上海', value: [121.45575100, 31.36268000], visualMap: false, newDate: '2020-08-15'},
-  {name: '三亚崖州港湾投资有限公司', address: '海南省三亚市崖州区崖州中心渔港', province: '海南', value: [109.13429200, 18.36210000], visualMap: false, newDate: '2020-08-15'},
-  {name: '湖北宜昌三峡物流园有限公司水产市场', address: '伍家乡三峡物流园', province: '湖北', value: [11.39861700, 30.66971200], visualMap: false, newDate: '2020-08-15'},
-  {name: '海南海口水产品批发市场', address: '新埠路8号 ', province: '海南', value: [110.37419400, 20.07357500], visualMap: false, newDate: '2020-08-15'},
-  {name: '湖北黄冈硕源水产品批发市场', address: ' 无', province: '湖北', value: [114.89112300, 30.43404300], visualMap: false, newDate: '2020-08-15'},
-]
+// const mock = [
+//   {name: '浙江新农都物流中心（水产市场）', address: '杭州市石桥路115号', province: '浙江', value: [120.19706700, 30.24639100], visualMap: false, newDate: '2020-08-15'},
+//   {name: '厦门市水产品批发市场', address: '厦门市高崎北二路77-87号中埔水产批发市场', province: '福建', value: [118.11368800, 24.55107600], visualMap: false, newDate: '2020-08-15'},
+//   {name: '福建省兴业华洲（福建）农贸市场有限公司', address: '泉州晋江市池店镇仕春工业区新华洲水产市场', province: '福建', value: [118.55729200, 24.86104200], visualMap: false, newDate: '2020-08-15'},
+//   {name: '福建省三明市鲜活水产品批发市场', address: '三明市三元区白沙长安路34号', province: '福建', value: [117.61887900, 26.25029400], visualMap: false, newDate: '2020-08-15'},
+//   {name: '江西省九江鲜活水产品批发市场', address: '九江市庐峰路东端', province: '江西', value: [116.05598000, 29.75385500], visualMap: false, newDate: '2020-08-15'},
+//   {name: '江西南昌市水产品综合交易批发市场', address: '江西省南昌市东湖区富有路9号', province: '江西', value: [115.92204500, 28.71739100], visualMap: false, newDate: '2020-08-15'},
+//   {name: '山东省王尔庄海蜇批发市场', address: '山东省滨州市沾化县富桥路405号', province: '山东', value: [117.94507500, 37.75016700], visualMap: false, newDate: '2020-08-15'},
+//   {name: '山东省临沂市华东淡水鱼批发市场', address: '临沂市北园路6号', province: '山东', value: [118.34964500, 35.15801000], visualMap: false, newDate: '2020-08-15'},
+//   {name: '山东省威海水产品批发市场', address: '山东省威海市环翠区顺河街188号', province: '山东', value: [122.11957200, 37.50407200], visualMap: false, newDate: '2020-08-15'},
+//   {name: '河南省郑州市柳林水产批发市场', address: '郑州市金水区柳林镇郑花路北段柳林水产品批发市场', province: '河南', value: [113.69081200, 34.83705700], visualMap: false, newDate: '2020-08-15'},
+//   {name: '湖北省武汉市白沙洲农副产品大市场', address: '湖北省武汉市洪山区张家湾特1号', province: '湖北', value: [114.27418500, 30.47076800], visualMap: false, newDate: '2020-08-15'},
+//   {name: '湖北省孝感市南大水产品批发市场', address: '孝感市107国道与316国道交合处', province: '湖北', value: [113.97923200, 30.88929600], visualMap: false, newDate: '2020-08-15'},
+//   {name: '湖南洞庭渔都股份有限公司（岳阳洞庭水产批发市场）', address: '岳阳市楼区东风湖路78号', province: '湖南', value: [113.10916800, 29.39883800], visualMap: false, newDate: '2020-08-15'},
+//   {name: '广东省南海盐步环球水产交易市场', address: '佛山市南海区广佛公路平地路段', province: '广东', value: [113.16316200, 23.11600200], visualMap: false, newDate: '2020-08-15'},
+//   {name: '广东省汕头大洋水产交易市场', address: '汕头市海滨路33号', province: '广东', value: [116.71700700, 23.35911200], visualMap: false, newDate: '2020-08-15'},
+//   {name: '东莞市沿江富绅市场经营管理有限公司', address: '东莞市虎门镇沿江东路62号新洲水产品批发市场办公室', province: '广东', value: [113.67847800, 22.81675900], visualMap: false, newDate: '2020-08-15'},
+//   {name: '广州水产集团鱼市场经营管理有限公司', address: '广州市荔湾区芳村招村70亩商业区', province: '广东', value: [113.26457300, 23.14327900], visualMap: false, newDate: '2020-08-15'},
+//   {name: '广东省江门水产（咸鱼）批发市场', address: '江门市江会路70号', province: '广东', value: [113.08075600, 22.56740300], visualMap: false, newDate: '2020-08-15'},
+//   {name: '广西北海市外沙水产品批发市场', address: '广西北海市合浦县廉州镇爱卫街二巷2号', province: '广西', value: [109.21357100, 21.66720800], visualMap: false, newDate: '2020-08-15'},
+//   {name: '四川省内江市水产批发市场', address: '四川省内江市中区牌楼路313号', province: '四川', value: [105.07417600, 29.57049200], visualMap: false, newDate: '2020-08-15'},
+//   {name: '福州名成水产品市场有限公司', address: '福州市马尾区青洲路66号', province: '福建', value: [119.47893300, 25.99550200], visualMap: false, newDate: '2020-08-15'},
+//   {name: '四川成都农产品中心批发市水产分场', address: '成都市西航港成白路98号', province: '四川', value: [104.07537900, 30.70897800], visualMap: false, newDate: '2020-08-15'},
+//   {name: '乌鲁木齐北园春果业经营有限责任公司', address: '新疆乌鲁木齐市沙依巴克区克拉玛依西街1168号北园春农产品批发市场B4-4-1-9号', province: '新疆', value: [87.58357400, 43.82808700], visualMap: false, newDate: '2020-08-15'},
+//   {name: '浙江省温州浙福边贸水产城（苍南）', address: '浙江苍南县城建兴西路608号', province: '浙江', value: [120.38836000, 27.50192500], visualMap: false, newDate: '2020-08-15'},
+//   {name: '山东省青岛市城阳蔬菜水产品批发市场有限公司', address: '青岛城阳区政府308国道西侧山东国际农展中心二楼信息科', province: '山东', value: [120.38249400, 36.30921600], visualMap: false, newDate: '2020-08-15'},
+//   {name: '北京京丰岳各庄农副产品批发市场中心', address: '北京市丰台区西四环中路140号', province: '北京', value: [116.28465800, 39.88338100], visualMap: false, newDate: '2020-08-15'},
+//   {name: '山西太原五龙口海鲜市场', address: '太原市敦化南路49号', province: '山西', value: [112.59758100, 37.88774100], visualMap: false, newDate: '2020-08-15'},
+//   {name: '河北唐山市君瑞联合农贸市场有限公司', address: '河北省唐山市南新东道252号', province: '河北', value: [118.11221200, 39.65745100], visualMap: false, newDate: '2020-08-15'},
+//   {name: '呼和浩特融桥海鲜批发市场', address: '大学东路与展东路路口', province: '内蒙古', value: [111.67110800, 40.83416600], visualMap: false, newDate: '2020-08-15'},
+//   {name: '辽宁省东港黄海水产品市场', address: '东港市东港路98号', province: '辽宁', value: [124.15754500, 39.91121100], visualMap: false, newDate: '2020-08-15'},
+//   {name: '辽宁省盘山县胡家河蟹市场', address: '盘山县胡家镇', province: '辽宁', value: [121.95696200, 41.29536400], visualMap: false, newDate: '2020-08-15'},
+//   {name: '江苏凌家塘市场发展有限公司', address: '江苏省常州市武进区新312国道邹区段西侧', province: '江苏', value: [119.86913300, 31.78283700], visualMap: false, newDate: '2020-08-15'},
+//   {name: '江苏省苏州市南环桥农副产品批发市场', address: '苏州市南环东路南环桥东堍', province: '江苏', value: [120.69496400, 31.26949400], visualMap: false, newDate: '2020-08-15'},
+//   {name: '浙江省中国水产城(象山石浦)', address: '浙江省宁波市象山县石浦镇中国水产城管委会', province: '浙江', value: [121.91634400, 29.19378000], visualMap: false, newDate: '2020-08-15'},
+//   {name: '浙江省慈溪农副产品批发市场', address: '慈溪市白沙街道东外环线东北侧（二楼财务室王群）', province: '浙江', value: [121.29022500, 30.17822100], visualMap: false, newDate: '2020-08-15'},
+//   {name: '浙江省台州市华东水产品交易有限公司', address: '浙江省台州市椒江区工人西路998号（葭芷渔港内）', province: '浙江', value: [121.43639400, 28.68584300], visualMap: false, newDate: '2020-08-15'},
+//   {name: '浙江省瑞安市瑞城水产品市场管理有限公司', address: '浙江省瑞安经济开发区滨江大道860号', province: '浙江', value: [120.65405100, 27.75456700], visualMap: false, newDate: '2020-08-15'},
+//   {name: '大连盛兴水产品交易市场有限公司', address: '辽宁省大连市西岗区沿海街8号', province: '辽宁', value: [121.72472600, 39.02015600], visualMap: false, newDate: '2020-08-15'},
+//   {name: '温州市水产批发交易市场', address: '温州市龙湾区海棠路与滨海四道交叉口西南50米', province: '浙江', value: [120.80459200, 27.83950300], visualMap: false, newDate: '2020-08-15'},
+//   {name: '浙江省中国舟山国际水产城', address: '舟山市普陀区沈家门渔市大街1号5F', province: '浙江', value: [122.29109200, 29.94694100], visualMap: false, newDate: '2020-08-15'},
+//   {name: '安徽省合肥市周谷堆水产品批发市场', address: '安徽省合肥市瑶海区大兴镇', province: '安徽', value: [117.39211600, 31.84919800], visualMap: false, newDate: '2020-08-15'},
+//   {name: '河北省秦皇岛海港区天桥市场', address: '秦皇岛海港区', province: '河北', value: [119.61504900, 39.93687900], visualMap: false, newDate: '2020-08-15'},
+//   {name: '北京大红门京深海鲜批发市场有限公司', address: '北京市丰台区石榴庄西街232号', province: '北京', value: [116.42196000, 39.84838000], visualMap: false, newDate: '2020-08-15'},
+//   {name: '河北省石家庄雨润农产品全球采购有限公司', address: '石家庄南二环大桥', province: '河北', value: [114.50717400, 37.97755600], visualMap: false, newDate: '2020-08-15'},
+//   {name: '辽宁省沈阳水产品批发市场', address: '沈阳水产品', province: '辽宁', value: [123.31391000, 41.78260900], visualMap: false, newDate: '2020-08-15'},
+//   {name: '辽宁省前当堡鲜鱼批发市场', address: ' 无', province: '辽宁', value: [122.88651200, 41.78901000], visualMap: false, newDate: '2020-08-15'},
+//   {name: '吉林省长春市光复路水产批发市场', address: '长春市光复路', province: '吉林', value: [125.34919600, 43.91155900], visualMap: false, newDate: '2020-08-15'},
+//   {name: '吉林省延吉市西市场', address: '吉林省延边朝鲜族自治州延吉市解放路', province: '吉林', value: [129.51478200, 42.91275800], visualMap: false, newDate: '2020-08-15'},
+//   {name: '上海东方国际水产中心经营管理有限公司', address: '上海东方国际水产中心', province: '上海', value: [121.54900500, 31.33938500], visualMap: false, newDate: '2020-08-15'},
+//   {name: '安徽省安庆市皖宜季牛水产养殖有限责任公司长青大市场分公司', address: '安庆市华中路79号', province: '安徽', value: [117.079784, 30.513423], visualMap: false, newDate: '2020-08-15'},
+//   {name: '安徽省蚌埠城南农副产品交易有限公司', address: '安徽省蚌埠', province: '安徽', value: [117.33269200, 32.89946300], visualMap: false, newDate: '2020-08-15'},
+//   {name: '中国供销上饶农产品交易城', address: '江西省上饶市上饶县城南大道11号 ', province: '江西', value: [117.92193300, 28.39829100], visualMap: false, newDate: '2020-08-15'},
+//   {name: '山东济南海鲜大市场', address: '济南市市中区小梁庄街277号', province: '山东', value: [116.99420600, 36.64910600], visualMap: false, newDate: '2020-08-15'},
+//   {name: '长沙市马王堆农产品股份有限公司海鲜水产批发市场', address: '长沙市马王堆农产品股份有限公司', province: '湖南', value: [113.04102400, 28.20187700], visualMap: false, newDate: '2020-08-15'},
+//   {name: '海南马井水产品交易市场管理有限公司', address: '海南马井', province: '海南', value: [109.22729200, 19.72200900], visualMap: false, newDate: '2020-08-15'},
+//   {name: '重庆市乐邦水产品有限公司', address: '重庆沙坪坝区井口街道', province: '重庆', value: [106.48452800, 29.59447400], visualMap: false, newDate: '2020-08-15'},
+//   {name: '重庆市龙门实业（集团）有限公司西三街农副水产品市场', address: '龙门实业（集团）有限公司西三街农副水产品市场', province: '重庆', value: [106.58898500, 29.56126400], visualMap: false, newDate: '2020-08-15'},
+//   {name: '普洱天恒市场经营公司五一市场', address: '普洱天恒市场经营公司五一市场', province: '云南', value: [100.97417100, 22.79145600], visualMap: false, newDate: '2020-08-15'},
+//   {name: '西安海隆实业有限责任公司（北二环水产批发中心）', address: '西安海隆实业有限责任公司（北二环水产批发中心）', province: '陕西', value: [108.95263000, 34.27420400], visualMap: false, newDate: '2020-08-15'},
+//   {name: '甘肃省兰州市绿色食品市场', address: '兰州市绿色食品市场', province: '甘肃', value: [103.88351700, 36.06708900], visualMap: false, newDate: '2020-08-15'},
+//   {name: '江苏省南京市众彩农副产品批发市场', address: '南京市', province: '江苏', value: [118.89382400, 31.99477500], visualMap: false, newDate: '2020-08-15'},
+//   {name: '甘肃陇南市武都区体育场大市场', address: '陇南市武都区体育场', province: '甘肃', value: [104.967414, 33.373396], visualMap: false, newDate: '2020-08-15'},
+//   {name: '白银市白银区文化路市场', address: '白银市白银区文化路', province: '甘肃', value: [104.184824, 36.554399], visualMap: false, newDate: '2020-08-15'},
+//   {name: '张掖市南关蔬菜果品水产品批发市场', address: '张掖市南关饮马桥', province: '甘肃', value: [100.468753, 38.930773], visualMap: false, newDate: '2020-08-15'},
+//   {name: '山东日照市石臼市场', address: '日照市石臼街道石臼路', province: '山东', value: [119.55451100, 35.39756900], visualMap: false, newDate: '2020-08-15'},
+//   {name: '福建省莆田市闽中水产品批发市场', address: ' 福建省莆田市涵江区塘北路西侧', province: '福建', value: [119.11405600, 25.46307200], visualMap: false, newDate: '2020-08-15'},
+//   {name: '攀枝花攀达水产批发市场有限公司', address: '攀枝花市东区银江镇沙坝村马家田', province: '四川', value: [104.07537900, 30.70897800], visualMap: false, newDate: '2020-08-15'},
+//   {name: '重庆市涪陵区新大兴国际农产品批发市场', address: '重庆市涪陵区人民东路后街109号', province: '重庆', value: [107.40430500, 29.71266100], visualMap: false, newDate: '2020-08-15'},
+//   {name: '江西省萍乡市城南水产批发市场', address: '萍乡市环城南路与萍麻公路交汇处', province: '江西', value: [113.85277800, 27.61884100], visualMap: false, newDate: '2020-08-15'},
+//   {name: '上海江杨水产品批发市场经营管理有限公司', address: '上海市宝山区铁城路1555号', province: '上海', value: [121.458468, 31.361636], visualMap: false, newDate: '2020-08-15'},
+//   {name: '湖北中和农产品大市场有限责任公司', address: '仙桃市黄金大道西段55号', province: '湖北', value: [113.41922500, 30.36607300], visualMap: false, newDate: '2020-08-15'},
+//   {name: '湖州菱湖乌板桥水产品批发市场', address: '浙江省湖州市南浔区菱湖镇北桥浜路52号', province: '浙江', value: [120.16171900, 30.78536700], visualMap: false, newDate: '2020-08-15'},
+//   {name: '辽宁省大连辽渔国际水产品市场', address: '辽宁省大连市甘井子区大连湾街8-136号', province: '辽宁', value: [121.70593400, 39.02742000], visualMap: false, newDate: '2020-08-15'},
+//   {name: '广西南宁海陆丰水产品批发市场', address: ' 无', province: '广西', value: [120.65405100, 27.75456700], visualMap: false, newDate: '2020-08-15'},
+//   {name: '云南华潮水产品批发市场', address: ' 无', province: '云南', value: [102.77981500, 24.97897700], visualMap: false, newDate: '2020-08-15'},
+//   {name: '上海江阳水产品批发交易市场经营管理有限公司', address: '上海市宝山区泰和路1700号', province: '上海', value: [121.45575100, 31.36268000], visualMap: false, newDate: '2020-08-15'},
+//   {name: '三亚崖州港湾投资有限公司', address: '海南省三亚市崖州区崖州中心渔港', province: '海南', value: [109.13429200, 18.36210000], visualMap: false, newDate: '2020-08-15'},
+//   {name: '湖北宜昌三峡物流园有限公司水产市场', address: '伍家乡三峡物流园', province: '湖北', value: [11.39861700, 30.66971200], visualMap: false, newDate: '2020-08-15'},
+//   {name: '海南海口水产品批发市场', address: '新埠路8号 ', province: '海南', value: [110.37419400, 20.07357500], visualMap: false, newDate: '2020-08-15'},
+//   {name: '湖北黄冈硕源水产品批发市场', address: ' 无', province: '湖北', value: [114.89112300, 30.43404300], visualMap: false, newDate: '2020-08-15'},
+// ]
 const provinceData = [
-  { name: '北京', value: 177 },
-  { name: '天津', value: 42 },
-  { name: '河北', value: 102 },
-  { name: '山西', value: 81 },
-  { name: '内蒙古', value: 17 },
-  { name: '辽宁', value: 67 },
-  { name: '吉林', value: 182 },
-  { name: '黑龙江', value: 100 },
-  { name: '上海', value: 24 },
-  { name: '江苏', value: 299 },
-  { name: '浙江', value: 114 },
-  { name: '安徽', value: 29 },
-  { name: '福建', value: 316 },
-  { name: '江西', value: 91 },
-  { name: '山东', value: 19 },
-  { name: '河南', value: 137 },
-  { name: '湖北', value: 26 },
-  { name: '湖南', value: 114 },
-  { name: '重庆', value: 91 },
-  { name: '四川', value: 25 },
-  { name: '贵州', value: 62 },
-  { name: '云南', value: 83 },
-  { name: '西藏', value: 9 },
-  { name: '陕西', value: 80 },
-  { name: '甘肃', value: 256 },
-  { name: '青海', value: 10 },
-  { name: '宁夏', value: 18 },
-  { name: '新疆', value: 67 },
-  { name: '广东', value: 123 },
-  { name: '广西', value: 59 },
-  { name: '海南', value: 14 }
-
+  { name: '北京', value: 0, lake: 0, water: 0, pond: 0, lab: 0, sea: 0, workshop: 0 },
+  { name: '天津', value: 2, lake: 310, water: 540.4, pond: 164.9, lab: 2.6, sea: 430.3, workshop: 165.8 },
+  { name: '河北', value: 2, lake: 653, water: 0, pond: 674.3, lab: 2.4, sea: 1236.5, workshop: 429.4 },
+  { name: '山西', value: 0, lake: 0, water: 0, pond: 0, lab: 0, sea: 0, workshop: 0 },
+  { name: '内蒙古', value: 1, lake: 102, water: 23.8, pond: 0, lab: 5.6, sea: 0, workshop: 0 },
+  { name: '辽宁', value: 2, lake: 996, water: 0, pond: 314.6, lab: 7.2, sea: 457.2, workshop: 24.6 },
+  { name: '吉林', value: 4, lake: 320.4, water: 0, pond: 2480, lab: 0.5, sea: 0, workshop: 0 },
+  { name: '黑龙江', value: 2, lake: 1021, water: 0, pond: 0, lab: 0, sea: 0, workshop: 64.2 },
+  { name: '上海', value: 1, lake: 0, water: 0, pond: 213.5, lab: 0, sea: 0, workshop: 0 },
+  { name: '江苏', value: 3, lake: 2134, water: 0, pond: 554.5, lab: 35.2, sea: 2346.1, workshop: 1320.5 },
+  { name: '浙江', value: 9, lake: 3650, water: 443.7, pond: 2670.5, lab: 21, sea: 2321.5, workshop: 2107.7 },
+  { name: '安徽', value: 5, lake: 2490, water: 0, pond: 43.7, lab: 14.6, sea: 0, workshop: 61.5 },
+  { name: '福建', value: 6, lake: 760, water: 0, pond: 3720, lab: 13.1, sea: 2301.5, workshop: 1653.2 },
+  { name: '江西', value: 3, lake: 2467, water: 0, pond: 1860, lab: 8.4, sea: 0, workshop: 36.9 },
+  { name: '山东', value: 10, lake: 1043, water: 450.5, pond: 957.3, lab: 14.1, sea: 0, workshop: 123 },
+  { name: '河南', value: 2, lake: 432, water: 0, pond: 376.7, lab: 0, sea: 0, workshop: 324.2 },
+  { name: '湖北', value: 4, lake: 468.6, water: 0, pond: 457.3, lab: 3.6, sea: 0, workshop: 49.2 },
+  { name: '湖南', value: 6, lake: 678.4, water: 232, pond: 545.8, lab: 4.3, sea: 0, workshop: 73.8 },
+  { name: '广东', value: 24, lake: 302, water: 0, pond: 1034.2, lab: 34.5, sea: 19450, workshop: 2143.7 },
+  { name: '广西', value: 7, lake: 432, water: 0, pond: 54.8, lab: 35.9, sea: 102.4, workshop: 86.1 },
+  { name: '海南', value: 1, lake: 0, water: 0, pond: 640.3, lab: 34.6, sea: 237.1, workshop: 423.6 },
+  { name: '重庆', value: 1, lake: 498, water: 0, pond: 620, lab: 0, sea: 0, workshop: 0 },
+  { name: '四川', value: 3, lake: 54.3, water: 0, pond: 56.4, lab: 0, sea: 0, workshop: 36.9 },
+  { name: '贵州', value: 2, lake: 974.2, water: 0, pond: 0, lab: 0, sea: 0, workshop: 24.6 },
+  { name: '云南', value: 1, lake: 0, water: 0, pond: 0, lab: 0, sea: 0, workshop: 53.3 },
+  { name: '陕西', value: 2, lake: 979.4, water: 0, pond: 0, lab: 0, sea: 0, workshop: 67.9 },
+  { name: '甘肃', value: 2, lake: 30, water: 0, pond: 0, lab: 0, sea: 0, workshop: 42.2 },
+  { name: '青海', value: 1, lake: 12.1, water: 0, pond: 0, lab: 3.1, sea: 0, workshop: 0 },
+  { name: '宁夏', value: 0, lake: 0, water: 0, pond: 0, lab: 0, sea: 0, workshop: 43.6 },
+  { name: '新疆', value: 3, lake: 304.6, water: 0, pond: 0, lab: 3.5, sea: 0, workshop: 46.2 },
+  { name: '西藏', value: 0, lake: 0, water: 0, pond: 0, lab: 3.5, sea: 0, workshop: 46.2},
+]
+const provinceDetail = [
+  {name: '靖江市滨江水产良种场', address: '江苏省泰州市靖江市新桥镇滨江1队', value: [120.089264, 31.995682], visualMap: false},
+  {name: '泰兴市水产良种场', address: '江苏省泰州市海陵区水产路西', value: [119.97644, 32.548828], visualMap: false},
+  {name: '泰州水产养殖场', address: '江苏省泰州市海陵区红旗街道兴泰北路泰州碧桂园东300米', value: [119.948784, 32.546982], visualMap: false},
+  {name: '兴化市良种场', address: '江苏省泰州市兴化市林湖乡大周公路', value: [120.006472, 32.999764], visualMap: false},
+  {name: '春江特种水产养殖场', address: '江苏省泰州市泰兴市虹桥镇', value: [120.006472, 32.999764], visualMap: false},
+  {name: '兴化市荣義水产养殖有限公司', address: '江苏省兴化市钓鱼镇南芙蓉村', value: [119.916975, 33.090281], visualMap: false},
+  {name: '兴化鑫胜水产品交易有限公司', address: '江苏省泰州市兴化市周庄镇工业区S23', value: [119.906918, 32.726797], visualMap: false},
 ]
 const provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan']
 const provinceText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾']
@@ -170,14 +178,14 @@ export default {
             return `
               <div class="map-tooltip-info">
                 <h3>${data.name}</h3>
-                <p><span>良种场个数：</span>154,878个</p>
+                <p><span>良种场个数：</span>${data.value}个</p>
                 <p><span>面积：</span><br/>
-                  湖泊（4,867亩)&nbsp;&nbsp;
-                  水域（4,867亩）<br/>
-                  池塘（4,867亩）
-                  实验室（4,867亩）<br/>
-                  海域（4,867亩)&nbsp;&nbsp;
-                  生产车间（4,867亩）<br/>
+                  湖泊（${this.$com.transNumber(data.lake)}亩)&nbsp;&nbsp;
+                  水域（${this.$com.transNumber(data.water)}亩）<br/>
+                  池塘（${this.$com.transNumber(data.pond)}亩）
+                  实验室（${this.$com.transNumber(data.lab)}亩）<br/>
+                  海域（${this.$com.transNumber(data.see)}亩)&nbsp;&nbsp;
+                  生产车间（${this.$com.transNumber(data.workshop)}亩）<br/>
                 </p>
               </div>
             `
@@ -188,7 +196,10 @@ export default {
     visualConfig: {
       type: Object,
       default() {
-        return {}
+        return {
+          min: 0,
+          max: 24,
+        }
       }
     },
   },
@@ -259,7 +270,8 @@ export default {
       }, {
         type: 'scatter', // series图表类型
         coordinateSystem: 'geo', // series坐标系类型
-        data: mock,
+        // data: mock,
+        data: provinceDetail,
         itemStyle: {
           color: 'gold'
         },
@@ -270,6 +282,7 @@ export default {
       this.config.tooltip = {
         trigger: 'item',
         formatter: this.visualFormatter,
+        confine: true,
         // extraCssText: `background-image:url(${require('@/assets/images/tooltip.png')});background-size:cover;`,
       }
       this.config.visualMap = Object.assign({
@@ -316,7 +329,29 @@ export default {
           },
           regions: [],
         },
-        series: []
+        tooltip: {
+          trigger: 'item',
+          confine: true,
+          formatter: ({data}) => {
+            return `
+              <div class="map-tooltip-info">
+                <h3>${data.name}</h3>
+                <p><span>地址：</span>${data.address}</p>
+              </div>
+            `
+          },
+        },
+        series: [{
+          type: 'scatter', // series图表类型
+          coordinateSystem: 'geo', // series坐标系类型
+          data: name === '江苏' ? provinceDetail : [],
+          itemStyle: {
+            color: 'gold'
+          },
+          symbolSize: 20 * this.sizeRate,
+          symbol: 'pin',
+          geoIndex: 0,
+        }],
       }
       this.map.setOption(config)
     },
@@ -326,7 +361,7 @@ export default {
           this.$emit('select', name)
           this.curProvince = name
           this.loadMapSource(name)
-        } else if(mock.some(item => item.name === name)) {
+        } else if(provinceDetail.some(item => item.name === name)) {
           this.$emit('choice', name)
         }
       })
@@ -338,7 +373,7 @@ export default {
 <style lang="stylus" scoped>
 .map-wrapper
   width 50%
-  height 100%
+  height 95%
   padding-top 3rem
   position absolute
   left 25%

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

@@ -3,13 +3,13 @@
     <div v-for="item in list" :key="item.name">
       <p>
         <img :src="require(`@/assets/images/${getStatus(item.status).icon}`)"/>
-        设备名称：{{item.name}}
+        设备：{{item.name}}
       </p>
       <p>
         <span :style="`background:${getStatus(item.status).color}`"></span>
         状态：{{getStatus(item.status).txt}}
       </p>
-      <span :class="item.status === 1 ? 'on' : ''">禁用</span>
+      <span @click="item.status = (item.status === 1 ? 0 : 1)" :class="item.status === 1 ? 'on' : ''">{{item.status === 1 ? '禁用' : '启用'}}</span>
     </div>
   </div>
 </template>
@@ -20,10 +20,11 @@ export default {
   data() {
     return {
       list: [
-        {name: '1号塘', status: 0},
-        {name: '2号塘', status: 1},
-        {name: '3号塘', status: 0},
-        {name: '4号塘', status: 2},
+        {name: '4号塘增氧机', status: 1},
+        {name: '1号塘投饲机', status: 1},
+        {name: '进水口水泵', status: 0},
+        {name: '5号塘增氧机', status: 1},
+        {name: '3号搪投饲机', status: 1},
       ]
     }
   },
@@ -69,6 +70,7 @@ export default {
     p
       display flex
       align-items center
+      flex 1.2
       &:nth-child(2)
         margin-left 1rem
         flex 1
@@ -83,13 +85,14 @@ export default {
         border-radius 50%
         margin-right .5rem
     >span
-      padding .1rem .7rem
+      padding 0 .5rem
       border-radius 1.2rem
       background #999
       font-weight bold
       cursor pointer
       align-self end
       border .1rem solid #999
+      font-size .9rem
       &.on,
       &:hover
         border .1rem solid $edgeColor

src/views/components/seedling/tail-water.vue

 <template>
   <div class="tail-water">
-    <p>采集时间：2020-08-23 14:09:11</p>
+    <p>采集时间：2020-08-21 10:24:11</p>
     <div class="wrapper">
       <div v-for="item in list" :key="item.name">
         <i-circle
@@ -24,9 +24,9 @@ export default {
   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'},
+        {name: '总磷', value: 93.6, color: '#4ec6fd', count: '3.12mg/L'},
+        {name: '总氮', value: 92.1, color: '#40fdfc', count: '0.48mg/L'},
+        {name: 'COD', value: 88.3, color: '#9375fd', count: '9.24mg/L'},
       ]
     }
   },

src/views/components/seedling/trend.vue

 <template>
   <div class="trend">
-    <Select class="select" value="南美白对虾" transfer>
-      <Option v-for="item in ['南美白对虾']" :key="item" :value="item">{{item}}</Option>
+    <Select class="select" v-model="type" @on-change="setChart" transfer>
+      <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
     </Select>
     <div class="chart" v-if="showChart">
       <p><span/>价格趋势</p>
@@ -21,10 +21,112 @@
 </template>
 
 <script>
+const mockPrice = [
+  {type: '青鱼', name: '2019.12', value: 16},
+  {type: '罗氏沼虾', name: '2019.12', value: 56},
+  {type: '中华绒螯蟹', name: '2019.12', value: 74},
+  {type: '克氏原螯虾', name: '2019.12', value: 40},
+  {type: '青鱼', name: '2020.01', value: 15},
+  {type: '罗氏沼虾', name: '2020.01', value: 52},
+  {type: '中华绒螯蟹', name: '2020.01', value: 76},
+  {type: '克氏原螯虾', name: '2020.01', value: 50},
+  {type: '青鱼', name: '2020.02', value: 14},
+  {type: '罗氏沼虾', name: '2020.02', value: 50.5},
+  {type: '中华绒螯蟹', name: '2020.02', value: 75},
+  {type: '克氏原螯虾', name: '2020.02', value: 55},
+  {type: '青鱼', name: '2020.03', value: 15},
+  {type: '罗氏沼虾', name: '2020.03', value: 48},
+  {type: '中华绒螯蟹', name: '2020.03', value: 61},
+  {type: '克氏原螯虾', name: '2020.03', value: 58},
+  {type: '青鱼', name: '2020.04', value: 16},
+  {type: '罗氏沼虾', name: '2020.04', value: 47},
+  {type: '中华绒螯蟹', name: '2020.04', value: 59},
+  {type: '克氏原螯虾', name: '2020.04', value: 50},
+  {type: '青鱼', name: '2020.05', value: 15},
+  {type: '罗氏沼虾', name: '2020.05', value: 48},
+  {type: '中华绒螯蟹', name: '2020.05', value: 61},
+  {type: '克氏原螯虾', name: '2020.05', value: 38},
+  {type: '青鱼', name: '2020.06', value: 15},
+  {type: '罗氏沼虾', name: '2020.06', value: 45.5},
+  {type: '中华绒螯蟹', name: '2020.06', value: 63},
+  {type: '克氏原螯虾', name: '2020.06', value: 35},
+  {type: '青鱼', name: '2020.07', value: 14},
+  {type: '罗氏沼虾', name: '2020.07', value: 45.5},
+  {type: '中华绒螯蟹', name: '2020.07', value: 63},
+  {type: '克氏原螯虾', name: '2020.07', value: 35},
+  {type: '青鱼', name: '2020.08', value: 15},
+  {type: '罗氏沼虾', name: '2020.08', value: 45},
+  {type: '中华绒螯蟹', name: '2020.08', value: 63},
+  {type: '克氏原螯虾', name: '2020.08', value: 35},
+  {type: '青鱼', name: '2020.09', value: 16},
+  {type: '罗氏沼虾', name: '2020.09', value: 45.5},
+  {type: '中华绒螯蟹', name: '2020.09', value: 63},
+  {type: '克氏原螯虾', name: '2020.09', value: 35},
+  {type: '青鱼', name: '2020.10', value: 14},
+  {type: '罗氏沼虾', name: '2020.10', value: 46},
+  {type: '中华绒螯蟹', name: '2020.10', value: 65},
+  {type: '克氏原螯虾', name: '2020.10', value: 36},
+  {type: '青鱼', name: '2020.11', value: 15},
+  {type: '罗氏沼虾', name: '2020.11', value: 45},
+  {type: '中华绒螯蟹', name: '2020.11', value: 68},
+  {type: '克氏原螯虾', name: '2020.11', value: 38},
+]
+const mockProduct = [
+  {type: '青鱼', name: '2019.12', value: 16.8},
+  {type: '罗氏沼虾', name: '2019.12', value: 15.7},
+  {type: '中华绒螯蟹', name: '2019.12', value: 15.2},
+  {type: '克氏原螯虾', name: '2019.12', value: 23.9},
+  {type: '青鱼', name: '2020.01', value: 15.7},
+  {type: '罗氏沼虾', name: '2020.01', value: 19.8},
+  {type: '中华绒螯蟹', name: '2020.01', value: 14.8},
+  {type: '克氏原螯虾', name: '2020.01', value: 16.3},
+  {type: '青鱼', name: '2020.02', value: 15.9},
+  {type: '罗氏沼虾', name: '2020.02', value: 19.3},
+  {type: '中华绒螯蟹', name: '2020.02', value: 12.8},
+  {type: '克氏原螯虾', name: '2020.02', value: 20.5},
+  {type: '青鱼', name: '2020.03', value: 38.7},
+  {type: '罗氏沼虾', name: '2020.03', value: 30.1},
+  {type: '中华绒螯蟹', name: '2020.03', value: 15.7},
+  {type: '克氏原螯虾', name: '2020.03', value: 35.4},
+  {type: '青鱼', name: '2020.04', value: 39.6},
+  {type: '罗氏沼虾', name: '2020.04', value: 48.9},
+  {type: '中华绒螯蟹', name: '2020.04', value: 17.2},
+  {type: '克氏原螯虾', name: '2020.04', value: 49.3},
+  {type: '青鱼', name: '2020.05', value: 55.9},
+  {type: '罗氏沼虾', name: '2020.05', value: 50.4},
+  {type: '中华绒螯蟹', name: '2020.05', value: 2.2},
+  {type: '克氏原螯虾', name: '2020.05', value: 86.2},
+  {type: '青鱼', name: '2020.06', value: 57.8},
+  {type: '罗氏沼虾', name: '2020.06', value: 52.9},
+  {type: '中华绒螯蟹', name: '2020.06', value: 2.1},
+  {type: '克氏原螯虾', name: '2020.06', value: 79.8},
+  {type: '青鱼', name: '2020.07', value: 61.2},
+  {type: '罗氏沼虾', name: '2020.07', value: 60.1},
+  {type: '中华绒螯蟹', name: '2020.07', value: 2.3},
+  {type: '克氏原螯虾', name: '2020.07', value: 67.6},
+  {type: '青鱼', name: '2020.08', value: 68.8},
+  {type: '罗氏沼虾', name: '2020.08', value: 68.9},
+  {type: '中华绒螯蟹', name: '2020.08', value: 1.9},
+  {type: '克氏原螯虾', name: '2020.08', value: 62.1},
+  {type: '青鱼', name: '2020.09', value: 70.7},
+  {type: '罗氏沼虾', name: '2020.09', value: 60.2},
+  {type: '中华绒螯蟹', name: '2020.09', value: 6.5},
+  {type: '克氏原螯虾', name: '2020.09', value: 59.6},
+  {type: '青鱼', name: '2020.10', value: 68.5},
+  {type: '罗氏沼虾', name: '2020.10', value: 59.8},
+  {type: '中华绒螯蟹', name: '2020.10', value: 12.8},
+  {type: '克氏原螯虾', name: '2020.10', value: 40.2},
+  {type: '青鱼', name: '2020.11', value: 71.7},
+  {type: '罗氏沼虾', name: '2020.11', value: 59.5},
+  {type: '中华绒螯蟹', name: '2020.11', value: 16.3},
+  {type: '克氏原螯虾', name: '2020.11', value: 27.6},
+]
 export default {
   name: 'Trend',
   data() {
     return {
+      type: '青鱼',
+      options: ['青鱼', '罗氏沼虾', '中华绒螯蟹', '克氏原螯虾'],
       showChart: false,
       config: {
         colors: [['rgba(248,199,22,1)', 'rgba(248,199,22,0.2)']],
@@ -38,20 +140,7 @@ export default {
           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},
-      ],
+      data: [],
       config2: {
         colors: [['rgba(220,66,69,1)', 'rgba(220,66,69,0.2)']],
         legend: {
@@ -64,20 +153,7 @@ export default {
           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},
-      ],
+      data2: [],
       xAxis: {
         axisLabel: {
           rotate: 45,
@@ -92,6 +168,13 @@ export default {
   },
   mounted() {
     setTimeout(() => this.showChart = true, 0)
+    this.$nextTick(() => this.setChart(this.type))
+  },
+  methods: {
+    setChart(type) {
+      this.data = mockPrice.filter(item => item.type === type)
+      this.data2 = mockProduct.filter(item => item.type === type)
+    }
   }
 }
 </script>

src/views/components/seedling/water-test.vue

 <template>
   <div class="water-test">
-    <p>采集时间：2020-08-23 14:09:01</p>
+    <Select class="custom-select" value="塘口1" transfer>
+      <Option v-for="item in ['塘口1', '塘口2', '塘口3']" :key="item" :value="item">{{item}}</Option>
+    </Select>
+    <p>采集时间：2020-08-21 15:15:00</p>
     <div class="wrapper">
       <div v-for="item in list" :key="item.name">
         <img :src="require(`@/assets/images/${item.src}`)"/>
@@ -8,7 +11,7 @@
         <p>{{item.value}}</p>
       </div>
     </div>
-    <p>历史数据 >>></p>
+    <!-- <p>历史数据 >>></p> -->
   </div>
 </template>
 
@@ -18,9 +21,9 @@ export default {
   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'},
+        {name: 'PH值', value: 7.65, src: 'icon1.png'},
+        {name: '温度', value: '32.4℃', src: 'icon2.png'},
+        {name: '溶氧量', value: '6.86mg/L', src: 'icon3.png'},
       ]
     }
   },

src/views/components/seedling/weather.vue

 <template>
   <div class="weather">
-    <p>采集时间：2020-08-23 14:08:23</p>
+    <p>采集时间：2020-08-21 15:20:23</p>
     <div class="wrapper">
       <div v-for="item in list" :key="item.name">
         <img :src="require(`@/assets/images/${item.icon}`)"/>
@@ -19,13 +19,13 @@ export default {
   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'},
+        {name: '气压', value: '1010.4Pa', icon: '1.png'},
+        {name: '大气湿度', value: '67.3RH', icon: '2.png'},
+        {name: '大气温度', value: '36.3℃', icon: '3.png'},
+        {name: '风速', value: '2.3m/s', icon: '4.png'},
+        {name: '风向', value: '123.4°', icon: '5.png'},
+        {name: '光照', value: '15369lux', icon: '6.png'},
+        {name: '雨量', value: '0mm', icon: '7.png'},
       ]
     }
   },

src/views/ocean-farm.vue

@@ -11,60 +11,78 @@
   <div v-if="showDetail" class="back-btn" @click="handleBack">
     <Icon type="md-arrow-round-back" /> 返回
   </div>
-  <div v-if="!showDetail" class="sum-wrapper">
+  <img @click="isFull = !isFull" :class="`full-btn ${isFull ? 'on' : ''}`" src="@/assets/images/right-btn.png"/>
+  <div v-if="!showDetail && !isFull" class="sum-wrapper">
     <BorderBox class="sum">
       <p>海洋牧场数量</p>
-      <h2><m-count class="count" :value="348745" :decimal="0"/> 个</h2>
+      <h2><m-count class="count" :value="42" :decimal="0"/> 个</h2>
     </BorderBox>
     <BorderBox class="sum">
       <p>人工鱼礁数量</p>
-      <h2><m-count class="count" :value="5448745" :decimal="0"/> 个</h2>
+      <h2><m-count class="count" :value="586" :decimal="0"/> 个</h2>
     </BorderBox>
   </div>
   <m-animate enter="fadeInLeft" leave="fadeOutLeft">
-    <div v-show="!showDetail" area="left" class="content part-left">
+    <div v-show="!showDetail && !isFull" area="left" class="content part-left">
       <m-card title="近5年面积与数量对比">
         <AreaCount />
       </m-card>
       <m-card title="各地区海洋牧场建设情况">
-        <FarmBuild />
+        <FarmBuild :model="farmList" :sum="farmSum" />
       </m-card>
     </div>
   </m-animate>
   <m-animate enter="fadeInRight" leave="fadeOutRight">
-    <div v-show="!showDetail" area="right" class="content part-right">
+    <div v-show="!showDetail && !isFull" area="right" class="content part-right">
       <m-card title="各类海洋牧场占比">
         <FarmRate />
       </m-card>
       <m-card title="各地区人工鱼礁建设情况">
-        <FarmBuild />
+        <FarmBuild :model="reefList" :sum="reefSum" />
       </m-card>
     </div>
   </m-animate>
   <m-animate enter="fadeInLeft" leave="fadeOutLeft">
-    <div v-show="showDetail" area="left" class="content part-left2">
+    <div v-show="showDetail && !isFull" area="left" class="content part-left2">
       <m-card title="文字介绍">
-        <p style="text-indent:2rem;line-height:1.5;">采用规模化渔业设施和系统化管理体制，利用自然的海洋生态环境，将人工放流的经济海洋生物聚集起来，像在陆地放牛羊一样，对鱼、虾、蟹、贝、藻等海洋资源进行有计划和有目的的海上放养。</p>
-        <p style="text-indent:2rem;line-height:1.5;">采用规模化渔业设施和系统化管理体制，利用自然的海洋生态环境，将人工放流的经济海洋生物聚集起来，像在陆地放牛羊一样，对鱼、虾、蟹、贝、藻等海洋资源进行有计划和有目的的海上放养。</p>
+        <p style="text-indent:2rem;line-height:2;">
+          2016年11月15日，随着最后一船构件礁投放入海，辽宁省在锦州近岸海域又建设完成了一座新的人工鱼礁示范区。该人工鱼礁区内共投放“M”型人工构件礁1000座，14.5空立方米/座，合计14500空立方米，建成鱼礁示范区总面积2000亩。
+        </p>
       </m-card>
       <m-card title="图片介绍">
-        <img style="width:100%;height:92%;" src="@/assets/images/img1.png"/>
+        <Carousel v-if="showDetail && !isFull" autoplay loop>
+          <CarouselItem>
+            <img style="width:100%;height:100%;" src="@/assets/images/intro1.jpg"/>
+          </CarouselItem>
+          <CarouselItem>
+            <img style="width:100%;height:100%;" src="@/assets/images/intro2.jpg"/>
+          </CarouselItem>
+          <CarouselItem>
+            <img style="width:100%;height:100%;" src="@/assets/images/intro3.jpg"/>
+          </CarouselItem>
+        </Carousel>
       </m-card>
       <m-card title="视频介绍">
-        <img style="width:100%;height:92%;" src="@/assets/images/img2.png"/>
+        <img @click="showVideo('intro.mp4')" style="width:100%;height:92%;cursor:pointer;" src="@/assets/images/img2.png"/>
       </m-card>
     </div>
   </m-animate>
+  <m-modal v-model="videoModal" title="视频">
+    <video v-if="videoModal" style="width:100%;height:100%;" controls autoplay>
+      <source :src="require(`@/assets/images/${curVideo}`)" type="video/mp4">
+      您的浏览器不支持 video 标签。
+    </video>
+  </m-modal>
   <m-animate enter="fadeInRight" leave="fadeOutRight">
-    <div v-show="showDetail" area="right" class="content part-right">
+    <div v-show="showDetail && !isFull" area="right" class="content part-right">
       <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/img3.png"/>
+        <img @click="showVideo('reef.mp4')" style="width:100%;height:92%;cursor:pointer;" src="@/assets/images/img3.png"/>
       </m-card>
       <m-card title="数据识别">
-        <DataIdentify v-if="showDetail"/>
+        <DataIdentify v-if="showDetail && !isFull"/>
       </m-card>
     </div>
   </m-animate>
@@ -72,7 +90,64 @@
 </template>
 
 <script>
+const mockFarms = [
+  {name: '天津市大神堂海域国家级海洋牧场示范区', year: 2018, address: '天津市', type: '养护型', path: [[117.837104, 39.147251], [117.854927, 39.146132], [117.844866, 39.136058], [117.825606, 39.139416]]},
+  {name: '河北省山海关海域国家级海洋牧场示范区', year: 2018, address: '河北省', type: '增殖型', path: [[119.833562, 39.960252], [119.85081, 39.944323], [119.824363, 39.93016], [119.797917, 39.951403]]},
+  {name: '河北省祥云湾海域国家级海洋牧场示范区', year: 2018, address: '河北省', type: '养护型', path: [[118.99328, 39.18115], [118.99788, 39.178298], [118.992705, 39.176732], [118.990118, 39.179053]]},
+  {name: '河北省新开口海域国家级海洋牧场示范区', year: 2018, address: '河北省', type: '休闲型', path: [[119.51464, 39.783741], [119.493368, 39.756234], [119.443925, 39.758009], [119.430702, 39.775313]]},
+  {name: '河北省北戴河海域国家级海洋牧场示范区', year: 2019, address: '河北省', type: '增殖型', path: [[119.514809, 39.822785], [119.515941, 39.819141], [119.511647, 39.819072], [119.512096, 39.821995]]},
+  {name: '河北省北戴河新区外侧海域国家级海洋牧场示范区', year: 2019, address: '河北省', type: '休闲型', path: [[119.556369, 39.899606], [119.565855, 39.886763], [119.551194, 39.864835], [119.539121, 39.875246]]},
+  {name: '河北省乐亭县海域兴乐国家级海洋牧场示范区', year: 2019, address: '河北省', type: '增殖型', path: [[119.064852, 39.22912], [119.058241, 39.21056], [119.047605, 39.199377], [119.030357, 39.205863]]},
+  {name: '河北省新开口海域通源国家级海洋牧场示范区', year: 2019, address: '河北省', type: '养护型', path: [[119.411753, 39.757635], [119.431875, 39.750756], [119.413478, 39.742102], [119.395368, 39.744987]]},
+  {name: '辽宁省丹东海域国家级海洋牧场示范区', year: 2018, address: '辽宁省', type: '养护型', path: [[124.270658, 39.926747], [124.296241, 39.886011], [124.252835, 39.872722], [124.230988, 39.905054]]},
+  {name: '辽宁省盘山县海域国家级海洋牧场示范区', year: 2018, address: '辽宁省', type: '增殖型', path: [[121.827887, 40.906897], [121.83881, 40.876356], [121.785056, 40.88312], [121.794254, 40.909078]]},
+  {name: '辽宁省锦州市海域国家级海洋牧场示范区', year: 2019, address: '辽宁省', type: '养护型', path: [[121.11918, 40.877052], [121.151016, 40.865705], [121.134918, 40.840603], [121.107322, 40.847152]]},
+  {name: '大连市獐子岛海域国家级海洋牧场示范区', year: 2018, address: '辽宁省大连市', type: '休闲型', path: [[122.746401, 39.005705], [122.717943, 38.984169], [122.680573, 39.009294], [122.71823, 39.024544]]},
+  {name: '大连市海洋岛海域国家级海洋牧场示范区', year: 2018, address: '辽宁省大连市', type: '养护型', path: [[121.694959, 38.869911], [121.694527, 38.841814], [121.647528, 38.842039], [121.655146, 38.864405]]},
+  {name: '大连市财神岛海域国家级海洋牧场示范区', year: 2019, address: '辽宁省大连市', type: '增殖型', path: [[121.504229, 39.156978], [121.574369, 39.090698], [121.454787, 39.040498], [121.385797, 39.127428]]},
+  {name: '大连市大长山岛海域金茂国家级海洋牧场示范区', year: 2019, address: '辽宁省大连市', type: '养护型', path: [[122.665053, 39.264695], [122.653555, 39.250615], [122.629121, 39.258214], [122.648237, 39.269499]]},
+  {name: '大连蚂蚁岛海域国家级海洋牧场示范区', year: 2019, address: '辽宁省大连市', type: '休闲型', path: [[122.432074, 39.400661], [122.438254, 39.386608], [122.419569, 39.386274], [122.419569, 39.386274]]},
+  {name: '大连市小长山岛海域经典国家级海洋牧场示范区', year: 2019, address: '辽宁省大连市', type: '增殖型', path: [[122.726354, 39.275388], [122.726497, 39.254494], [122.688266, 39.256505], [122.697033, 39.274382]]},
+  {name: '山东省芙蓉岛西部海域国家级海洋牧场示范区', year: 2018, address: '山东省', type: '养护型', path: [[120.691928, 36.28805], [120.689269, 36.283308], [120.684957, 36.28581], [120.685892, 36.289534]]},
+  {name: '山东省荣成北部海域国家级海洋牧场示范区', year: 2018, address: '山东省', type: '休闲型', path: [[122.724006, 37.373536], [122.787247, 37.348754], [122.713657, 37.248624], [122.621671, 37.317535]]},
+  {name: '山东省牟平北部海域国家级海洋牧场示范区', year: 2018, address: '山东省', type: '增殖型', path: [[119.916559, 37.660068], [120.013144, 37.488007], [119.718788, 37.379807], [119.629101, 37.559443]]},
+  {name: '山东省爱莲湾海域国家级海洋牧场示范区', year: 2018, address: '山东省', type: '增殖型', path: [[122.626261, 37.20221], [122.635459, 37.193587], [122.618212, 37.186227], [122.607863, 37.195657]]},
+  {name: '山东省岚山东部海域万泽丰国家级海洋牧场示范区', year: 2019, address: '山东省', type: '养护型', path: [[119.3698, 35.087037], [119.376412, 35.060095], [119.319783, 35.047093], [119.305697, 35.075694]]},
+  {name: '山东省莱州市太平湾海域明波国家级海洋牧场示范区', year: 2019, address: '山东省莱州市', type: '休闲型', path: [[119.837078, 37.375426], [119.84139, 37.330906], [119.810632, 37.33366], [119.795396, 37.359136]]},
+  {name: '山东省荣成市南部海域好当家国家级海洋牧场示范区', year: 2019, address: '山东省荣成市', type: '养护型', path: [[122.626489, 37.283814], [122.698353, 37.262219], [122.674782, 37.214412], [122.621315, 37.236481]]},
+  {name: '山东省庙岛群岛北部海域国家级海洋牧场示范区', year: 2019, address: '山东省', type: '养护型', path: [[120.766245, 37.958891], [120.76682, 37.950868], [120.758771, 37.948193], [120.754099, 37.95781]]},
+  {name: '山东省荣成市桑沟湾海域国家级海洋牧场示范区', year: 2019, address: '山东省荣成市', type: '增殖型', path: [[122.579934, 37.035138], [122.639725, 37.028685], [122.620753, 36.983497], [122.559812, 37.001022]]},
+  {name: '青岛市石雀滩海域国家级海洋牧场示范区', year: 2018, address: '山东省青岛市', type: '养护型', path: [[120.234654, 35.941782], [120.241122, 35.936405], [120.232785, 35.930034], [120.228402, 35.934067]]},
+  {name: '青岛市崂山湾海域国家级海洋牧场示范区', year: 2018, address: '山东省青岛市', type: '增殖型', path: [[120.695613, 36.283635], [120.710848, 36.281773], [120.703086, 36.26769], [120.690007, 36.270251]]},
+  {name: '青岛市崂山湾海域龙盘国家级海洋牧场示范区', year: 2019, address: '山东省青岛市', type: '休闲型', path: [[120.552854, 36.096153], [120.554579, 36.084487], [120.507436, 36.081687], [120.513185, 36.094287]]},
+  {name: '青岛市灵山湾海域灵山国家级海洋牧场示范区', year: 2019, address: '山东省青岛市', type: '增殖型', path: [[120.790143, 36.333611], [120.889028, 36.275906], [120.844185, 36.259145], [120.745299, 36.254488]]},
+  {name: '青岛市灵山湾海域西海岸国家级海洋牧场示范区', year: 2019, address: '山东省青岛市', type: '养护型', path: [[120.772895, 36.308487], [120.866032, 36.281492], [120.80624, 36.172488], [120.729202, 36.168759]]},
+  {name: '上海市长江口海域国家级海洋牧场示范区', year: 2019, address: '上海市', type: '休闲型', path: [[122.03311, 31.604279], [122.143494, 31.535364], [122.067605, 31.43288], [121.998615, 31.444711]]},
+  {name: '江苏省海州湾海域国家级海洋牧场示范区', year: 2018, address: '江苏省', type: '养护型', path: [[120.87638, 30.322077], [120.972966, 30.304119], [120.900527, 30.243237], [120.837286, 30.27518]]},
+  {name: '浙江省中街山列岛海域国家级海洋牧场示范区', year: 2018, address: '浙江省', type: '增殖型', path: [[122.870732, 30.347152], [123.066203, 30.241379], [122.900628, 30.115499], [122.900628, 30.115499]]},
+  {name: '浙江省马鞍列岛海域国家级海洋牧场示范区', year: 2018, address: '浙江省', type: '增殖型', path: [[122.234814, 30.792457], [122.40154, 30.712014], [122.360721, 30.65288], [122.328526, 30.706549]]},
+  {name: '浙江省南麂列岛海域国家级海洋牧场示范区', year: 2019, address: '浙江省', type: '休闲型', path: [[120.959928, 27.528351], [121.026618, 27.494517], [121.035242, 27.468878], [120.983499, 27.46375]]},
+  {name: '宁波市渔山列岛海域国家级海洋牧场示范区', year: 2018, address: '浙江省宁波市', type: '养护型', path: [[122.406368, 29.624205], [122.765115, 29.15291], [122.493755, 28.938694], [122.056819, 28.89013]]},
+  {name: '广东省万山海域国家级海洋牧场示范区', year: 2018, address: '广东省', type: '增殖型', path: [[114.778017, 22.484846], [114.975788, 22.457059], [114.8907, 22.339439], [114.730874, 22.424991]]},
+  {name: '广东省龟龄岛东海域国家级海洋牧场示范区', year: 2018, address: '广东省', type: '增殖型', path: [[108.398497, 21.648597], [108.420631, 21.642684], [108.40827, 21.623869], [108.387861, 21.630858]]},
+  {name: '广东省南澳岛海域国家级海洋牧场示范区', year: 2019, address: '广东省', type: '休闲型', path: [[117.081474, 23.393655], [117.147589, 23.383571], [117.126892, 23.367649], [117.078599, 23.381449]]},
+  {name: '广东省汕尾遮浪角西海域国家级海洋牧场示范区', year: 2019, address: '广东省', type: '养护型', path: [[115.56757, 22.672755], [115.568415, 22.672363], [115.567499, 22.672459], [115.56753, 22.672418]]},
+  {name: '广西壮族自治区防城港市白龙珍珠湾海域国家级海洋牧场示范区', year: 2019, address: '广西壮族自治区', type: '养护型', path: [[108.338204, 21.582065], [108.378448, 21.569696], [108.3681, 21.544955], [108.316932, 21.554637]]},
+]
+const mockReefs = [
+  {year: 2015, type: '建设项目', name: '1号鱼礁', location: [121.123779, 40.870778]},
+  {year: 2015, type: '建设项目', name: '2号鱼礁', location: [121.130966, 40.864341]},
+  {year: 2015, type: '建设项目', name: '3号鱼礁', location: [121.122486, 40.867396]},
+  {year: 2015, type: '建设项目', name: '4号鱼礁', location: [121.13959, 40.86074]},
+  {year: 2019, type: '创建项目', name: '5号鱼礁', location: [121.115731, 40.859867]},
+  {year: 2019, type: '创建项目', name: '6号鱼礁', location: [121.127085, 40.861067]},
+  {year: 2019, type: '创建项目', name: '7号鱼礁', location: [121.117886, 40.855174]},
+  {year: 2019, type: '创建项目', name: '8号鱼礁', location: [121.130822, 40.852664]},
+  {year: 2019, type: '建设项目', name: '9号鱼礁', location: [121.122773, 40.849499]},
+]
 const {AMap} = window
+import yj1 from '@/assets/images/yj1.png'
+import yj2 from '@/assets/images/yj2.png'
 import AreaCount from './components/ocean-farm/area-count'
 import FarmRate from './components/ocean-farm/farm-rate'
 import FarmBuild from './components/ocean-farm/farm-build'
@@ -90,105 +165,174 @@ export default {
   data() {
     return {
       map: null,
+      isFull: false,
       showDetail: false,
+      curVideo: null,
+      videoModal: false,
       mapConfig: {
         zoom: 7,
-        zooms: [6, 8],
+        zooms: [6, 15],
         center: [121.973849, 28.142576], // 钓鱼岛附近
         mapStyle: 'amap://styles/blue',
         features: ['bg', 'road', 'point'],
       },
       mapPolygon: null,
+      polygonInfo: null,
       mapMarker: null,
-      infoWindow: null,
+      markerInfo: null,
+      farmList: [
+        {province: '天津市', number: 1, area: 421.94, invest: 6416.46},
+        {province: '河北省', number: 7, area: 2953.59, invest: 44915.37},
+        {province: '辽宁省', number: 9, area: 3797.47, invest: 57748.29},
+        {province: '山东省', number: 14, area: 5890, invest: 89569},
+        {province: '上海市', number: 1, area: 417.25, invest: 6345.139},
+        {province: '江苏省', number: 1, area: 467.24, invest: 7105.339},
+        {province: '浙江省', number: 4, area: 1687.76, invest: 25665.84},
+        {province: '广东省', number: 4, area: 1859.28, invest: 28274.15},
+        {province: '广西', number: 1, area: 328.58, invest: 4996.73},
+        {province: '天津市', number: 1, area: 421.94, invest: 6416.46},
+        {province: '河北省', number: 7, area: 2953.59, invest: 44915.37},
+        {province: '辽宁省', number: 9, area: 3797.47, invest: 57748.29},
+        {province: '山东省', number: 14, area: 5890, invest: 89569},
+        {province: '上海市', number: 1, area: 417.25, invest: 6345.139},
+        {province: '江苏省', number: 1, area: 467.24, invest: 7105.339},
+        {province: '浙江省', number: 4, area: 1687.76, invest: 25665.84},
+        {province: '广东省', number: 4, area: 1859.28, invest: 28274.15},
+        {province: '广西', number: 1, area: 328.58, invest: 4996.73},
+      ],
+      farmSum: [42, 17823.11, 271036.32],
+      reefList: [
+        {province: '天津市', number: 2512, area: 13878.45, invest: 1957.401},
+        {province: '河北省', number: 17289, area: 95519.34, invest: 13471.93},
+        {province: '辽宁省', number: 22489, area: 124248.6, invest: 17523.88},
+        {province: '山东省', number: 35412, area: 195646.4, invest: 27593.74},
+        {province: '上海市', number: 2178, area: 12033.15, invest: 1697.141},
+        {province: '江苏省', number: 2614, area: 14441.99, invest: 2036.881},
+        {province: '浙江省', number: 9856, area: 54453.04, invest: 7679.992},
+        {province: '广东省', number: 8992, area: 49679.56, invest: 7006.746},
+        {province: '广西', number: 2213, area: 12226.52, invest: 1724.414},
+        {province: '天津市', number: 2512, area: 13878.45, invest: 1957.401},
+        {province: '河北省', number: 17289, area: 95519.34, invest: 13471.93},
+        {province: '辽宁省', number: 22489, area: 124248.6, invest: 17523.88},
+        {province: '山东省', number: 35412, area: 195646.4, invest: 27593.74},
+        {province: '上海市', number: 2178, area: 12033.15, invest: 1697.141},
+        {province: '江苏省', number: 2614, area: 14441.99, invest: 2036.881},
+        {province: '浙江省', number: 9856, area: 54453.04, invest: 7679.992},
+        {province: '广东省', number: 8992, area: 49679.56, invest: 7006.746},
+        {province: '广西', number: 2213, area: 12226.52, invest: 1724.414},
+      ],
+      reefSum: [105000, 13912.5, 80692.5],
     }
   },
   mounted() {
-    this.$nextTick(this.initMap)
+    setTimeout(this.initMap, 100)
   },
   beforeDestroy() {
     this.map && this.map.destroy()
     this.map = null
   },
+  computed: {
+    sizeRate() {
+      return Number((screen.height / 800).toFixed(1))
+    },
+    preIcon() {
+      return new AMap.Icon({
+        size: [20 * this.sizeRate, 20 * this.sizeRate],
+        image: yj2,
+      })
+    },
+    clickIcon() {
+      return new AMap.Icon({
+        size: [40 * this.sizeRate, 40 * this.sizeRate],
+        // offset: new AMap.Pixel(-60, -35),
+        image: yj1,
+      })
+    },
+  },
   methods: {
     initMap() {
       this.map = new AMap.Map('oceanMap', this.mapConfig)
-      this.mapPolygon = new AMap.Polygon({ // 上色小区的底板颜色
+      this.addPollygon()
+      this.addMarker()
+    },
+    addPollygon() {
+      this.mapPolygon = mockFarms.map(item => {
+        const polygon = new AMap.Polygon({
           fillColor: 'gold',
           fillOpacity: 0.1,
           strokeWeight: 1,
           strokeColor: 'gold',
           cursor: 'pointer',
-        path: [
-          [122.767281, 29.920257],
-          [123.767281, 29.920257],
-          [124.767281, 28.920257],
-          [123.767281, 27.920257],
-          [122.767281, 27.920257],
-          [122.267281, 28.920257],
-        ]
-      }).on('click', e => {
-        this.showDetail = true
-        const location = [e.lnglat.getLng(), e.lnglat.getLat()]
-        this.map.setZoomAndCenter(8, location)
-        if (!this.mapMarker) {
-          this.mapMarker = new AMap.Marker({
-            position: [123.424044, 29.028291],
+          path: item.path,
+          extData: {...item},
+        })
+          .on('click', this.polygonListener)
+        // .on('mouseout', () => this.polygonInfo.close())
+        return polygon
+      })
+      this.map.add(this.mapPolygon)
+    },
+    addMarker() {
+      this.mapMarker = mockReefs.map(item => {
+        const marker = new AMap.Marker({
+          position: item.location,
           zIndex: 99,
-            icon: new AMap.Icon({
-              // size: [30, 10],
-              image: require('@/assets/images/title-arrow.png'),
-            }),
-            // extData: {
-            //   community: item.name,
-            //   buildingNo: item.buildingNo,
-            //   intention: item.intention,
-            //   lon: item.lon,
-            //   lat: item.lat,
-            //   color: item.color,
-            //   ...curObj
-            // },
+          icon: this.preIcon,
+          extData: {...item},
         }).on('click', e => {
-            const location = [e.lnglat.getLng(), e.lnglat.getLat()]
-            new AMap.InfoWindow({
+          if (this.mapMarker.length > 0) {
+            this.mapMarker.forEach(marker => {
+              marker.setIcon(this.preIcon)
+            })
+            e.target.setIcon(this.clickIcon)
+          }
+          this.showDetail = true
+          const {name, year, type, location} = e.target.getExtData()
+          this.map.setZoomAndCenter(14, location)
+          this.markerInfo = new AMap.InfoWindow({
             content: `
               <div class="map-tooltip-info">
-                  <h3>人工鱼礁名称</h3>
-                  <p><span>申请年份：</span>2015年</p>
-                  <p><span>建设类型：</span>养护型、休闲型</p>
+                <h3>${name}</h3>
+                <p><span>申请年份：</span>${year}年</p>
+                <p><span>建设类型：</span>${type}</p>
               </div>
             `
           }).open(this.map, location)
         })
-          this.map.add([this.mapMarker])
-          this.mapPolygon.off('mouseover', this.polygonListener)
-        }
-      }).on('mouseover', this.polygonListener).on('mouseout', () => {
-        this.infoWindow.close()
+        return marker
       })
-      this.map.add([this.mapPolygon])
+      this.map.add(this.mapMarker)
     },
     handleBack() {
       this.showDetail = false
-      const {zoom, center} = this.mapConfig
-      this.map.setZoomAndCenter(zoom, center)
-      this.map.remove(this.mapMarker)
-      this.mapPolygon.on('mouseover', this.polygonListener)
+      this.polygonInfo && this.polygonInfo.close()
+      this.markerInfo && this.markerInfo.close()
+      if (this.mapMarker.length > 0) {
+        this.mapMarker.forEach(marker => {
+          marker.setIcon(this.preIcon)
+        })
+      }
+      const {zoom} = this.mapConfig
+      this.map.setZoom(zoom)
     },
     polygonListener(e) {
       const location = [e.lnglat.getLng(), e.lnglat.getLat()]
-      this.infoWindow = new AMap.InfoWindow({
+      const {name, address, year, type} = e.target.getExtData()
+      this.polygonInfo = new AMap.InfoWindow({
         content: `
           <div class="map-tooltip-info">
-            <h3>苏州市大有乡鑫富洋海参养殖场</h3>
-            <p><span>地址：</span>海洋牧场1号</p>
-            <p><span>申请年份：</span>2015年</p>
-            <p><span>建设类型：</span>养护型、休闲型</p>
+            <h3>${name}</h3>
+            <p><span>地址：</span>${address}</p>
+            <p><span>申请年份：</span>${year}年</p>
+            <p><span>建设类型：</span>${type}</p>
           </div>
         `
-      })
-      this.infoWindow.open(this.map, location)
+      }).open(this.map, location)
     },
+    showVideo(src) {
+      this.curVideo = src
+      this.videoModal = true
+    }
   }
 }
 </script>
@@ -199,6 +343,19 @@ export default {
   width 100%
   height 100%
   position absolute
+.full-btn
+  position absolute
+  right calc(25% + 1rem)
+  bottom 1.5rem
+  width 2.5rem
+  height @width
+  cursor pointer
+  z-index 9999
+  transition all 1s ease-in-out
+  transform-origin center
+  &.on
+    right 1rem
+    transform rotate(180deg)
 .monitor-card
   z-index 10
 .sum-wrapper

src/views/quality-safety.vue

 <template>
   <m-grid
     :template="[
-      'box1 map box4',
-      'box2 map box5',
+      'box1 . box4',
+      'box2 . box5',
       'box3 box7 box6',
     ]"
     columns="0.6fr 1fr 0.6fr"
     rows="1fr 1fr 1fr"
     gap="0.5rem"
   >
-    <QualityMap area="map"/>
+    <QualityMap />
     <m-card area="box1" title="质量预警">
       <QualityWarning />
     </m-card>

src/views/seedling.vue

@@ -31,7 +31,7 @@
     <m-animate enter="fadeInLeft" leave="fadeOutLeft">
       <div v-show="showProvince" area="left" class="content part-left">
         <m-card title="近5年面积与数量对比">
-          <AreaCount v-if="showProvince"/>
+          <AreaCount v-if="showProvince" :data="areaData"/>
         </m-card>
         <m-card title="良种场列表">
           <PlaceList v-if="showProvince" />
@@ -41,10 +41,24 @@
     <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 class="custom-select" v-model="companyIntroType" transfer>
+            <Option v-for="item in ['宣传图片', '文字描述']" :key="item" :value="item">{{item}}</Option>
           </Select>
-          <img style="width:100%;height:92%;" src="@/assets/images/img4.png"/>
+          <img v-if="companyIntroType === '宣传图片'" style="width:100%;height:92%;" src="@/assets/images/img4.png"/>
+          <div>
+            <p style="text-indent:2rem;line-height:2;">
+              江苏省渔业技术推广示范基地建设项目得到了江苏省发改委、江苏省财政厅、江苏省海洋与渔业局的高度重视和关心，于2013年9月16日获省发改委批准立项实施（苏发改农经发[2013]1412号）。建设项目占地面积：538亩，建设年限：2013年9月—2016年8月，项目总投资：6125.35万元。
+            </p>
+            <p style="text-indent:2rem;line-height:2;">
+              以建设国内一流、省内领先的省级现代渔业技术推广示范基地为目标，主要分六大功能区：繁培试验区185.3亩、新品种和新技术示范区255.7亩、循环水生态湿地处理区48.5亩、休闲渔业区9亩、工厂化设施渔业区16.6亩、公共服务与综合管理区22.9亩。
+            </p>
+            <p style="text-indent:2rem;line-height:2;">
+              基地建成后，主要开展我省淡水养殖主导品种池塘高效生态渔业技术及工厂化设施渔业养殖技术研发，新品种、新技术、新模式、新装备的集成应用试验、示范与推广，以及长江名贵水生动物增殖放流研究和应用工作，为我省淡水养殖渔业可持续发展和天然渔业资源恢复提供技术支撑。基地实施内容以公益性服务职能建设为主体。
+            </p>
+            <p style="text-indent:2rem;line-height:2;">
+              项目建成后以强化新品种、新技术、新装备集成示范为主攻方向，以长江名贵水产品种开发、利用为主要抓手，以经济效益、社会效益、生态效益三者协调发展为目标，以建立健全为社会提供公益性服务职能为中心任务，建设省内领先、国内一流的现代渔业科技示范园；同时通过增殖放流，加快长江特色水产品自然资源恢复；通过基地内各种生态循环养殖模式的示范和展示，为我省渔业生产从业者提供技术示范和指导，利用窗口示范效应提高我省养殖从业者的生态养殖理念，可以降低养殖过程中环境生态负荷。
+            </p>
+          </div>
         </m-card>
         <m-card title="水质监测">
           <WaterTest />
@@ -90,9 +104,9 @@
       <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>
+            <Option v-for="item in ['线路1', '线路2']" :key="item" :value="item">{{item}}</Option>
           </Select>
-          <img style="width:100%;height:92%;" src="@/assets/images/img5.png"/>
+          <img @click="videoModal = true" style="width:100%;height:92%;cursor:pointer;" src="@/assets/images/img5.png"/>
         </m-card>
         <m-card title="气象监测">
           <Weather />
@@ -107,6 +121,12 @@
         <ConsultInfo />
       </m-card>
     </m-animate>
+    <m-modal v-model="videoModal" title="视频">
+      <video v-if="videoModal" style="width:100%;height:100%;" controls autoplay>
+        <source src="@/assets/images/monitor.mp4" type="video/mp4">
+        您的浏览器不支持 video 标签。
+      </video>
+    </m-modal>
   </m-grid>
 </template>
 
@@ -145,8 +165,17 @@ export default {
   },
   data() {
     return {
+      videoModal: false,
       showProvince: false,
       showCompany: false,
+      companyIntroType: '宣传图片',
+      areaData: [
+        {year: '2015', area: 701, count: 1},
+        {year: '2016', area: 701, count: 1},
+        {year: '2017', area: 943, count: 2},
+        {year: '2018', area: 943, count: 2},
+        {year: '2019', area: 1320.5, count: 3},
+      ],
     }
   },
   methods: {