水产价格

src/App.vue

@@ -2,18 +2,15 @@
   <div id="app">
     <m-loader v-show="$store.state.showLoading"/>
     <m-title hideDate hideTime :bgImg="require('@/assets/images/title-bg3.png')"/>
-    <DiseaseMap />
-    <router-view :key="$route.fullPath"/>
+    <m-animate enter="fadeInUp" leave="fadeOutDown">
+      <router-view class="router-view" :key="$route.fullPath"/>
+    </m-animate>
   </div>
 </template>
 
 <script>
-import DiseaseMap from './views/components/disease-map'
 export default {
   name: 'App',
-  components: {
-    DiseaseMap,
-  }
 }
 </script>
 
@@ -22,6 +19,8 @@ export default {
   background url('./assets/images/bg.png') no-repeat
   background-size 110%
   background-position 90% -50%
+  .router-view
+    height calc(100% - 4rem)
 </style>
 <style lang="stylus">
 @import './assets/css/reset.styl'

src/assets/css/reset.styl

@@ -40,6 +40,18 @@ $color-main = #5BD5FF
     &.ivu-select-item-selected
       color $edgeColor
       font-weight bold
+  .ivu-slider-wrap
+    height 1.2rem
+    border-radius 1rem
+    background-color $color-map()
+    .ivu-slider-bar
+      height inherit
+      background linear-gradient(to right, #8ce3fa, #267ee1)
+    .ivu-slider-button
+      width .8rem
+      height 2rem
+      border-radius 1rem
+
   .custom-select
     position absolute
     top 1rem

src/components/MonitorComponents/MonitorCard/mode1.vue

 <template>
-<div class="card-wrapper" :style="`background-image:url(${require('@/assets/images/card-bg.png')})`">
+<div class="card-wrapper">
+  <img class="edge-head" src="@/assets/images/card-head.png"/>
+  <div class="edge bar left"/>
+  <div class="edge bar right"/>
+  <div class="edge top-left"/>
+  <div class="edge top-right"/>
+  <div class="edge bottom-left"/>
+  <div class="edge bottom-right"/>
   <div class="card-title" :style="`color:${color}`">
     <img src="@/assets/images/arrow.png"/>
     {{title}}
@@ -28,7 +35,7 @@ export default {
 
 <style lang="stylus" scoped>
 .card-wrapper
-  background-size cover
+  position relative
   .card-title
     display flex
     align-items center
@@ -42,4 +49,47 @@ export default {
       width 1rem
   // .card-content
   //   padding 0.5rem 1rem
+  .edge-head
+    position absolute
+    top 0
+    left 0
+    right 0
+    margin auto
+    width 50%
+    max-height 0.6rem
+  .edge
+    position absolute
+    height 0
+    width 0
+    border .2rem solid $edgeColor
+    &.top-left
+      top 0
+      left 0
+      border-right-color transparent
+      border-bottom-color transparent
+    &.top-right
+      top 0
+      right 0
+      border-left-color transparent
+      border-bottom-color transparent
+    &.bottom-left
+      bottom 0
+      left 0
+      border-radius 50%
+    &.bottom-right
+      bottom 0
+      right 0
+      border-radius 50%
+    &.bar
+      border none
+      background-color $edgeColor
+      width .4rem
+      height 6rem
+      top 3rem
+      &.left
+        transform skew(45deg) rotate(45deg)
+        left 0
+      &.right
+        right 0
+        transform skew(-45deg) rotate(-45deg)
 </style>

src/components/MonitorComponents/MonitorCard/monitor-card.vue

@@ -44,6 +44,7 @@ $size()
 .monitor-card
   $size()
   $blur()
+  background-color rgba(0,0,0,0.4)
   overflow hidden
   height initial
   width initial

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

@@ -179,12 +179,16 @@ export default {
             shadowBlur: 6,
           }
         }
+        let borderRadius = {}
+        if (item.borderRadius) {
+          borderRadius = {barBorderRadius: item.borderRadius}
+        }
         const result = {
           barWidth: '50%',
           barGap: 0,
           smooth: true,
           symbol: 'circle',
-          itemStyle: { color, ...shadow },
+          itemStyle: { color, ...shadow, ...borderRadius },
           data: this.dataSource[index].data || [],
           ...item,
         }
@@ -339,6 +343,7 @@ export default {
           }
         },
         yAxis: {
+          name: '',
           nameTextStyle: {
             color: '#fff',
             fontSize: this.fontSize,

src/components/MonitorComponents/MonitorTable/monitor-table.vue

 <template>
-  <div class="monitor-table">
+  <div class="monitor-table" :style="`font-size:${size}`">
     <p v-if="title" class="title">{{title}}</p>
     <Row class="row row-title" v-if="mode == '1'">
       <i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0">
@@ -77,7 +77,11 @@ export default {
     mode: {
       type: String,
       default: '1',
-    }
+    },
+    size: {
+      type: String,
+      default: '1rem'
+    },
   },
   data() {
     return {
@@ -115,7 +119,6 @@ export default {
     line-height 2.4rem
     &.row-title
       font-weight bold
-      font-size 1.1rem
       background-color $color-map()
     &:nth-child(2n)
       background-color $color-map(0.15)

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

@@ -9,10 +9,10 @@
     <img :src="bgImg" draggable="false"/>
     <p :style="style">{{menus[curIndex].title}}</p>
     <div class="menu menu-left">
-      <div @click="curIndex = menus.indexOf(item)" v-for="item in menus.slice(0,3)" :key="item.name" :class="`${menus[curIndex].name === item.name ? 'on' : ''}`"><span>{{item.name}}</span></div>
+      <div @click="handleSelect(item)" v-for="item in menus.slice(0,3)" :key="item.name" :class="`${menus[curIndex].name === item.name ? 'on' : ''}`"><span>{{item.name}}</span></div>
     </div>
     <div class="menu menu-right">
-      <div @click="curIndex = menus.indexOf(item)" v-for="item in menus.slice(3)" :key="item.name" :class="`${menus[curIndex].name === item.name ? 'on' : ''}`"><span>{{item.name}}</span></div>
+      <div @click="handleSelect(item)" v-for="item in menus.slice(3)" :key="item.name" :class="`${menus[curIndex].name === item.name ? 'on' : ''}`"><span>{{item.name}}</span></div>
     </div>
   </div>
 </template>
@@ -52,11 +52,11 @@ export default {
       style: {},
       curIndex: 0,
       menus: [
-        {name: '病害防控', title: '病害防控大数据管理与服务平台'},
+        {name: '病害防控', title: '病害防控大数据管理与服务平台', path: '/disease'},
         {name: '质量安全'},
         {name: '稻鱼种养'},
         {name: '海洋牧场'},
-        {name: '水产价格', title: '水产品价格分析驾驶舱'},
+        {name: '水产价格', title: '水产品价格分析驾驶舱', path: '/fishing-price'},
         {name: '苗种数据'},
       ],
     }
@@ -75,6 +75,12 @@ export default {
       }
     }
     this.style = {...this.style, 'font-size': this.size}
+    const {path} = this.$route
+    if (path === '/') {
+      this.curIndex = 0
+    } else {
+      this.curIndex = this.menus.findIndex(menu => path === menu.path)
+    }
   },
   beforeDestroy() {
     clearInterval(this.timer)
@@ -98,6 +104,12 @@ export default {
       this.$store.commit('SET_CURDATE', date)
       this.openDatePicker = false
     },
+    handleSelect(item) {
+      this.curIndex = this.menus.indexOf(item)
+      if (item.path) {
+        this.$router.push({path: item.path})
+      }
+    },
   }
 }
 </script>

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} from 'view-design'
+import {Row, Col, Select, Option, DatePicker, Icon, Slider} from 'view-design'
 import ajax from '@/server/ajax'
 import api from '@/server/api'
 import common from '@/util/common'
@@ -29,6 +29,7 @@ Vue.component('Select', Select)
 Vue.component('Option', Option)
 Vue.component('DatePicker', DatePicker)
 Vue.component('Icon', Icon)
+Vue.component('Slider', Slider)
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/router/index.js

 import Vue from 'vue'
 import Router from 'vue-router'
 
-const Main = () => import('@/views/main')
+const Disease = () => import('@/views/disease')
+const FishingPrice = () => import('@/views/fishing-price')
 
 Vue.use(Router)
 
@@ -9,8 +10,17 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'main',
-      component: Main,
+      redirect: '/fishing-price',
+    },
+    {
+      name: 'disease',
+      path: '/disease',
+      component: Disease,
+    },
+    {
+      name: 'fishing-price',
+      path: '/fishing-price',
+      component: FishingPrice,
     },
   ]
 })

