接入数据

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 100%
-  height 100%
-  position relative
+  width 46%
+  height 70%
+  position absolute
+  left 27.27%
   >.map
-    position absolute
-    width 45%
-    height 300%
+    width 100%
+    height 100%
     z-index 99
-    top 5%
   >.sum
     display flex
-    width 40%
+    width 60%
     margin 1rem auto 0
     justify-content space-between
     >div

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/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 class="legend">
-        <div v-for="(item,i) in config.colors" :key="item">
-          <span :style="`background:${item}`"/>
-          <p>{{data[i].name}}</p>
-        </div>
+    </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 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/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/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: {