增加“企业介绍”

src/components/MonitorCard/monitor-card.vue

@@ -122,7 +122,7 @@ $size()
   $size()
   .card-title
     color #fff
-    font-size 1.4rem
+    font-size 2rem
     font-family $font-pang
   .card-content
     background $color-map(0.1)

src/router/index.js

@@ -4,6 +4,7 @@ import Router from 'vue-router'
 // const Main = () => import('@/views/project-management/main')
 // const ChinaMap = () => import('@/views/china')
 // const MapTest = () => import('@/views/map-test')
+const GDEnterprise = () => import('@/views/guangdong/gd-enterprise') // 广东 - 企业专题
 const GDProduction = () => import('@/views/guangdong/gd-production') // 广东 - 生产专题
 const GDTrade = () => import('@/views/guangdong/gd-trade') // 广东 - 交易专题
 const GDDisease = () => import('@/views/guangdong/gd-disease') // 广东 - 疫病专题
@@ -44,6 +45,11 @@ export default new Router({
       name: 'industry',
       component: GDIndustry
     },
+    {
+      path: '/enterprise',
+      name: 'enterprise',
+      component: GDEnterprise
+    },
     {
       path: '/map3d',
       name: 'map3d',

src/util/common.js

+/** 公共方法 */
+
+export default {
+  /**
+     * 在深层数据结构中取值（为了替代类似 res && res.data && res.data.content这种写法）
+     * @param {Object} obj [必填-需要取值的目标对象（例：res）]
+     * @param {String} path [必填-数据结构路径（例：'data.content'）]
+     * @param {Any} defaultValue [可选-如果取不到值则默认返回该值]
+     */
+  confirm(obj, path, defaultValue = null) {
+    if (!obj || typeof(obj) != 'object' || !path || typeof(path) != 'string') return
+    const reducer = (accumulator, currentValue) =>
+      (accumulator && accumulator[currentValue]) ?
+        accumulator[currentValue] :
+        defaultValue
+
+    path = path.split('.')
+    return path.reduce(reducer, obj)
+  },
+  /**
+     *  -----  柯里化版本 （为了不再重复输入obj这个参数） -----
+     * 在深层数据结构中取值（为了替代类似 res && res.data && res.data.content这种写法）
+     * @param {Object} obj [必填-需要取值的目标对象（例：res）]
+     */
+  confirm_currying(obj) {
+    if (!obj || typeof(obj) != 'object') return
+    return (path, defaultValue = null) => {
+      if (!path || typeof(path) != 'string') return
+      const reducer = (accumulator, currentValue) =>
+        (accumulator && accumulator[currentValue]) ?
+          accumulator[currentValue] :
+          defaultValue
+      path = path.split('.')
+      return path.reduce(reducer, obj)
+    }
+  },
+  /**
+     * 判断一维数组中是否存在某个值
+     * @param {String} value 需要校验的字符串
+     * @param {Array} validList 被查找的一维数组
+     * @return {Boolean}   是否存在的结果
+     */
+  oneOf(value, validList) {
+    for (let i = 0; i < validList.length; i++) {
+      if (value === validList[i]) {
+        return true
+      }
+    }
+    return false
+  },
+  /**
+     * 转换为金钱格式(千分位且保留两位小数)
+     * @param {Number | String} num [需转换的数字或字符串]
+     */
+  toMoney(num) {
+    if (!num) {
+      return 0.00
+    }
+    num = this.toFloat(num).toFixed(2)
+    const arr = num.toString().split('.')
+    let int = (arr[0] || 0).toString(),
+      result = ''
+    while (int.length > 3) {
+      result = ',' + int.slice(-3) + result
+      int = int.slice(0, int.length - 3)
+    }
+    if (int) {
+      result = int + result
+    }
+    return `${result}.${arr[1]}`
+  },
+
+  /**
+     * 手机号码校验
+     * @param {String} num [需校验的手机号码]
+     */
+  checkPhone(num) {
+    if (!num) return false
+    const filter = /^1[3-9][0-9]{9}$/
+    return filter.test(num)
+  },
+
+  /**
+     * 固定电话号码校验
+     * @param {String} num [需校验的固话]
+     */
+  checkTel(num) {
+    if (!num) return false
+    const filter = /^(?:0[1-9][0-9]{1,2}-)?[2-8][0-9]{6,7}$/
+    return filter.test(num)
+  },
+
+  /**
+     * 身份证号码校验
+     * @param {String} num [需校验的身份证号码]
+     */
+  checkID(num) {
+    if (!num) return false
+    const filter = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/
+    return filter.test(num)
+  },
+  /**
+     * 数字校验(整数或者小数)
+     * @param {String} num [需校验的数字]
+     */
+  checkNumber(num) {
+    if (!num && num != 0) return false
+    const filter = /^[0-9]+\.{0,1}[0-9]{0,2}$/
+    return filter.test(num)
+  },
+  /**
+     * 邮编校验(整数或者小数)
+     * @param {String} num [需校验的数字]
+     */
+  checkZipCode(num) {
+    if (!num && num != 0) return false
+    const filter = /^[0-9]{6}$/
+    return filter.test(num)
+  },
+  /**
+     * 文本校验(只能为中文、英文、数字组合，不允许其他特殊符号)
+     * @param {String} txt [需校验的文本]
+     */
+  checkContent(txt) {
+    const filter = /^[\u4E00-\u9FA5A-Za-z0-9]+$/
+    return filter.test(txt)
+  },
+  /**
+     * 密码校验(6位以上数字字母的组合)
+     * @param {String} txt [需校验的文本]
+     */
+  checkPassword(num) {
+    if (!num && num != 0) return false
+    const filter = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/
+    return filter.test(num)
+  },
+
+  /**
+     * 获取URL执行参数值
+     * @param {String} variable 地址参数名
+     * @return false 未找到；
+     */
+  getQueryVariable(variable) {
+    var query = window.location.search.substring(1)
+    var vars = query.split('&')
+    for (var i = 0; i < vars.length; i++) {
+      var pair = vars[i].split('=')
+      if (pair[0] == variable) {
+        return pair[1]
+      }
+    }
+  },
+  /**
+     * 获取当前年
+     *
+     */
+  getCurrentYear() {
+    var date = new Date
+    return date.getFullYear()
+  },
+  /**
+     * 接收带时分秒的时间格式，返回去掉时分秒的时间格式
+     * @param {String} val
+     */
+  strTime(val) {
+    if (val === undefined || val == null) return
+    val = val.toString()
+    if (val == null || val == '') {
+      return ''
+    } else {
+      return val.slice(0, val.indexOf(' '))
+    }
+  },
+  /**
+     *  判断传入参数的类型，以字符串的形式返回
+     *  @obj：数据
+     **/
+  dataType(obj) {
+    if (obj === null) return 'Null'
+    if (obj === undefined) return 'Undefined'
+    return Object.prototype.toString.call(obj).slice(8, -1)
+  },
+  /**
+     * 处理对象参数值，排除对象参数值为”“、null、undefined，并返回一个新对象
+     **/
+  dealObjectValue(obj) {
+    var param = {}
+    if (obj === null || obj === undefined || obj === '') return param
+    for (var key in obj) {
+      if (this.dataType(obj[key]) === 'Object') {
+        param[key] = dealObjectValue(obj[key])
+      } else if (obj[key] !== null && obj[key] !== undefined && obj[key] !== '') {
+        param[key] = obj[key]
+      }
+    }
+    return param
+  },
+
+  /**
+   * 判断是否是ie并返回版本号
+   */
+  IEVersion() {
+    const userAgent = navigator.userAgent //取得浏览器的userAgent字符串
+    const isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 //判断是否IE<11浏览器
+    const isEdge = userAgent.indexOf('Edge') > -1 && !isIE //判断是否IE的Edge浏览器
+    const isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1
+    if(isIE) {
+      const reIE = new RegExp('MSIE (\\d+\\.\\d+);')
+      reIE.test(userAgent)
+      const fIEVersion = parseFloat(RegExp['$1'])
+      if(fIEVersion == 7) {
+        return 7
+      } else if(fIEVersion == 8) {
+        return 8
+      } else if(fIEVersion == 9) {
+        return 9
+      } else if(fIEVersion == 10) {
+        return 10
+      } else {
+        return 6//IE版本<=7
+      }
+    } else if(isEdge) {
+      return 'edge'//edge
+    } else if(isIE11) {
+      return 11 //IE11
+    }else{
+      return -1//不是ie浏览器
+    }
+  },
+
+  /**
+   * 输入数字转换成大写字母，比如 输入 0 输出 'A'
+   * @param {Number} num 输入的数字
+   */
+  numToLetter(num) {
+    if (!num && num != 0) return null
+    return (Number(num) + 10).toString(36).toUpperCase()
+  }
+}

src/views/guangdong/components/enterprise-card.vue

+<template>
+  <div class="enterprise-card">
+    <template v-if="mode=='simple'">
+      <div class="enterprise-card enterprise-card-simple">
+        <div class="base simple-base">
+          <p class="title">联系方式</p>
+          <p class="detail">{{enterprise.address}}</p>
+          <p class="detail">{{enterprise.contact}}</p>
+        </div>
+        <div class="logo simple-logo">
+          <img width="60%" :src="$api.FILE_URL+enterprise.logoPath" />
+        </div>
+      </div>
+    </template>
+    <template v-if="mode=='complete'">
+      <div class="enterprise-card enterprise-card-complete">
+        <div class="base complete-base">
+          <p class="enterprise-name">{{enterprise.name}}</p>
+          <p class="detail">{{enterprise.address}}</p>
+          <p class="detail">{{enterprise.contact}}</p>
+        </div>
+        <div class="logo complete-logo">
+          <img width="60%" :src="$api.FILE_URL+enterprise.logoPath" />
+        </div>
+        <div class="productions">
+          <p class="title">主要产品</p>
+          <span class="item" v-for="(item,i) in enterprise.productions" :key='i'>{{enterprise.productions[i]}}</span>
+        </div>
+        <!-- <div class="honors" v-if="enterprise.honors.length>0">
+          <p class="title">主要荣誉</p>
+          <ul class="list">
+            <li class="row" v-for="(honor,j) in enterprise.honors" :key="j">
+              <p class="content">{{honor.intro}}</p><p class="time">{{honor.date}}</p>
+            </li>
+          </ul>
+        </div> -->
+        <div class="intros">
+          <p class="title">公司介绍</p>
+          <div class="content" v-html="enterprise.introHtml"></div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import Common from '@/util/common'
+export default {
+  name: 'enterpriseCard',
+  props: {
+    enterprise: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    mode:{
+      type:String,
+      default: 'simple',
+      validator (value) {
+        // simple-简易 complete-完整
+        return Common.oneOf(value, ['simple', 'complete'])
+      }
+    }
+  },
+  data(){
+    newEnterprise:{}
+  },
+  watch:{
+    enterprise: {
+      handler: function(val) {
+        console.log('enterprise',val)
+        this.newEnterprise = val
+      },
+      deep: true
+    },
+  },
+  mounted(){
+    // console.log(this.enterprise)
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.enterprise-card
+  color #fff
+  line-height 1.5
+  .base
+    font-size 1.4rem
+    .detail
+      padding-bottom 0.5rem
+  .logo
+    background-color rgba(255,255,255,1)
+    margin 0.5rem 0
+    width 100%
+    display flex
+    align-items center
+    justify-content center
+    border-radius 1rem
+  .title
+    font-family $font-pang
+    font-size 1.6rem
+    color $color-map(1)
+    padding 1rem 0
+.enterprise-card-simple
+  $gd-layout()
+  background-color transparent
+  grid-template-areas \
+    'base logo'
+  grid-template-columns 2.2fr 0.8fr
+  .simple-base
+    grid-area base
+  .simple-logo
+    grid-area logo
+
+.enterprise-card-complete
+  $gd-layout()
+  padding 2rem
+  background-color transparent
+  grid-template-areas \
+    'complete-base complete-logo'\
+    'productions complete-logo'\
+    'intros intros'
+  grid-template-rows 0.5fr 0.5fr 2fr
+  grid-template-columns 2fr 1fr
+  .complete-base
+    grid-area complete-base
+    font-size 1.6rem
+  .complete-logo
+    grid-area complete-logo
+  .productions
+    grid-area productions
+    .item
+      display inline-block
+      word-wrap none
+      padding 0.2rem 0.5rem
+      font-size 1.3rem
+  .honors
+    grid-area honors
+    .list
+      height 100%
+      overflow auto
+      padding 0 0.5rem
+    .row
+      display flex
+      color #ccc
+      padding 0.5rem 0
+      align-items top
+      justify-content space-between
+      border-bottom 0.1rem solid rgba(28, 66, 95, 0.4)
+      font-size 1.3rem
+      .time
+        padding-left 1rem
+        word-wrap none
+        width 12rem
+        text-align right
+  .intros
+    grid-area intros
+    .content
+      font-size 1.2rem
+      height 15rem
+      overflow-y scroll
+      line-height 1.5
+      p
+        text-indent 2em
+  .enterprise-name
+    font-family $font-pang
+    font-size 2.4rem
+    color #71c012
+    padding 1rem 0
+</style>

src/views/guangdong/gd-disease.vue

@@ -4,7 +4,7 @@
     <ThemeTitle style="width: 400%;">全省疫病灾害数据分析专题</ThemeTitle>
     <div class="sum">
       <p>全省水产疫病爆发<b><m-count :value="sum.total" :decimal="0"/></b>次</p>
-      <p>面积<b><m-count :value="sum.area"/></b>k㎡</p>
+      <p>面积<b><m-count :value="sum.area"/></b>亩</p>
       <p>损失<b><m-count :value="sum.loss"/></b>万元</p>
     </div>
     <div class="box1">

src/views/guangdong/gd-enterprise.vue

+<template>
+  <div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`">
+    <ThemeTitle class="theme">广东省渔业企业介绍专题</ThemeTitle>
+    <template v-if="enterpriseList.length>0">
+      <div v-for="(enterprise,i) in enterpriseList" :key="i" :class="index==i?('box'+(i+1)+' cur'):('box'+(i+1))" @mouseenter="showOne(i)" @mouseleave="startTimer">
+        <m-card mode="2" :title="enterprise.name">
+          <EnterpriseCard :enterprise='enterprise'></EnterpriseCard>
+        </m-card>
+      </div>
+      <div class="box7">
+        <m-card mode="2" :title="' '" style="margin-top:3rem">
+          <EnterpriseCard :mode="'complete'" :enterprise='firstEnterprise'></EnterpriseCard>
+        </m-card>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import ThemeTitle from './components/title'
+import EnterpriseCard from './components/enterprise-card'
+import axios from 'axios'
+export default {
+  name: 'Enterprise',
+  components: {
+    ThemeTitle,
+    EnterpriseCard
+  },
+  data() {
+    return {
+      index: 0,
+      enterpriseList: [],
+      firstEnterprise: {},
+      timerHanlder:null,
+      timeInterval:5000
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      axios.get(this.$api.FILE_URL + 'gd-enterprise.json').then(res => {
+        this.enterpriseList = res.data.enterprise
+        this.firstEnterprise = this.enterpriseList[0]
+
+        this.startTimer()
+      })
+    },
+    showOne(index){
+      clearInterval(this.timerHanlder)
+      this.index = index
+      this.firstEnterprise = this.enterpriseList[this.index]
+    },
+    startTimer(){
+      let _vm = this
+      this.timerHanlder = setInterval(function() {
+        _vm.changeEnterprise()
+      }, this.timeInterval)
+    },
+    changeEnterprise(){
+      if(this.index === -1){
+        this.index = 0
+      }else if(this.index<(this.enterpriseList.length-1)){
+        this.index ++
+      }else{
+        this.index = 0
+      }
+      this.firstEnterprise = this.enterpriseList[this.index]
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+#container
+  $gd-layout()
+  grid-gap 1.5rem
+  grid-template-areas \
+    '. theme .'\
+    'box1 box7 box2'\
+    'box3 box7 box4'\
+    'box5 box7 box6'
+  grid-template-rows 4rem 1fr 1fr 1fr
+  grid-template-columns 1fr 2fr 1fr
+  .theme
+    grid-area theme
+    width 60%
+  .box1
+    grid-area box1
+    opacity 0.3
+  .box2
+    grid-area box2
+    opacity 0.3
+  .box3
+    grid-area box3
+    opacity 0.3
+  .box4
+    grid-area box4
+    opacity 0.3
+  .box5
+    grid-area box5
+    opacity 0.3
+  .box6
+    grid-area box6
+    opacity 0.3
+  .box7
+    grid-area box7
+  .cur
+    opacity 1
+  .area
+    font-size 1.8rem
+    position absolute
+    width 60%
+    top 10%
+    left 30%
+    right 30%
+    text-align center
+    p
+      color #fff
+      font-family $font-pang
+    b
+      font-size 3rem
+    >span
+      font-family $font-pang
+</style>

static/gd-industry.json

@@ -29,12 +29,12 @@
   "fishProduction": {
     "name": ["2015年","2016年","2017年","2018年"],
     "value": [
+      {"name": "罗非鱼", "unit": "亿尾", "data": [116.65, 113, 104.54, 102.24]},
+      {"name": "鳗苗", "unit": "千克", "data": [835, 801, 800, 843]},
+      {"name": "虾类", "unit": "亿尾", "data": [4000, 4000, 4100, 5455]},
       {"name": "稚鳖", "unit": "万只", "data": [6260, 6661, 6791, 6549]},
       {"name": "稚龟", "unit": "万只", "data": [546, 547, 564, 665]},
-      {"name": "鳗苗", "unit": "千克", "data": [835, 801, 800, 43]},
-      {"name": "虾类", "unit": "亿尾", "data": [4000, 4000, 4100, 5455]},
-      {"name": "贝类", "unit": "万颗", "data": [605659, 245210, 255032, 293678]},
-      {"name": "罗非鱼", "unit": "亿尾", "data": [116.65, 113, 104.54, 102.24]}
+      {"name": "贝类", "unit": "万颗", "data": [605659, 245210, 255032, 293678]}
     ]
   }
 }