src/views/components/disease-forecast.vue

@@ -99,7 +99,8 @@ export default {
     }
   },
   mounted() {
-    this.$nextTick(this.init)
+    // this.$nextTick(this.init)
+    setTimeout(this.init, 0)
   },
   computed: {
     fontSize() {
@@ -121,5 +122,5 @@ export default {
   height 100%
   >.chart
     width 100%
-    height 70%
+    height 95%
 </style>

src/views/components/disease-map.vue

 <template>
 <div class="map-wrapper">
-  <div id="map" ref="map"/>
+  <div ref="map"/>
 </div>
 </template>
 
@@ -246,7 +246,7 @@ export default {
   width 42%
   height 94%
   position absolute
-  #map
+  >div
     width 100%
     height 100%
     z-index 99

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

 <template>
-  <div class="disease">
+  <div class="disease-warning">
     <p>预警指标：预报，问诊，用药，天气情况</p>
     <Select v-model="type" class="custom-select" size="small">
       <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
@@ -100,7 +100,8 @@ export default {
     }
   },
   mounted() {
-    this.$nextTick(this.init)
+    // this.$nextTick(this.init)
+    setTimeout(this.init, 0)
   },
   methods: {
     init() {
@@ -108,12 +109,12 @@ export default {
       this.map = this.$echarts.init(this.$refs.map)
       this.map.setOption(this.config)
     },
-  }
+  },
 }
 </script>
 
 <style lang="stylus" scoped>
-.disease
+.disease-warning
   width 100%
   height 100%
   .map

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

+<template>
+<div class="map-wrapper">
+  <BorderBox class="sum">
+    <p>采集点数量</p>
+    <h2><m-count class="count" :value="6884785" :decimal="0"/> 个</h2>
+  </BorderBox>
+  <div class="map" ref="map"/>
+  <div class="visual-range">
+    <p>
+      采集点数量<br/>
+      <span>（单位：个）</span>
+    </p>
+    <div class="slider-wrapper">
+      <Slider class="slider" v-model="range" :step="100" range :max="6884785"/>
+      <m-count class="count" :value="0" :decimal="0"/>
+      <m-count class="count" :value="6884785" :decimal="0"/>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import china from 'echarts/map/json/china.json'
+import BorderBox from './border-box'
+const mapData = [
+  {name: '海门', value: [121.15, 31.89, 90], visualMap: false},
+  {name: '鄂尔多斯', value: [109.781327, 39.608266, 120], visualMap: false},
+  {name: '招远', value: [120.38, 37.35, 142], visualMap: false},
+  {name: '舟山', value: [122.207216, 29.985295, 123], visualMap: false},
+]
+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 }
+
+]
+export default {
+  name: 'FishingPriceMap',
+  components: {
+    BorderBox,
+  },
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    visualLabel: {
+      type: Array,
+      default() {
+        return ['高', '低']
+      }
+    },
+    visualFormatter: {
+      type: [String, Function],
+      default() {
+        return () => {
+          return `
+          <div class="disease-map-tooltip-info">
+            <h3>采集点名称</h3>
+            <p><span>地址：</span>苏州市吴中区金庭镇</p>
+            <p><span>最新采集时间：</span>2020-08-23 15:57:00</p>
+          </div>
+          `
+        }
+      }
+    },
+    visualConfig: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+  },
+  data() {
+    return {
+      range: [0, 6884785],
+      map: null,
+      mapName: 'china',
+      config: {
+        geo: {
+          map: 'china',
+          left: '1%',
+          right: '1%',
+          // top: 'auto',
+          // bottom: '10%',
+          zoom: 1, //当前视角的缩放比例
+          // roam: true, //是否开启平游或缩放
+          // scaleLimit: { //滚轮缩放的极限控制
+          //   min: 0.8,
+          //   max: 2,
+          // },
+          label: {
+            normal: {
+              show: true,
+              color: '#fff',
+              fontSize: 12 * this.sizeRate,
+            },
+            emphasis: {
+              color: '#fff',
+              fontSize: 15 * this.sizeRate,
+              // fontFamily: 'Pangmenzhengdao',
+            }
+          },
+          itemStyle: {
+            normal: {
+              // areaColor: 'rgba(91, 213, 255, 0.2)',
+              borderColor: 'rgba(91, 213, 255, 0.9)',
+              borderWidth: 0.5,
+            },
+            emphasis: {
+              areaColor: '#069ae1',
+            }
+          },
+          regions: [],
+        },
+        series: []
+      },
+      curProvince: null,
+    }
+  },
+  mounted() {
+    this.$nextTick(this.initMap)
+  },
+  computed: {
+    sizeRate() {
+      return Number((screen.height / 800).toFixed(1))
+    },
+  },
+  methods: {
+    initMap() {
+      // 初始化echarts
+      this.$echarts.registerMap(this.mapName, china)
+      this.map = this.$echarts.init(this.$refs.map)
+      // this.addEvent()
+      this.config.series.push({
+        type: 'map',
+        map: this.mapName,
+        geoIndex: 0,
+        data: provinceData,
+      })
+      this.config.series.push({
+        type: 'scatter', // series图表类型
+        coordinateSystem: 'geo', // series坐标系类型
+        data: mapData,
+        itemStyle: {
+          color: 'gold'
+        },
+        symbolSize: 20 * this.sizeRate,
+        symbol: 'pin',
+        geoIndex: 0,
+      })
+      this.config.tooltip = {
+        trigger: 'item',
+        formatter: this.visualFormatter,
+        // extraCssText: `background-image:url(${require('@/assets/images/tooltip.png')});background-size:cover;`,
+      }
+      this.config.visualMap = Object.assign({
+        show: false,
+        inRange: {
+          // opacity: 1,
+          color: ['rgba(140,228,252,0.1)', '#0ed7e1', '#069ae1']
+          // color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.8)']
+        }
+      }, this.visualConfig)
+      this.map.setOption(this.config)
+    },
+    addEvent() {
+      // 监听地图点击事件
+      this.map.on('click', (ev) => {
+        const {name} = ev.data
+        console.log(name)
+        this.setRegions(name)
+        this.curProvince = name
+        this.$emit('select', name)
+      })
+      // 点击空白处则取消选中状态
+      this.map.getZr().on('click', e => {
+        if (!e.target && this.curProvince) {
+          const name = this.curProvince
+          this.setRegions(null)
+          this.$emit('select', name)
+        }
+      })
+    },
+    setRegions(name) {
+      this.curProvince = name
+      if (!name) {
+        this.config.geo.regions = []
+        this.map.setOption(this.config)
+        return
+      }
+      let regions = [{
+        name,
+        selected: true,
+        itemStyle: {
+          areaColor: '#5ad4ff',
+          shadowColor: 'rgba(0, 0, 0, 1)',
+          shadowBlur: 10,
+          shadowOffsetY: 10,
+          shadowOffsetX: -5,
+        }
+      }]
+      if (this.config.geo.regions.length > 0 && this.config.geo.regions[0].name == name) {
+        regions = []
+      }
+      this.config.geo.regions = regions
+      this.map.setOption(this.config)
+    },
+  },
+  // watch: {
+  //   data(cur, past) {
+  //     if (cur && cur !== past && cur.length > 0) {
+  //       this.config.series.push({
+  //         type: 'scatter',
+  //         coordinateSystem: 'geo',
+  //         // map: this.mapName,
+  //         // geoIndex: 0,
+  //         data: cur,
+  //       })
+  //       this.config.tooltip = {
+  //         trigger: 'item',
+  //         formatter: this.visualFormatter,
+  //       }
+  //       // this.config.visualMap = Object.assign({
+  //       //   show: false,
+  //       //   inRange: {
+  //       //     opacity: 0.5,
+  //       //     color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.8)']
+  //       //   }
+  //       // }, this.visualConfig)
+  //       this.map.setOption(this.config)
+  //     }
+  //   }
+  // }
+}
+</script>
+
+<style lang="stylus" scoped>
+.map-wrapper
+  width 100%
+  height 100%
+  position relative
+  >.map
+    position absolute
+    width 45%
+    height 250%
+    z-index 99
+  >.sum
+    width 40%
+    margin 2rem auto 0
+    text-align center
+    font-weight bold
+    h2,.count
+      color $edgeColor !important
+      font-family $font-pang !important
+      font-size 1.5rem !important
+  .visual-range
+    display flex
+    z-index 9999
+    width 100%
+    align-items center
+    justify-content center
+    position absolute
+    bottom 2rem
+    p
+      text-align center
+      margin-right 1rem
+      span
+        font-size .8rem
+    .slider-wrapper
+      position relative
+      width 60%
+      .slider
+        width 100%
+      .count
+        position absolute
+        &:first-child
+          left 0
+        &:last-child
+          right 0
+</style>
+<style lang="stylus">
+.disease-map-tooltip-info
+  color $edgeColor
+  padding 1rem
+  border .1rem solid $edgeColor
+  span
+    color #fff
+</style>

