质量安全

index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
-    <title>Dataview Project</title>
+    <title>渔技大屏</title>
     <style>
       html {
         font-size: 1.6vh;

src/App.vue

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

src/assets/css/reset.styl

@@ -51,9 +51,11 @@ $color-main = #5BD5FF
       width .8rem
       height 2rem
       border-radius 1rem
-
+  .ivu-select-small.ivu-select-multiple
+    .ivu-tag
+      display none
   .custom-select
     position absolute
     top 1rem
-    right 1rem
+    right .5rem
     width 7rem

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

@@ -71,6 +71,7 @@ export default {
     init() {
       this.formatData()
       const chart = echarts.init(this.$refs.chart)
+      chart.clear()
       chart.setOption(this.setting)
     },
 

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

@@ -57,7 +57,7 @@ export default {
         {name: '稻鱼种养'},
         {name: '海洋牧场'},
         {name: '水产价格', title: '水产品价格分析', path: '/fishing-price'},
-        {name: '苗种数据'},
+        {name: '苗种'},
       ],
     }
   },

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

src/views/components/disease/consultation-sum.vue

 <template>
   <div class="consultation-sum">
     <div>
-      <p>区域会诊统计</p><span>单位：个</span>
+      <p>区域会诊统计<span>单位：个</span></p>
       <div class="list-wrapper">
         <div v-for="(item, index) in areas" :key="item.name">
-          <p>{{index + 1}}.{{item.name}}</p>
+          <p :title="item.name">{{index + 1}}.{{item.name}}</p>
           <div class="bar-wrapper"><div :style="`width:${item.rate}%;background-color:${colors[index] || '#25add1'}`"></div></div>
           <m-count :value="item.count" :decimal="0"/>
         </div>
       </div>
     </div>
     <div>
-      <p>病种会诊统计</p><span>单位：个</span>
+      <p>病种会诊统计<span>单位：个</span></p>
       <div class="list-wrapper">
-        <div v-for="(item, index) in areas" :key="item.name">
-          <p>{{index + 1}}.{{item.name}}</p>
+        <div v-for="(item, index) in diseases" :key="item.name">
+          <p :title="item.name">{{index + 1}}.{{item.name}}</p>
           <div class="bar-wrapper"><div :style="`width:${item.rate}%;background-color:${colors[index] || '#25add1'}`"></div></div>
           <m-count :value="item.count" :decimal="0"/>
         </div>
