<template>
  <div class="display-content">
    <el-row :gutter="10" class="panel-group" style="margin-right: 0;margin-left: 0">
      <el-col :xs="24" :sm="24" :lg="24" class="card-panel-col" style="padding: 15px 15px 0 15px">
        <h1 class="title"><span>智慧茶园物联网平台</span></h1>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="24" class="display-top">
        <el-row :gutter="10" class="ard-panel">
          <el-col :span="6">
            <div class="left-content" style="margin-bottom: 2%">
              <div class="h-title">农场信息</div>
              <div class="h-content">
                <div class="list-title">
                  <span>农场名称</span>
                  <span>地址</span>
                </div>
                <ul class="list-content">
                  <li v-for="(item,index) in list" :key="index">
                    <span @click="clickme(item.id,item)">{{ item.proname }}</span>
                    <span>{{ item.msg9 }}</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="left-content">
              <div class="h-title">农场数据</div>
              <div class="h-content">
                <div class="list-title list_4">
                  <span>种植物</span>
                  <span>所属农场</span>
                  <span>亩数</span>
                  <span>生长天数</span>
                </div>
                <ul class="list-content content_4">
                  <li v-for="(d,index) in list1" :key="index">
                    <span>{{ d.scropnmae }}</span>
                    <span>{{ d.projectid }}</span>
                    <span>{{ d.area }}</span>
                    <span>{{ d.nt }}</span>
                  </li>
                </ul>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="content">
              <iframe src="https://720yun.com/t/06vkiqdespl?scene_id=35851439" style="height: 100%;width: 100%;"/>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="right-top" style="margin-bottom: 2%">
              <div class="h-title">实时环境监测</div>
              <ul class="r-content">
                <!--<li >
                  <div>
                    <span>温度</span>
                    <span>17.5</span>
                  </div>
                </li>-->
                <li v-for="(item,index) in listP" :key="index">
                  <div>
                    <span>{{ item.name }}</span>
                    <!--<div v-if="scope.row.type === item.value">{{ item.label }}</div>-->
                    <span v-if="item.name !== '风向'">{{ item.value }}</span>
                    <span v-if="item.name === '风向' && '0' === item.value">北风</span>
                    <span v-if="item.name === '风向' && '1' === item.value">东北风</span>
                    <span v-if="item.name === '风向' && '2' === item.value">东风</span>
                    <span v-if="item.name === '风向' && '3' === item.value">东南风</span>
                    <span v-if="item.name === '风向' && '4' === item.value">南风</span>
                    <span v-if="item.name === '风向' && '5' === item.value">西南风</span>
                    <span v-if="item.name === '风向' && '6' === item.value">西风</span>
                    <span v-if="item.name === '风向' && '7' === item.value">西北风</span>
                  </div>
                </li>
                <!--<li class="active">
                  <div>
                    <span>湿度</span>
                    <span>68.5</span>
                  </div>
                </li>
                <li >
                  <div>
                    <span>湿度</span>
                    <span>68.5</span>
                  </div>
                </li>-->
              </ul>
            </div>
            <div class="right-bottom">
              <div class="h-title">农场检测信息</div>
              <div id="charts3" ref="chart2" style="width: 100%;height: 85%;padding: 5px 10px"/>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="24" class="display-bottom">
        <div class="ard-panel">
          <ul class="b_content">
            <li>
              <div>人员结构</div>
              <div id="charts1" ref="chart" style="width: 100%;height: 95%;"/>
            </li>
            <li>
              <div>土地使用面积</div>
              <div id="charts2" ref="chart1" style="width: 100%;height: 95%;"/>
            </li>
            <li>
              <div>监控摄像头</div>
              <div style="width: 100%;height: 95%;background: #00fffe">
                <div v-for="(_item) in videos" :key="_item" class="center_bottom" style="height: 100%;">
                  <!--          <div class="center_bottom"/>-->
                  <video id="myPlayer" controls playsinline webkit-playsinline autoplay style="width: 100%;height: 100%">
                    <!--<source :src="http_url" type="application/x-mpegURL">-->
                    <source :src="_item" type="rtmp/flv">
                  </video>
                </div>
              </div>
            </li>
            <li>
              <div>农作物生产周期</div>
              <ul class="sz" style="width: 100%;height: 95%;">
                <li v-for="(_item,index) in list2" :key="index">
                  <div>
                    <span>{{ _item.scropnmae }}</span>
                    <el-progress :percentage="_item.bai" :format="customColorMethod" :color="customColor" style="width: 50%"/>
                  </div>
                </li>

              </ul>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import echarts from 'echarts'
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
import Screenfull from '../../components/Screenfull/index'
import { findProjectByUserid } from '@/api/sProject'
import { getDeviceByProjectid } from '@/api/sDevice'
import { queryAttendanceByDate } from '@/api/sAttendance'
import { getSCropsNoPageByproid, getAreachartdata } from '@/api/sCrop'
import { loadCDataByDeviceid } from '@/api/sData'
import EZUIPlayer from 'ezuikit/ezuikit'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'GIpUncIwoaK7BjBZdrpOs0ytywLippwu'
})
export default {
  components: { Screenfull },
  data() {
    return {
      percentage: '', atttime: [], attdata: [], projectid: 6,
      timeArr: '', areaArr: '', cropareaArr: '', player: '',
      center: { lng: 0, lat: 0 },
      zoom: 10,
      videos: [],
      list: [],
      list1: [],
      list2: [],
      listP: [],
      BMap: '',
      map: ''
    }
  },
  computed: {

  },
  mounted() {
    // this.myChart1()
    // this.myChart2()
    // this.myChart3()
    // this.getLiveUrl()
  },
  created() {
    this.laodProject()
    // this.getSCropsNoPage()
    // this.getAttchartdata()
    // this.getAreachartdata(this.projectid)
  },
  methods: {
    clickme(id, item) {
      this.loadAllData(id, item.videoadr)
    },
    loadData(deviceid) {
      loadCDataByDeviceid(deviceid).then(res => {
        var response = res.dataMap
        var sDevice = res.sDeviceDTO
        this.getListP(res)
        var subject = sDevice.subject.split(',')
        var code = sDevice.code.split(',')
        var lengend = ''
        this.data24 = response
        this.dtime = ''
        this.lengendData = []
        this.seriesData = []
        for (var key in response) {
          this.dtime = response[key].map(function(cdata) { return cdata.dtime })
          var serData = response[key].map(function(cdata) { return cdata.data })
          for (var j = 0; j < code.length; j++) {
            if (key === code[j]) {
              lengend = subject[j]
            }
          }
          var temp = {
            name: lengend,
            type: 'line',
            smooth: true,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(219, 50, 51, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(219, 50, 51, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            /* itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'red' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'yellow' // 100% 处的颜色
                }], false)
              }
            },*/
            data: serData
          }
          this.seriesData.push(temp)
          this.lengendData.push(lengend)
        }
        // this.drawLine(this.lengendData, this.dtime, this.seriesData)
        this.myChart2(this.lengendData, this.dtime, this.seriesData)
      })
    },
    getListP(res) {
      this.listP = []
      var response = res.dataMap
      var sDevice = res.sDeviceDTO
      var subject = sDevice.subject.split(',')
      var code = sDevice.code.split(',')
      for (var key in response) {
        this.dtime = response[key].map(function(cdata) {
          return cdata.dtime
        })
        var serData = response[key].map(function(cdata) {
          return cdata.data
        })
        var pdata = serData[serData.length - 1]
        var sub = null
        for (var j = 0; j < code.length; j++) {
          if (key === code[j]) {
            sub = subject[j]
          }
        }
        var p = {
          value: pdata,
          name: sub
        }
        this.listP.push(p)
      }
      console.log(this.listP, response)
      /* if (this.listP.length <= 9) {
        this.listLength = 1
      } else {
        this.listLength = Math.ceil(this.listP.length / 9)
      }*/
      // this.InitTabScroll()
    },
    getAttchartdata(projectid) {
      queryAttendanceByDate(projectid).then(response => {
        var attendance = response
        this.atttime = attendance.map(function(cdata) {
          var date = new Date(parseInt(cdata.atttime))
          const year = date.getFullYear()
          let month = date.getMonth() + 1
          let day = date.getDate()
          month = month < 10 ? '0' + month : month
          day = day < 10 ? '0' + day : day
          var date1 = year + '-' + month + '-' + day
          // console.log(date1, 'bbbbbb')
          return date1
        })
        this.attdata = attendance.map(function(cdata) { return cdata.attendance })
        // console.log(this.atttime, this.attdata, 'getchartdata')
        this.myChart()
      }).catch(err => {
        console.log(err.response.data.message)
      })
    },
    getAreachartdata(projectid) {
      getAreachartdata(projectid).then(response => {
        // timeArr: '', areaArr: '', cropareaArr: '',
        this.timeArr = response.timeArr
        this.areaArr = response.areaArr
        this.cropareaArr = response.cropareaArr
        this.myChart1()
      }).catch(err => {
        console.log(err.response.data.message)
      })
    },
    getSCropsNoPage(projectid) {
      // 只加载种植(发芽)日期小于365天内的数据
      getSCropsNoPageByproid(projectid).then(response => {
        this.list1 = []
        this.list2 = []
        var crops = response
        // this.attdata = crops.map(function(cdata) { return cdata.attendance })
        this.list1 = response
        for (var i = 0; i < crops.length; i++) {
          // var date = new Date(parseInt(crops[i].sowtime))
          // var year = date.getFullYear()
          // var days = (new Date() - date) / (1 * 24 * 60 * 60 * 1000)
          // if (days < 365) {
          var day = parseInt(crops[i].nt)
          console.log(day, crops[i].cycle, day / crops[i].cycle)
          if (day < crops[i].cycle) {
            // console.log(Math.round(day / crops[i].cycle * 10000) / 100.00)
            crops[i].bai = Math.round(day / crops[i].cycle * 10000) / 100.00
          } else {
            crops[i].bai = 100
          }
          this.list2.push(crops[i])
          // }
        }
        // 生长期
      }).catch(err => {
        console.log(JSON.stringify(err))
      })
    },
    laodProject() {
      findProjectByUserid().then(response => {
        this.list = response
        var projectid = response[0].id
        this.loadAllData(projectid, response[0].videoadr)
      })
    },
    loadAllData(projectid, videoadr) {
      this.getSCropsNoPage(projectid)
      this.getAttchartdata(projectid)
      this.getAreachartdata(projectid)
      this.getDeviceByProjectid(projectid)
      this.getLiveUrl(videoadr)
    },
    getDeviceByProjectid(projectid) {
      getDeviceByProjectid(projectid).then(response => {
        this.devices = response
        /* if (this.map !== '') {
          this.map.clearOverlays()
        } else {
          console.log('等了1秒')
          setTimeout(this.getDeviceByProjectid(projectid), 1000)
          return
        }*/
        if (this.devices.length > 0) {
          this.loadData(this.devices[0].deviceid)

          /* console.log(this.devices, '111')
          // console.log(this.devices)
          // 循环加入设备
          for (var i = 0; i < this.devices.length; i++) {
            var marker = new this.BMap.Marker(new this.BMap.Point(this.devices[i].jd, this.devices[i].wd)) // 创建点
            var label = new this.BMap.Label(this.devices[i].name, {
              offset: new this.BMap.Size(20, -10)
            })
            label.setStyle({
            // color: '#892B31',
              color: 'grey',
              backgroundColor: '0.05',
              border: '0'
            })
            marker.setTitle(this.devices[i].deviceid)
            marker.setLabel(label)
            var _this = this
            marker.addEventListener('click', function(val) {
              _this.deviceid = this.z.title
              _this.loadData(_this.deviceid)
            })
            this.map.addOverlay(marker)
            this.center = { lng: this.devices[i].jd, lat: this.devices[i].wd }
          }*/
        }
      })
    },
    // 百度地图
    handler({ BMap, map }) {
      this.map = map
      this.BMap = BMap
      const _this = this
      // 黑色主题
      // const mapStyle = { style: 'midnight' }
      // map.setMapStyle(mapStyle)
      /* if (this.isAdd) {*/
      const geolocation = new BMap.Geolocation()
      geolocation.getCurrentPosition(function getinfo(position) {
        if (_this.center.lat === 0) {
          _this.center = { lng: position.longitude, lat: position.latitude }
        }
      }, function(e) {
      }, { provider: 'baidu' })
      // console.log(BMap, map)
      /* this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15*/
    },
    customColor(percentage) {
      if (percentage < 30) {
        return '#228B22'
      } else if (percentage > 30 && percentage < 90) {
        return '#EE7600'
      } else {
        return '#EEB422'
      }
    },
    customColorMethod(percentage) {
      if (percentage < 30) {
        return '幼苗期'
      } else if (percentage < 62) {
        return '生长期'
      } else {
        return '成熟期'
      }
    },
    // 视频监控
    getLiveUrl(videoadr) {
      // console.log(videoadr, '11111111111111112')
      if (this.videos[0] !== videoadr) {
        this.videos = []
        this.videos.push(videoadr + '')
        setTimeout(function() {
          this.player = new EZUIPlayer('myPlayer')
        }, 2000)
      }

      /* this.videos = []
      // 异步获取直播地址，并赋值给rtmp_url,http_url
      this.videos.push(videoadr)
      // this.http_url = 'http://hls01open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.hd.m3u8'
      setTimeout(function() {
        this.player = new EZUIPlayer('myPlayer')
      }, 2000)*/
    },
    // 农场信息
    myChart2(lengendData, dtime, seriesData) {
      this.chart = this.$echarts.init(this.$refs.chart2)
      this.chart.setOption({
        tooltip: { // 鼠标指上时的标线
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#fff'
            },
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: 'transparent'
            },
            shadowStyle: {
              color: {
                type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(255, 245, 23, 0)' // 0% 处的颜色
                }, {
                  offset: 0.5, color: 'rgba(255, 245, 23, 0.2)' // 50% 处的颜色
                }, {
                  offset: 0.999999, color: 'rgba(185, 6, 87, 1)' // 100% 处的颜色
                }, {
                  offset: 1, color: '#b90657' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        },
        legend: {
          data: lengendData,
          right: '10px',
          top: '0px',
          textStyle: {
            fontSize: 12,
            color: '#fff'
          }
        },
        grid: {
          x: 35,
          y: 25,
          x2: 8,
          y2: 25
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          data: dtime
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              color: '#fff'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.5)'
            }
          }
        }],
        series: seriesData
      })
    },
    //
    myChart3() {
      this.chart = this.$echarts.init(this.$refs.chart3)
      this.chart.setOption({
        tooltip: { // 鼠标指上时的标线
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#fff'
            },
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: 'transparent'
            },
            shadowStyle: {
              color: {
                type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(255, 245, 23, 0)' // 0% 处的颜色
                }, {
                  offset: 0.5, color: 'rgba(255, 245, 23, 0.2)' // 50% 处的颜色
                }, {
                  offset: 0.999999, color: 'rgba(185, 6, 87, 1)' // 100% 处的颜色
                }, {
                  offset: 1, color: '#b90657' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        },
        legend: {
          data: ['温度', '湿度'],
          right: '10px',
          top: '0px',
          textStyle: {
            fontSize: 12,
            color: '#fff'
          }
        },
        grid: {
          x: 35,
          y: 25,
          x2: 8,
          y2: 25
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              color: '#fff'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.5)'
            }
          }
        }],
        series: [
          {
            name: '温度',
            type: 'line',
            smooth: true,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(219, 50, 51, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(219, 50, 51, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'red' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'yellow' // 100% 处的颜色
                }], false)
              }
            },
            data: [12, 14, 10, 5, 3, 15, 23, 25, 6, 13, 15, 0, 22, 17]
          },
          {
            name: '湿度',
            type: 'line',
            smooth: true,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(219, 50, 51, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(219, 50, 51, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: '#07ddff' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#084fdb' // 100% 处的颜色
                }], false)
              }
            },
            data: [1, 3, 5, 7, 9, 12, 2, 4, 6, 8, 10, 11, 15, 13, 5]
          }
        ]
      })
    },
    // 人员结构
    myChart() {
      this.chart = this.$echarts.init(this.$refs.chart)
      this.chart.setOption({
        tooltip: { // 鼠标指上时的标线
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#fff'
            },
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: 'transparent'
            },
            shadowStyle: {
              color: {
                type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(21, 84, 125, 0)' // 0% 处的颜色
                }, {
                  offset: 0.5, color: 'rgba(255, 245, 23, 0.2)' // 50% 处的颜色
                }, {
                  offset: 0.999999, color: 'rgba(21, 84, 125, 1)' // 100% 处的颜色
                }, {
                  offset: 1, color: 'rgba(21,84,125,1)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        },
        legend: {
          data: ['出勤人数'],
          right: '10px',
          top: '0px',
          textStyle: {
            fontSize: 12,
            color: '#fff'
          }
        },
        grid: {
          x: 35,
          y: 25,
          x2: 8,
          y2: 25
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show: true, // 是否显示x轴
            lineStyle: {
              color: '#fff', // x坐标轴的轴线颜色
              width: 1 // 这里是坐标轴的宽度,可以去掉
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          data: this.atttime
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true, // 是否显示y轴
            lineStyle: {
              color: '#fff', // y坐标轴的轴线颜色
              width: 1 // 这里是坐标轴的宽度,可以去掉
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              color: '#fff'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.5)'
            }
          }
        }],
        series: [{
          name: '出勤人数',
          type: 'line',
          smooth: true,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(21, 84, 125, 0.8)'
              }, {
                offset: 0.8,
                color: 'rgba(21, 84, 125, 0.5)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: '#07ddff' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#084fdb' // 100% 处的颜色
              }], false)
            }
          },
          data: this.attdata
        }
        ]
      })
    },
    // 土地使用面积
    myChart1() {
      this.chart = this.$echarts.init(this.$refs.chart1)
      this.chart.setOption({
        tooltip: { // 鼠标指上时的标线
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#fff'
            },
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: 'transparent'
            },
            shadowStyle: {
              color: {
                type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [{
                  offset: 0, color: '#b90657' // 0% 处的颜色
                }, {
                  offset: 0.5, color: 'rgba(185, 6, 87, 0.5)' // 50% 处的颜色
                }, {
                  offset: 0.999999, color: 'rgba(255, 245, 23, 0.2)' // 100% 处的颜色
                }, {
                  offset: 1, color: 'rgba(255, 245, 23, 0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        },
        legend: {
          // icon: 'rect ',
          itemWidth: 20,
          itemHeight: 8,
          barBorderRadius: [2, 2, 2, 2],
          itemGap: 13,
          data: ['耕地面积', '种植面积'],
          right: '10px',
          top: '0px',
          textStyle: {
            fontSize: 12,
            color: '#fff'
          }
        },
        grid: {
          x: 35,
          y: 25,
          x2: 8,
          y2: 25
        },
        xAxis: [
          {
            type: 'category',
            data: this.timeArr,
            axisLine: {
              show: true, // 是否显示x轴
              lineStyle: {
                color: '#fff', // y坐标轴的轴线颜色
                width: 1 // 这里是坐标轴的宽度,可以去掉
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
                color: '#fff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false
            },
            axisLine: {
              show: true, // 是否显示x轴
              lineStyle: {
                color: '#fff', // y坐标轴的轴线颜色
                width: 1 // 这里是坐标轴的宽度,可以去掉
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
                color: '#fff'
              }
            }
          }
        ],
        series: [
          {
            name: '耕地面积',
            type: 'bar',
            data: this.areaArr,
            color: '#ce4cff',
            barWidth: 15,
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 10, 10],
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: '#fff517' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#b90657' // 100% 处的颜色
                }], false),
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#fff',
                    fontSize: 12
                  }
                }
              }
            }
          },
          {
            name: '种植面积',
            type: 'bar',
            data: this.cropareaArr,
            color: '#f97825',
            barWidth: 15,
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 10, 10],
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: '#07ddff' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#084fdb' // 100% 处的颜色
                }], false),
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#fff',
                    fontSize: 12
                  }
                }
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .panel-group {
    .card-panel-col{
      margin-bottom: 15px;
    }
    .display-top{
      height: calc((100vh - 90px) * 0.7);
      margin-bottom: 10px;
      .ard-panel{
        height: 100%;
        color: #fff;

        .left-content{
          height: 49%;
          box-sizing: border-box;
          border: 1px solid #4dd9d5;
          background:  rgba(255,255,255,0.1);
          position: relative;
          color: #fff;
          .h-content{
            height: 90%;
            position: absolute;
            width: 100%;
            /*background: rgba(0,0,0,0.5);*/
          }
        }
        .content{
          height: 99.5%;
          border: 1px solid #4dd9d5;
        }
        .right-top{
          height: 65%;
          border: 1px solid #4dd9d5;
          background: rgba(255,255,255,0.1);
        }
        .right-bottom{
          height: 33%;
          border: 1px solid #4dd9d5;
          background: rgba(255,255,255,0.1);
        }
      }
    }
    .display-bottom{
      height: calc((100vh - 110px) * 0.3);
      background: rgba(255,255,255,0.1);
      .ard-panel{
        height: 100%;
        .b_content{
          height: 100%;
          border: 1px solid #4dd9d5;
          color: #fff;
          margin: 0;
          padding: 10px 0;
          li{
            width: 25%;
            float: left;
            height: 100%;
            padding: 10px;
          }
        }
      }
    }
  }
  .el-col{
    height: 100%;
  }
  .title{
    height: 45px;
    width: 100%;
    text-align: center;
    /*color: #fff;*/
    margin: 0;
    line-height: 45px;
    font-weight: 400;
    background: url("../../assets/display/title.png") no-repeat;
    background-size: 100% 100%;
    span{
      display: inline-block;
      width: 100%;
      height: 100%;
      /*background: -webkit-linear-gradient(left,#ed3577,#E6D205 25%,#f40 50%,#F75A82 75%,#00CD66);*/
      background: -webkit-linear-gradient(left,#AEEEEE,#8DEEEE 25%,#7FFFD4 50%,#63B8FF 75%,#40E0D0);
      color: transparent;
      -webkit-background-clip: text;
      background-size: 200% 100%;
      animation: masked-animation 3s infinite linear;
    }
  }
  .h-title{
    height: 30px;
    border-bottom: 1px solid #4dd9d5;
    line-height: 30px;
    padding-left: 10px;
    /*background: -webkit-linear-gradient(left,#ed3577,#E6D205 25%,#f40 50%,#F75A82 75%,#00CD66);*/
    background: -webkit-linear-gradient(left,#09213a,#0f2e4a 25%,#24b7fc 50%,#103455 75%,#24b7fc);
    color: #fff;
    /*-webkit-background-clip: text;*/
    background-size: 200% 100%;
    /*animation: masked-animation 3s infinite linear;*/
  }
  .list-title{
    height: 30px;
    line-height: 30px;
    span{
      width: 50%;
      text-align: center;
      display: inline-block;
      float: left;
    }
  }
  .list_4{
    span{
      width: 25%;
      text-align: center;
      display: inline-block;
      float: left;
    }
  }
  .list-content{
    width: 100%;
    height: 86%;
    margin: 0;
    overflow-y: scroll;
    li{
      span{
        width: 50%;
        text-align: center;
        height: 30px;
        line-height: 30px;
        float: left;
      }
    }
  }
  .content_4{
    width: 100%;
    height: 86%;
    margin: 0;
    overflow-y: scroll;
    li{
      span{
        width: 25%;
        text-align: center;
        height: 30px;
        line-height: 30px;
        float: left;
      }
    }
  }

</style>