src/views/components/new-quotation.vue

+<template>
+  <div>
+    <m-table :layout="layout" :model="data" size="0.8rem"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NewQuotation',
+  data() {
+    return {
+      layout: [
+        {
+          title: '日期',
+          key: 'date',
+          width: 4,
+        },
+        {
+          title: '品种',
+          key: 'type',
+          width: 4,
+        },
+        {
+          title: '规格',
+          key: 'size',
+          width: 6,
+        },
+        {
+          title: '价格',
+          key: 'price',
+          width: 5,
+        },
+        {
+          title: '成交量',
+          key: 'num',
+          width: 5,
+        },
+      ],
+      data: [
+        {date: '08.23', type: '草鱼', size: '1.5-2.3kg', price: '5.25元/kg', num: '4,665吨'},
+        {date: '08.23', type: '鲫鱼', size: '1.5-2.3kg', price: '5.25元/kg', num: '4,665吨'},
+        {date: '08.23', type: '鲢鱼', size: '1.5-2.3kg', price: '5.25元/kg', num: '4,665吨'},
+        {date: '08.23', type: '白对虾', size: '1.5-2.3kg', price: '5.25元/kg', num: '4,665吨'},
+      ],
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+
+</style>

src/views/components/price-analysis.vue

+<template>
+  <div class="price-analysis" v-if="showChart">
+    <m-chart :config="config" :data="data"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PriceAnalysis',
+  data() {
+    return {
+      showChart: false,
+      config: {
+        colors: ['#eeb514', '#5eec67', '#01adfe'],
+        legend: {align: 'right'},
+        shape: [
+          {key: 'fish1', name: '草鱼', type: 'line'},
+          {key: 'fish2', name: '鲫鱼', type: 'line'},
+          {key: 'fish3', name: '南美白对虾', type: 'line'},
+        ],
+        yAxis: {
+          name: '元',
+          max: 50,
+        },
+        xAxis: {
+          key: 'date',
+        }
+      },
+      data: [
+        {date: '2020.3', fish1: 10, fish2: 15, fish3: 25},
+        {date: '2020.4', fish1: 10, fish2: 18, fish3: 28},
+        {date: '2020.5', fish1: 20, fish2: 25, fish3: 27},
+        {date: '2020.6', fish1: 15, fish2: 15, fish3: 29},
+        {date: '2020.7', fish1: 10, fish2: 12, fish3: 31},
+        {date: '2020.8', fish1: 11, fish2: 18, fish3: 24},
+        {date: '2020.9', fish1: 12, fish2: 11, fish3: 29},
+      ],
+    }
+  },
+  mounted() {
+    setTimeout(() => this.showChart = true, 0)
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.price-analysis
+  width 100%
+  height 100%
+</style>

src/views/components/price-trend.vue

+<template>
+  <div class="price-trend">
+    <div class="chart" ref="chart" />
+    <Select class="custom-select" v-model="disease">
+      <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
+    </Select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PriceTrend',
+  data() {
+    return {
+      disease: '2019',
+      options: ['2019', '2020'],
+      chart: null,
+      option: {
+        tooltip: {
+          trigger: 'axis',
+          confine: true,
+        },
+        legend: {
+          width: '100%',
+          textStyle: {
+            color: '#ccc',
+            fontSize: this.fontSize,
+          },
+          data: ['综合-具有可比性', '综合-不具可比性', '海水产品-具有可比性', '海水产品-不具可比性', '淡水产品-具有可比性', '淡水产品-不具可比性'],
+        },
+        grid: {
+          top: '30%',
+          left: '5%',
+          right: '1%',
+          bottom: 'auto',
+          width: 'auto',
+          height: '60%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(91,213,255,0.1)'
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#46b9ef',
+            },
+            fontSize: this.fontSize,
+          },
+          data: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12', ],
+        },
+        yAxis: [
+          {
+            type: 'value',
+            // name: '单位：个',
+            max: 1.20,
+            min: 0.95,
+            interval: 0.05,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#fff',
+              },
+              fontSize: this.fontSize,
+            },
+            nameTextStyle: {
+              color: '#ccc',
+              fontSize: this.fontSize,
+            },
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(91,213,255,0.1)'
+              }
+            },
+          },
+        ],
+        series: [
+          {name: '综合-具有可比性', itemStyle: {color: '#e052fc'}, type: 'line', data: [1, 1.02, 1.05, 1.03, 1.04, 1, 1.1, 1.05, 1.02, 1, 1.1, 1.08]},
+          {name: '综合-不具可比性', itemStyle: {color: '#8078fb'}, type: 'line', data: [1.05, 1.04, 1.15, 1.08, 1.14, 1, 1, 1.05, 1.12, 1, 1.12, 1.08]},
+          {name: '海水产品-具有可比性', itemStyle: {color: '#43befc'}, type: 'line', data: [1, 1.06, 1.03, 1.13, 1.04, 1.02, 1, 1.05, 1.02, 1, 1.1, 1.05]},
+          {name: '海水产品-不具可比性', itemStyle: {color: '#1ef9f4'}, type: 'line', data: [1.03, 1.08, 1.05, 1.05, 1.04, 1.07, 1.01, 1.12, 1.02, 1, 1, 1.08]},
+          {name: '淡水产品-具有可比性', itemStyle: {color: '#3afe85'}, type: 'line', data: [1.08, 1.1, 1.02, 1.06, 1.04, 1.05, 1.12, 1.05, 1.05, 1, 1.12, 1.02]},
+          {name: '淡水产品-不具可比性', itemStyle: {color: '#fcee38'}, type: 'line', data: [1.02, 1.05, 1.05, 1.1, 1.04, 1.1, 1.01, 1, 1.02, 1, 1.11, 1.04]},
+        ],
+        dataZoom: [{
+          start: 10,
+          end: 80,
+          backgroundColor: '#105179',
+          fillerColor: '#46b9ef',
+          borderColor: 'transparent',
+          bottom: '2%',
+          height: 10,
+          borderRadius: 10,
+          handleSize: '200%',
+          handleStyle: {
+            color: '#fff',
+          },
+          textStyle: {
+            color: '#fff',
+          },
+        }],
+      }
+    }
+  },
+  mounted() {
+    // this.$nextTick(this.init)
+    setTimeout(this.init, 0)
+  },
+  computed: {
+    fontSize() {
+      return Math.floor(screen.height * 1.48 / 100)
+    },
+  },
+  methods: {
+    init() {
+      this.chart = this.$echarts.init(this.$refs.chart)
+      this.chart.setOption(this.option)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.price-trend
+  width 100%
+  height 100%
+  >.chart
+    width 100%
+    height 95%
+</style>

src/views/components/questions.vue

@@ -39,7 +39,7 @@ export default {
     display flex
     align-items center
     justify-content space-around
-    padding 1rem 0
+    padding .7rem 0
     &+div
       border-top .1rem solid $cardFontColor
     span

src/views/components/special-monitoring.vue

@@ -128,7 +128,8 @@ export default {
     }
   },
   mounted() {
-    this.$nextTick(this.init)
+    // this.$nextTick(this.init)
+    setTimeout(this.init, 0)
   },
   computed: {
     fontSize() {
@@ -150,5 +151,5 @@ export default {
   height 100%
   >.chart
     width 100%
-    height 70%
+    height 95%
 </style>

src/views/components/team-build.vue

 <template>
   <div class="team-build">
-    <div>
+    <div v-if="showChart">
       <m-chart :data="data" :config="config"/>
     </div>
-    <div>
+    <div v-if="showChart">
       <m-chart :data="data2" :config="config2" :options="{xAxis: {splitLine: {show: false}}, yAxis: {splitLine: {show: false}}}"/>
     </div>
     <Select v-model="area" class="custom-select" size="small">
@@ -17,6 +17,7 @@ export default {
   name: 'TeamBuild',
   data() {
     return {
+      showChart: false,
       area: '华北地区',
       options: ['华北地区'],
       config: {
@@ -60,6 +61,9 @@ export default {
       ],
     }
   },
+  mounted() {
+    setTimeout(() => this.showChart = true, 0)
+  },
 }
 </script>
 

src/views/components/trade-situation.vue

+<template>
+  <div class="trade-situation">
+    <div v-if="showChart">
+      <p><span/>成交量占比</p>
+      <m-chart class="chart" :config="config" :data="data"/>
+    </div>
+    <div v-if="showChart">
+      <p><span/>销售额</p>
+      <span class="unit">单位：万元</span>
+      <m-chart class="chart" :config="config2" :data="data2"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TradeSituation',
+  data() {
+    return {
+      showChart: false,
+      config: {
+        colors: ['#3967fc', '#38fd8d', '#f3ff33', '#ffb529', '#ff4747'],
+        legend: {
+          hide: true,
+        },
+        shape: [
+          {type: 'pie', radius: [0, 60], roseType: 'radius', label: {show: true, formatter: '{b}: {c}%'}}
+        ]
+      },
+      data: [
+        {name: '鱼类', value: 36},
+        {name: '虾类', value: 24},
+        {name: '蟹类', value: 12},
+        {name: '贝类', value: 12},
+        {name: '其他', value: 8},
+      ],
+      config2: {
+        colors: [['#18a6ee', '#6f63ed']],
+        legend: {
+          hide: true,
+        },
+        shape: [
+          {type: 'bar', barWidth: '20%', key: 'value', borderRadius: [10, 10, 10, 10]},
+        ],
+        xAxis: {
+          key: 'name',
+        },
+        yAxis: {
+          max: 500000,
+        }
+      },
+      data2: [
+        {name: '鱼类', value: 450000},
+        {name: '虾类', value: 350000},
+        {name: '贝类', value: 400000},
+        {name: '蟹类', value: 210000},
+        {name: '藻类', value: 430000},
+        {name: '其他', value: 310000},
+      ],
+    }
+  },
+  mounted() {
+    setTimeout(() => this.showChart = true, 0)
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.trade-situation
+  width 100%
+  height 100%
+  >div
+    width 100%
+    height 50%
+    position relative
+    .unit
+      position absolute
+      right 1rem
+      top 1rem
+    p
+      display flex
+      font-size 1.2rem
+      font-weight bold
+      align-items center
+      span
+        display inline-block
+        width .3rem
+        height 1.2rem
+        background $edgeColor
+        margin-right .5rem
+    >.chart
+      height calc(100% - 2rem)
+</style>

src/views/main.vue → src/views/disease.vue

@@ -9,9 +9,10 @@
     rows="1fr 1fr 1fr"
     gap="0.5rem"
   >
+    <DiseaseMap />
     <DiseaseSum area="summary"/>
     <m-card area="box1" title="病害预警">
-      <Disease />
+      <DiseaseWarning />
     </m-card>
     <m-card area="box2" title="会诊统计">
       <ConsultationSum />
@@ -32,7 +33,8 @@
 </template>
 
 <script>
-import Disease from './components/disease'
+import DiseaseMap from './components/disease-map'
+import DiseaseWarning from './components/disease-warning'
 import ConsultationSum from './components/consultation-sum'
 import TeamBuild from './components/team-build'
 import Questions from './components/questions'
@@ -42,7 +44,8 @@ import DiseaseSum from './components/disease-sum'
 export default {
   name: 'Main',
   components: {
-    Disease,
+    DiseaseMap,
+    DiseaseWarning,
     ConsultationSum,
     TeamBuild,
     Questions,

src/views/fishing-price.vue

+<template>
+  <m-grid
+    :template="[
+      'map box1 box1',
+      'map box2 box3',
+      'map box2 box4',
+    ]"
+    columns="1fr 0.6fr 0.6fr"
+    rows="1fr 1fr 1fr"
+    gap="0.5rem"
+  >
+    <FishingPriceMap area="map"/>
+    <m-card area="box1" title="价格指数走势图">
+      <PriceTrend />
+    </m-card>
+    <m-card area="box2" title="水产交易情况">
+      <TradeSituation />
+    </m-card>
+    <m-card area="box3" title="价格趋势分析">
+      <PriceAnalysis />
+    </m-card>
+    <m-card area="box4" title="最新行情">
+      <NewQuotation />
+    </m-card>
+  </m-grid>
+</template>
+
+<script>
+import FishingPriceMap from './components/fishing-price-map'
+import PriceTrend from './components/price-trend'
+import TradeSituation from './components/trade-situation'
+import PriceAnalysis from './components/price-analysis'
+import NewQuotation from './components/new-quotation'
+export default {
+  name: 'FishingPrice',
+  components: {
+    FishingPriceMap,
+    PriceTrend,
+    TradeSituation,
+    PriceAnalysis,
+    NewQuotation,
+  },
+  data() {
+    return {}
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+
+</style>