@@ -77,10 +77,15 @@ export default {
     >p
       color $edgeColor
       font-weight bold
-    >span
-      display block
-      text-align right
-      font-size .9rem
+      display flex
+      align-items center
+      justify-content space-between
+      margin-bottom .6rem
+      >span
+        display block
+        color #ccc
+        font-size .9rem
+        margin-right 1rem
     .list-wrapper
       height 80%
       overflow-y scroll
@@ -90,6 +95,11 @@ export default {
         align-items center
         justify-content space-between
         line-height 2.5
+        p
+          max-width 55%
+          overflow hidden
+          white-space nowrap
+          text-overflow ellipsis
         .bar-wrapper
           flex 1
           margin 0 .5rem

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

@@ -129,7 +129,7 @@ export default {
         },
         series: [],
         dataZoom: [{
-          start: 50,
+          start: 0,
           end: 100,
           backgroundColor: '#105179',
           fillerColor: '#46b9ef',
@@ -186,6 +186,7 @@ export default {
 .disease-forecast
   width 100%
   height 100%
+  overflow hidden
   >.chart
     width 100%
     height 95%

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

@@ -64,7 +64,7 @@ export default {
         return ({data}) => {
           const {data: info} = data
           return `
-          <div class="disease-map-tooltip-info">
+          <div class="map-tooltip-info">
             <h3>${data.name}</h3>
             <p><span>联系人：</span>${info.name}</p>
             <p><span>联系电话：</span>${info.phone}</p>
@@ -240,7 +240,7 @@ export default {
     z-index 99
 </style>
 <style lang="stylus">
-.disease-map-tooltip-info
+.map-tooltip-info
   color $edgeColor
   padding 1rem
   border .1rem solid $edgeColor

src/views/components/disease/special-monitoring.vue

@@ -52,6 +52,7 @@ export default {
         },
         xAxis: {
           type: 'category',
+          boundaryGap: false,
           axisLine: {
             lineStyle: {
               color: 'rgba(91,213,255,0.1)'
@@ -71,7 +72,7 @@ export default {
             // name: '单位：个',
             max: 150,
             min: 0,
-            interval: 30,
+            // interval: 30,
             axisLine: {
               show: false,
             },
@@ -96,7 +97,7 @@ export default {
             // name: '单位：个',
             max: 350,
             min: 0,
-            interval: 70,
+            // interval: 70,
             axisLine: {
               show: false,
             },
@@ -158,6 +159,9 @@ export default {
         {name: '阳性监测点数量', itemStyle: {color: 'gold'}, type: 'line', data: list.map(item => item.data1)},
         {name: '阳性样品数量', itemStyle: {color: 'red'}, yAxisIndex: 1, type: 'line', data: list.map(item => item.data2)},
       ]
+      const max = Math.max(...list.map(item => item.data1), ...list.map(item => item.data2))
+      this.option.yAxis[0].max = max
+      this.option.yAxis[1].max = max
       this.chart.setOption(this.option)
     },
   }

src/views/components/disease/team-build.vue

 <template>
   <div class="team-build">
-    <div v-if="showChart">
-      <m-chart :data="data" :config="config"/>
+    <div>
+      <!-- <m-chart :data="data" :config="config"/> -->
+      <div v-for="item in data" :key="item.name">
+        <span>{{item.name}}:</span>
+        <m-count :value="item.value" :decimal="0" :color="item.color"/> 人
+      </div>
     </div>
-    <div v-if="showChart">
-      <m-chart :data="data2" :config="config2" :options="{xAxis: {splitLine: {show: false}}, yAxis: {splitLine: {show: false}}}"/>
+    <div class="chart-wrapper" v-if="showChart">
+      <p>能力建设</p>
+      <span>单位：次</span>
+      <div>
+        <m-chart :data="data2" :config="config2" :options="{xAxis: {splitLine: {show: false}}, yAxis: {splitLine: {show: false}}}"/>
+      </div>
     </div>
     <Select v-model="area" @on-change="handleChange" class="custom-select" size="small" transfer>
       <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
@@ -49,20 +57,10 @@ export default {
       showChart: false,
       area: '华北地区',
       options: ['华北地区', '华东地区', '华南地区', '华西地区', '华中地区'],
-      config: {
-        colors: ['#535af1', '#39d655', '#ffd825'],
-        legend: {
-          align: 'left',
-          orient: 'vertical',
-        },
-        shape: [
-          {type: 'pie', radius: [20 * Number((screen.height / 800).toFixed(1)), 50 * Number((screen.height / 800).toFixed(1))], roseType: 'radius', center: ['65%', '70%']}
-        ]
-      },
       data: [
-        {name: '执业人员', value: 168},
-        {name: '乡村兽医', value: 1585},
-        {name: '官方兽医', value: 23654},
+        {name: '执业人员', value: 168, color: '#535af1'},
+        {name: '乡村兽医', value: 1585, color: '#39d655'},
+        {name: '官方兽医', value: 23654, color: '#ffd825'},
       ],
       config2: {
         colors: ['#00d2ff'],
@@ -101,9 +99,28 @@ export default {
   width 100%
   height 100%
   display flex
+  flex-direction column
+  overflow hidden
   >div
-    flex 1
     &:first-child
-      border-right .1rem solid #175d83
-      margin-right 1rem
+      display flex
+      align-items center
+      justify-content space-around
+      border-bottom .1rem solid #175d83
+      line-height 2.5
+    &.chart-wrapper
+      flex 1
+      position relative
+      >div
+        width 100%
+        height calc(100% - 3rem)
+      p
+        text-align center
+        margin .5rem 0
+        font-weight bold
+      span
+        position absolute
+        top .5rem
+        left .5rem
+        font-size .9rem
 </style>

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

@@ -5,7 +5,7 @@
     <h2><m-count class="count" :value="80" :decimal="0"/> 个</h2>
   </BorderBox>
   <div class="map" ref="map"/>
-  <div class="visual-range">
+  <!-- <div class="visual-range">
     <p>
       采集点数量<br/>
       <span>（单位：个）</span>
@@ -15,7 +15,7 @@
       <m-count class="count" :value="0" :decimal="0"/>
       <m-count class="count" :value="80" :decimal="0"/>
     </div>
-  </div>
+  </div> -->
 </div>
 </template>
 
@@ -162,7 +162,7 @@ export default {
         return ({data}) => {
           if (data.name && data.address) {
             return `
-              <div class="disease-map-tooltip-info">
+              <div class="map-tooltip-info">
                 <h3>${data.name}</h3>
                 <p><span>地址：</span>${data.address}</p>
                 <p><span>最新采集时间：</span>${data.newDate}</p>
@@ -349,6 +349,7 @@ export default {
   width 100%
   height 100%
   position relative
+  padding-top 3rem
   >.map
     position absolute
     width 45%
@@ -389,7 +390,7 @@ export default {
           right 0
 </style>
 <style lang="stylus">
-.disease-map-tooltip-info
+.map-tooltip-info
   color $edgeColor
   padding 1rem
   border .1rem solid $edgeColor

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

 <template>
   <div class="price-analysis" v-if="showChart">
     <m-chart :config="config" :data="data"/>
-    <Select v-model="type" class="custom-select" @on-change="setChartData" size="small" transfer>
-      <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
+    <Select :value="type" class="custom-select" multiple :max-tag-count="3" @on-change="handleChange" size="small" transfer>
+      <Option v-for="item in options" :key="item.name" :disabled="item.disabled" :value="item.name">{{item.name}}</Option>
     </Select>
   </div>
 </template>
 
 <script>
 const mock = [
-  {type: '青鱼', date: '2020-03', value: 23},
-  {type: '青鱼', date: '2020-04', value: 21},
-  {type: '青鱼', date: '2020-05', value: 23},
-  {type: '青鱼', date: '2020-06', value: 22},
-  {type: '青鱼', date: '2020-07', value: 22},
-  {type: '青鱼', date: '2020-08', value: 22},
-  {type: '青鱼', date: '2020-09', value: 23},
-  {type: '青鱼', date: '2020-10', value: 22},
-  {type: '青鱼', date: '2020-11', value: 22},
-  {type: '草鱼', date: '2020-03', value: 18},
-  {type: '草鱼', date: '2020-04', value: 16},
-  {type: '草鱼', date: '2020-05', value: 18},
-  {type: '草鱼', date: '2020-06', value: 10},
-  {type: '草鱼', date: '2020-07', value: 18},
-  {type: '草鱼', date: '2020-08', value: 11},
-  {type: '草鱼', date: '2020-09', value: 10},
-  {type: '草鱼', date: '2020-10', value: 16},
-  {type: '草鱼', date: '2020-11', value: 12},
-  {type: '鲢', date: '2020-03', value: 7},
-  {type: '鲢', date: '2020-04', value: 10},
-  {type: '鲢', date: '2020-05', value: 5},
-  {type: '鲢', date: '2020-06', value: 6},
-  {type: '鲢', date: '2020-07', value: 7},
-  {type: '鲢', date: '2020-08', value: 7},
-  {type: '鲢', date: '2020-09', value: 8},
-  {type: '鲢', date: '2020-10', value: 7},
-  {type: '鲢', date: '2020-11', value: 6},
-  {type: '鳙', date: '2020-03', value: 10},
-  {type: '鳙', date: '2020-04', value: 18},
-  {type: '鳙', date: '2020-05', value: 12},
-  {type: '鳙', date: '2020-06', value: 12},
-  {type: '鳙', date: '2020-07', value: 16},
-  {type: '鳙', date: '2020-08', value: 10},
-  {type: '鳙', date: '2020-09', value: 15},
-  {type: '鳙', date: '2020-10', value: 10},
-  {type: '鳙', date: '2020-11', value: 14},
-  {type: '南美白对虾', date: '2020-03', value: 50},
-  {type: '南美白对虾', date: '2020-04', value: 46},
-  {type: '南美白对虾', date: '2020-05', value: 106},
-  {type: '南美白对虾', date: '2020-06', value: 95},
-  {type: '南美白对虾', date: '2020-07', value: 80},
-  {type: '南美白对虾', date: '2020-08', value: 51},
-  {type: '南美白对虾', date: '2020-09', value: 47},
-  {type: '南美白对虾', date: '2020-10', value: 97},
-  {type: '南美白对虾', date: '2020-11', value: 89},
-  {type: '中华绒螯蟹', date: '2020-03', value: 60},
-  {type: '中华绒螯蟹', date: '2020-04', value: 89},
-  {type: '中华绒螯蟹', date: '2020-05', value: 112},
-  {type: '中华绒螯蟹', date: '2020-06', value: 128},
-  {type: '中华绒螯蟹', date: '2020-07', value: 65},
-  {type: '中华绒螯蟹', date: '2020-08', value: 162},
-  {type: '中华绒螯蟹', date: '2020-09', value: 168},
-  {type: '中华绒螯蟹', date: '2020-10', value: 145},
-  {type: '中华绒螯蟹', date: '2020-11', value: 162},
-  {type: '克氏原螯虾', date: '2020-03', value: 42},
-  {type: '克氏原螯虾', date: '2020-04', value: 31},
-  {type: '克氏原螯虾', date: '2020-05', value: 38},
-  {type: '克氏原螯虾', date: '2020-06', value: 43},
-  {type: '克氏原螯虾', date: '2020-07', value: 34},
-  {type: '克氏原螯虾', date: '2020-08', value: 33},
-  {type: '克氏原螯虾', date: '2020-09', value: 31},
-  {type: '克氏原螯虾', date: '2020-10', value: 43},
-  {type: '克氏原螯虾', date: '2020-11', value: 37},
+  {type: '青鱼', date: '2020.08', value: 22},
+  {type: '青鱼', date: '2020.09', value: 23},
+  {type: '青鱼', date: '2020.10', value: 22},
+  {type: '青鱼', date: '2020.11', value: 22},
+  {type: '青鱼', date: '2020.12', value: 22},
+  {type: '草鱼', date: '2020.08', value: 11},
+  {type: '草鱼', date: '2020.09', value: 10},
+  {type: '草鱼', date: '2020.10', value: 16},
+  {type: '草鱼', date: '2020.11', value: 12},
+  {type: '草鱼', date: '2020.12', value: 12},
+  {type: '鲢', date: '2020.08', value: 7},
+  {type: '鲢', date: '2020.09', value: 8},
+  {type: '鲢', date: '2020.10', value: 7},
+  {type: '鲢', date: '2020.11', value: 6},
+  {type: '鲢', date: '2020.12', value: 6},
+  {type: '鳙', date: '2020.08', value: 10},
+  {type: '鳙', date: '2020.09', value: 15},
+  {type: '鳙', date: '2020.10', value: 10},
+  {type: '鳙', date: '2020.11', value: 14},
+  {type: '鳙', date: '2020.12', value: 14},
+  {type: '南美白对虾', date: '2020.08', value: 51},
+  {type: '南美白对虾', date: '2020.09', value: 47},
+  {type: '南美白对虾', date: '2020.10', value: 97},
+  {type: '南美白对虾', date: '2020.11', value: 89},
+  {type: '南美白对虾', date: '2020.12', value: 89},
+  {type: '中华绒螯蟹', date: '2020.08', value: 162},
+  {type: '中华绒螯蟹', date: '2020.09', value: 168},
+  {type: '中华绒螯蟹', date: '2020.10', value: 145},
+  {type: '中华绒螯蟹', date: '2020.11', value: 162},
+  {type: '中华绒螯蟹', date: '2020.12', value: 162},
+  {type: '克氏原螯虾', date: '2020.08', value: 33},
+  {type: '克氏原螯虾', date: '2020.09', value: 31},
+  {type: '克氏原螯虾', date: '2020.10', value: 43},
+  {type: '克氏原螯虾', date: '2020.11', value: 37},
+  {type: '克氏原螯虾', date: '2020.12', value: 37},
 ]
 export default {
   name: 'PriceAnalysis',
   data() {
     return {
-      type: '青鱼',
+      type: ['青鱼'],
       options: [
-        '青鱼',
-        '草鱼',
-        '鲢',
-        '鳙',
-        '南美白对虾',
-        '中华绒螯蟹',
-        '克氏原螯虾'
+        {name: '青鱼', disabled: false},
+        {name: '草鱼', disabled: false},
+        {name: '鲢', disabled: false},
+        {name: '鳙', disabled: false},
+        {name: '南美白对虾', disabled: false},
+        {name: '中华绒螯蟹', disabled: false},
+        {name: '克氏原螯虾', disabled: false},
       ],
       showChart: false,
       config: {
         colors: ['#eeb514', '#5eec67', '#01adfe'],
         legend: {align: 'right'},
         shape: [
-          {key: 'value', type: 'line'},
+          // {key: 'value', type: 'line'},
           // {key: 'fish2', name: '鲫鱼', type: 'line'},
           // {key: 'fish3', name: '南美白对虾', type: 'line'},
         ],
         yAxis: {
-          name: '元',
+          name: '单位：元',
           // max: 50,
         },
         xAxis: {
@@ -120,8 +92,34 @@ export default {
     this.setChartData(this.type)
   },
   methods: {
+    handleChange(type) {
+      this.type = type
+      this.setChartData(type)
+      this.options.forEach(item => item.disabled = (type.length >= 3 && type.indexOf(item.name) < 0))
+    },
     setChartData(type) {
-      this.data = mock.filter(item => item.type === type)
+      let result = []
+      const totalNumbers = []
+      this.config.shape = type.map((item, i) => {
+        if (result.length === 0) {
+          result = mock.filter(e => e.type === item).map(e => {
+            totalNumbers.push(e.value)
+            return {date: e.date, [`fish${i+1}`]: e.value, }
+          })
+        } else {
+          const list = mock.filter(e => e.type === item)
+          result.forEach(e => {
+            const {value} = list.find(f => f.date === e.date)
+            totalNumbers.push(value || 0)
+            e[`fish${i+1}`] = value || 0
+          })
+        }
+        return {key: `fish${i+1}`, name: item, type: 'line'}
+      })
+      // 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)
     },
   }
 }
@@ -131,4 +129,5 @@ export default {
 .price-analysis
   width 100%
   height 100%
+  overflow hidden
 </style>

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

@@ -11,7 +11,8 @@ const mock = [
   {date: '2020年3月', val1: 0.9725, val2: 0.9674, val3: 0.9746, val4: 0.9639, val5: 0.9697, val6: 0.9718},
   {date: '2020年2月', val1: 0.9889, val2: 0.9814, val3: 0.9564, val4: 0.9603, val5: 1.03, val6: 1.008},
   {date: '2020年1月', val1: 1.0154, val2: 1.015, val3: 1.1018, val4: 1.0952, val5: 0.906, val6: 0.9134},
-  {date: '2019年12月', val1: 1.309, val2: 1.1943, val3: 1.0447, val4: 1.0434, val5: 1.6439, val6: 1.3855},
+  {date: '2019年12月', val1: 1.109, val2: 1.1943, val3: 1.0447, val4: 1.0434, val5: 1.1439, val6: 1.1855},
+  // {date: '2019年12月', val1: 1.309, val2: 1.1943, val3: 1.0447, val4: 1.0434, val5: 1.6439, val6: 1.3855},
   {date: '2019年11月', val1: 0.9906, val2: 0.9933, val3: 1.0069, val4: 1.0062, val5: 0.9699, val6: 0.977},
   {date: '2019年10月', val1: 0.9848, val2: 0.9826, val3: 0.9895, val4: 0.9882, val5: 0.9789, val6: 0.9755},
   {date: '2019年9月', val1: 0.9864, val2: 0.9825, val3: 0.9718, val4: 0.9731, val5: 1.0049, val6: 0.9943},
@@ -63,8 +64,8 @@ export default {
         },
         grid: {
           top: '30%',
-          left: '5%',
-          right: '1%',
+          left: '3%',
+          right: '3%',
           bottom: 'auto',
           width: 'auto',
           height: '60%',
@@ -90,8 +91,8 @@ export default {
           {
             type: 'value',
             // name: '单位：个',
-            max: 1.8,
-            min: 0.8,
+            max: 1.2,
+            min: 0.9,
             // interval: 0.05,
             axisLine: {
               show: false,

src/views/components/fishing-price/trade-situation.vue

@@ -59,7 +59,7 @@ export default {
     return {
       showChart: false,
       config: {
-        colors: ['#3967fc', '#38fd8d', '#f3ff33', '#ffb529', '#ff4747'],
+        colors: ['#38fd8d', '#8c7eee', '#f3ff33', '#ffb529', '#ff4747', '#47B3FF'],
         legend: {
           hide: true,
         },

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

 <template>
-  <div class="company-rate">
-    <m-chart :data="data" :config="config"/>
+  <div class="company-rate" v-if="showChart">
+    <m-chart :data="data" :config="config" :options="{legend: {top: '15%'}}"/>
   </div>
 </template>
 
@@ -8,11 +8,35 @@
 export default {
   name: 'CompanyRate',
   data() {
-    return {}
+    return {
+      showChart: false,
+      config: {
+        colors: ['#0f4aff', '#ff9e45', '#edfe63', '#8f45ee', '#05f8e8'],
+        legend: {
+          align: 'right',
+          orient: 'vertical',
+        },
+        shape: [
+          {type: 'pie', radius: [20 * Number((screen.height / 800).toFixed(1)), 80 * Number((screen.height / 800).toFixed(1))], roseType: 'radius', center: ['30%', '50%']}
+        ]
+      },
+      data: [
+        {name: '江苏', value: 900},
+        {name: '湖北', value: 847},
+        {name: '江西', value: 400},
+        {name: '海南', value: 300},
+        {name: '河南', value: 200},
+      ],
+    }
   },
+  mounted() {
+    setTimeout(() => this.showChart = true, 0)
+  }
 }
 </script>
 
 <style lang="stylus" scoped>
-.company
+.company-rate
+  width 100%
+  height 100%
 </style>

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

+<template>
+  <div class="forecast">
+    <div class="chart" ref="chart" />
+  </div>
+</template>
+
+<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},
+]
+import echarts from 'echarts'
+export default {
+  name: 'Forecast',
+  data() {
+    return {
+      chart: null,
+      option: {
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: '16%',
+          left: '5%',
+          right: '5%',
+          bottom: '10%',
+          width: 'auto',
+          height: 'auto',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(91,213,255,0.1)'
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#5bd5ff',
+            },
+            fontSize: this.fontSize,
+          },
+          data: mock.map(item => item.name)
+        },
+        yAxis: {
+          type: 'value',
+          name: '单位：次',
+          max: 500,
+          min: 0,
+          // interval: 100,
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#fff',
+            },
+            fontSize: this.fontSize,
+          },
+          nameTextStyle: {
+            color: '#fff',
+            fontSize: this.fontSize,
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(91,213,255,0.1)'
+            }
+          },
+        },
+        series: [],
+        dataZoom: [{
+          start: 0,
+          end: 100,
+          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.setChartData()
+    },
+    setChartData() {
+      const list = mock.map(item => item.value)
+      this.option.series = [
+        {
+          itemStyle: {color: 'gold'}, areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {offset: 0, color: 'rgba(255,215,0,0.8)'},
+              {offset: 1, color: 'rgba(255,215,0,0.1)'}
+            ])},
+          smooth: true, type: 'line', data: list
+        },
+      ]
+      this.option.yAxis = Object.assign(this.option.yAxis, {max: Math.max(...list)})
+      this.chart.setOption(this.option)
+    },
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.forecast
+  width 100%
+  height 100%
+  >.chart
+    width 100%
+    height 95%
+</style>

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>
+      <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
+    </Select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MedicineFlow',
+  data() {
+    return {
+      showChart: false,
+      type: '杀虫药',
+      options: ['杀虫药'],
+      config: {
+        colors: ['#8c7eee', '#57e8ed', '#feb301', '#f49a8f', '#fda4bd', '#f3729b', '#f87be2', '#e95dc1'],
+        legend: {
+          align: 'right',
+          orient: 'vertical',
+        },
+        shape: [
+          {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},
+      ],
+    }
+  },
+  mounted() {
+    setTimeout(() => this.showChart = true, 0)
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.medicine-flow
+  width 100%
+  height 100%
+</style>

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

+<template>
+  <div class="medicine-frequency">
+    <Select v-model="type" 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>
+    <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>
+      </i-col>
+    </Row>
+    <m-scroll :length="model.length" :limit="5">
+      <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 :style="`text-align: ${col.align || 'left'};color: ${col.color};width:100%;`">{{row[col.key]}}</div>
+        </i-col>
+      </Row>
+    </m-scroll>
+  </div>
+</template>
+
+<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},
+]
+export default {
+  name: 'MedicineFrequency',
+  data() {
+    return {
+      type: '杀虫药',
+      options: ['杀虫药'],
+      layout: [
+        {
+          title: '姓名',
+          key: 'name',
+          width: 6,
+          align: 'center',
+        },
+        {
+          title: '时间',
+          key: 'date',
+          width: 12,
+          align: 'center',
+        },
+        {
+          title: '次数',
+          key: 'count',
+          width: 6,
+          align: 'center',
+        },
+      ],
+      model: mock,
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.medicine-frequency
+  width 100%
+  height 100%
+  overflow hidden
+  .row
+    display flex
+    align-items center
+    // line-height 2.4rem
+    line-height 2.5
+    &.row-title
+      font-weight bold
+      background-color $color-map()
+      font-size 1rem
+    &:nth-child(2n)
+      background-color $color-map(0.15)
+  .col
+    padding 0 .5rem
+    display flex
+    align-items center
+    flex-wrap wrap
+    font-size .9rem
+</style>

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

+<template>
+  <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>
+        <span :style="`color:${getColor(item.status)}`">{{item.date}} {{item.status ? '已处理' : '未处理'}}</span>
+      </div>
+    </m-scroll>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Online',
+  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},
+      ],
+    }
+  },
+  methods: {
+    getColor(status) {
+      return status ? '#3897b5' : '#d04e4b'
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.online
+  width 100%
+  height 100%
+  overflow hidden
+  .item
+    display flex
+    align-items center
+    justify-content space-between
+    line-height 2.5
+    border-bottom .1rem solid $color-map(.6)
+    >p
+      width 66%
+      overflow hidden
+      white-space nowrap
+      text-overflow ellipsis
+    >span
+      font-size .9rem
+</style>

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

+<template>
+  <div class="qualified-rate">
+    <div v-for="item in list" :key="item.name">
+      <i-circle
+        :percent="item.value"
+        :size="80 * sizeRate"
+        :trail-width="6 * sizeRate"
+        :stroke-color="item.color"
+        trail-color="rgba(255,255,255,0.1)">
+        <span :style="`color:${item.color};font-size:1.5rem;font-weight:bold;`">{{item.value}}%</span>
+      </i-circle>
+      <p :style="`color:${item.color}`">{{item.name}}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'QualifiedRate',
+  data() {
+    return {
+      list: [
+        {name: '孔雀石绿', value: 80, color: '#4ec6fd'},
+        {name: '硝基呋喃', value: 72, color: '#40fdfc'},
+        {name: '氯霉素', value: 20, color: '#fdd80a'},
+      ]
+    }
+  },
+  computed: {
+    sizeRate() {
+      return Number((screen.height / 800).toFixed(1))
+    },
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.qualified-rate
+  width 100%
+  height 100%
+  display flex
+  align-items center
+  justify-content space-around
+  >div
+    p
+      font-size 1.2rem
+      text-align center
+      font-weight bold
+      margin-top 1rem
+</style>

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

+<template>
+<div class="map-wrapper">
+  <BorderBox class="sum">
+    <div>
+      <p>查询量</p>
+      <h2><m-count class="count" :value="5441" :decimal="0"/>万</h2>
+    </div>
+    <div>
+      <p>追溯码打印量</p>
+      <h2><m-count class="count" :value="365" :decimal="0"/>万</h2>
+    </div>
+  </BorderBox>
+  <div class="map" ref="map"/>
+</div>
+</template>
+
+<script>
+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 }
+
+]
+export default {
+  name: 'QualityMap',
+  components: {
+    BorderBox,
+  },
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    visualLabel: {
+      type: Array,
+      default() {
+        return ['高', '低']
+      }
+    },
+    visualFormatter: {
+      type: [String, Function],
+      default() {
+        return ({data}) => {
+          return `
+            <div class="map-tooltip-info">
+              <h3>${data.name}</h3>
+              <p><span>追溯企业数量：</span>${data.value} 个</p>
+            </div>
+          `
+        }
+      }
+    },
+    visualConfig: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+  },
+  data() {
+    return {
+      range: [0, 80],
+      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.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)
+    // },
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.map-wrapper
+  width 100%
+  height 100%
+  position relative
+  >.map
+    position absolute
+    width 45%
+    height 300%
+    z-index 99
+    top 5%
+  >.sum
+    display flex
+    width 40%
+    margin 1rem auto 0
+    justify-content space-between
+    >div
+      text-align center
+      font-weight bold
+      h2,.count
+        color $edgeColor !important
+        font-family $font-pang !important
+        font-size 1.5rem !important
+</style>
+<style lang="stylus">
+.map-tooltip-info
+  color $edgeColor
+  padding 1rem
+  border .1rem solid $edgeColor
+  span
+    color #fff
+</style>

src/views/quality-safety.vue

@@ -9,30 +9,51 @@
     rows="1fr 1fr 1fr"
     gap="0.5rem"
   >
+    <QualityMap area="map"/>
     <m-card area="box1" title="质量预警">
       <QualityWarning />
     </m-card>
     <m-card area="box2" title="企业占比">
+      <CompanyRate />
     </m-card>
     <m-card area="box3" title="检测合格率">
+      <QualifiedRate />
     </m-card>
     <m-card area="box4" title="在线会诊">
+      <Online />
     </m-card>
     <m-card area="box5" title="药品流通去向">
+      <MedicineFlow />
     </m-card>
     <m-card area="box6" title="药品购买频次分析">
+      <MedicineFrequency />
     </m-card>
     <m-card area="box7" title="病害测报">
+      <Forecast />
     </m-card>
   </m-grid>
 </template>
 
 <script>
 import QualityWarning from './components/quality-safety/quality-warning'
+import CompanyRate from './components/quality-safety/company-rate'
+import QualifiedRate from './components/quality-safety/qualified-rate'
+import Online from './components/quality-safety/online'
+import MedicineFlow from './components/quality-safety/medicine-flow'
+import MedicineFrequency from './components/quality-safety/medicine-frequency'
+import Forecast from './components/quality-safety/forecast'
+import QualityMap from './components/quality-safety/quality-map'
 export default {
   name: 'QualitySafety',
   components: {
     QualityWarning,
+    CompanyRate,
+    QualifiedRate,
+    Online,
+    MedicineFlow,
+    MedicineFrequency,
+    Forecast,
+    QualityMap,
   },
   data() {
     return {}