<template>
  <div class="da-ping">
    <div class="top-wrapper">{{ title }}</div>
    <div class="bot-wrapper">
      <div class="left">
        <div class="box_div">
          <div class="box_title"><span>基地监测设备情况</span></div>
          <div class="ct-box-1">
            <div class="ctn">
              <ul>
                <li>
                  <div class="label">
                    <span>设备总数</span>
                  </div>
                  <div class="val">{{ vData1.xx }}</div>
                </li>
                <li>
                  <div class="label">
                    <span>在线率</span>
                  </div>
                  <div class="val">{{ vData1.xx }}</div>
                </li>
                <li>
                  <div class="label">
                    <span>设备在线</span>
                  </div>
                  <div class="val">{{ vData1.xx }}</div>
                </li>
                <li>
                  <div class="label">
                    <span>设备离线</span>
                  </div>
                  <div class="val">{{ vData1.xx }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="box_div">
          <div class="box_title"><span class="touch" @click="visible=!visible">{{ currentBase.name }}设备实时监测<a style="font-size:16px;vertical-align: top"> ▼ </a></span></div>
          <div class="select-box">
            <ul v-show="visible">
              <li v-for="(item,index) in baseList" :key="index" :class="currentBase===item?'active':''" class="touch" @click="currentBase=item;visible=false">
                {{ item.name }}
              </li>
            </ul>
          </div>
          <div class="ct-box-2">
            <div class="ctn">
              <ul>
                <li>
                  <div>
                    <span>{{ vData2.xx }}</span>
                    <font>&nbsp;</font>
                  </div>
                  <p>连接状态</p>
                </li>
                <li>
                  <div>
                    <span>{{ vData2.xx }}</span>
                    <font>%</font>
                  </div>
                  <p>土壤湿度</p>
                </li>
                <li>
                  <div>
                    <span style="color:#FFBB2E">{{ vData2.xx }}</span>
                    <font>°C</font>
                  </div>
                  <p>土壤温度</p>
                </li>
                <li>
                  <div>
                    <span style="color:#FFBB2E">{{ vData2.xx }}</span>
                    <font>ug/m3</font>
                  </div>
                  <p>TSP</p>
                </li>
                <li>
                  <div>
                    <span>{{ vData2.xx }}</span>
                    <font>m/s</font>
                  </div>
                  <p>风速</p>
                </li>
                <li>
                  <div>
                    <span style="color:#FF547C">{{ vData2.xx }}</span>
                    <font>风</font>
                  </div>
                  <p>风向</p>
                </li>
                <li>
                  <div>
                    <span style="color:#FFBB2E">{{ vData2.xx }}</span>
                    <font>°C</font>
                  </div>
                  <p>空气温度</p>
                </li>
                <li>
                  <div>
                    <span>{{ vData2.xx }}</span>
                    <font>%</font>
                  </div>
                  <p>空气湿度</p>
                </li>
                <li>
                  <div>
                    <span style="color:#FF547C">{{ vData2.xx }}</span>
                    <font>kpa</font>
                  </div>
                  <p>大气压</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="box_div">
          <div class="box_title"><span>近一个月基地设备报警分析</span></div>
          <div class="ct-box-3" style="height:160px;overflow:auto;padding-bottom:8px">
            <div class="ctn">
              <ul>
                <li>
                  <div class="label">
                    <span>一号基地</span>
                  </div>
                  <div class="val">{{ vData3.xx }}</div>
                </li>
                <li>
                  <div class="label">
                    <span>二号基地</span>
                  </div>
                  <div class="val">{{ vData3.xx }}</div>
                </li>
                <li>
                  <div class="label">
                    <span>三号基地</span>
                  </div>
                  <div class="val">{{ vData3.xx }}</div>
                </li>
                <li>
                  <div class="label">
                    <span>四号基地</span>
                  </div>
                  <div class="val">{{ vData3.xx }}</div>
                </li>
                <li>
                  <div class="label">
                    <span>五号基地</span>
                  </div>
                  <div class="val">{{ vData3.xx }}</div>
                </li>
                <li>
                  <div class="label">
                    <span>六号基地</span>
                  </div>
                  <div class="val">{{ vData3.xx }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="box_div">
          <div class="box_title"><span>基地设备实时报警列表</span></div>
          <div class="ct-box-4">
            <dl>
              <dt>
                <div>监测项</div>
                <div style="text-align:center">基地名称</div>
                <div style="text-align:center">报警值</div>
                <div style="text-align:center">时间</div>
              </dt>
              <dd v-for="(item,index) in vData4.list" :key="index">
                <div>{{ item.name }}</div>
                <div>{{ item.name }}</div>
                <div style="text-align:center">{{ item.name }}</div>
                <div style="text-align:center">{{ item.name }}</div>
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="center_div_up">
          <div class="map">
            <div ref="mapDom" style="width:100%;height:100%" />
            <div class="map_bottom_box">
              <div>该地图上显示所有当前基地（点击选择查看）：</div>
              <div style="padding-top:3px;height:78px;overflow:auto">
                <div v-for="(item,index) in vDataMap.list" :key="'ml_'+index" class="btn touch">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="center_div_down">
          <div class="box_c">
            <div class="box_title"><span>企业介绍</span></div>
            <div class="box_b">
              <el-image :src="imgSrc"/>
              <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司简介范文公司简介范文一公司简介一般包括以下几个方面：  公司概况：这里面可以包括注册时间，注册资本，公司性质， 技术力量规模，员工人数，员工素质等； 公司发展状司简介范文公司简介范文以规模。</span>
            </div>
          </div>
          <div class="box_c">
            <div class="box_title" style="margin-left:0"><span>人员结构</span></div>
            <div style="padding-left: 8px">
              <div class="ct-box-5">
                <div class="ctn">
                  <ul>
                    <li>
                      <div class="label">
                        <span>{{ vData5.xx }}</span>
                      </div>
                      <div class="val">农场总职工数</div>
                    </li>
                    <li>
                      <div class="label">
                        <span>{{ vData5.xx }}</span>
                      </div>
                      <div class="val">男职工数</div>
                    </li>
                    <li>
                      <div class="label">
                        <span>{{ vData5.xx }}</span>
                      </div>
                      <div class="val">女职工数</div>
                    </li>
                  </ul>
                </div>
              </div>
              <div ref="chart1" style="width: 100%;height: 200px; overflow: hidden;"/>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="box_div">
          <div class="box_title"><span>室外气象站监测</span></div>
          <div ref="chart2" class="chart_box"/>
        </div>
        <div class="box_div">
          <div class="box_title"><span>土壤水分监测</span></div>
          <div ref="chart3" class="chart_box"/>
        </div>
        <div class="box_div">
          <div class="box_title"><span>温湿度气象监测</span></div>
          <div ref="chart4" class="chart_box"/>
        </div>
        <div class="box_div">
          <div class="box_title"><span>二氧化碳室外气象监测</span></div>
          <div ref="chart5" class="chart_box"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import * as utils from '@/utils'
import enterpriseImg from '@/assets/home/enterpriseImg.png'
import linePoint from '@/assets/home/point.png'

export default {
  data() {
    return {
      title: '智慧农业综合管理一张图',
      imgSrc: enterpriseImg,
      mapDom: null,
      visible: false,
      currentBase: {
        name: '一号基地'
      },
      baseList: [
        { name: '一号基地' },
        { name: '二号基地' },
        { name: '三号基地' },
        { name: '四号基地' },
        { name: '五号基地' },
        { name: '六号基地' },
        { name: '七号基地' },
        { name: '八号基地' }
      ],
      vData1: {
        xx: '7896'
      },
      vData2: {
        xx: '10.5'
      },
      vData3: {
        xx: '7896'
      },
      vData4: {
        list: [
          { name: '二氧化碳' },
          { name: '二氧化碳' },
          { name: '二氧化碳' },
          { name: '二氧化碳' },
          { name: '二氧化碳' },
          { name: '二氧化碳' },
          { name: '二氧化碳' },
          { name: '二氧化碳' }
        ]
      },
      vData5: {
        xx: '180'
      },
      vDataMap: {
        list: [
          { name: '一号基地：种植农作物1' },
          { name: '一号基地：种植农作物1' },
          { name: '一号基地：种植农作物1' },
          { name: '一号基地：种植农作物1' },
          { name: '一号基地：种植农作物1' },
          { name: '一号基地：种植农作物1' },
          { name: '一号基地：种植农作物1' },
          { name: '一号基地：种植农作物1' }
        ]
      },
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      chart5: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap()
      this.loadData()
      this.currentBase = this.baseList[0]
    })
  },
  methods: {
    loadData() {
      this.initChart1()
      this.initChart2()
      this.initChart3()
      this.initChart4()
      this.initChart5()
    },
    initMap() {
      /* eslint-disable */
      if(!this.mapDom){
        this.mapDom = new AMap.Map(this.$refs.mapDom, {
          mapStyle: 'amap://styles/e1a69a1f5c54d96190413cf349fa8c1d',
          resizeEnable: true, // 是否监控地图容器尺寸变化
          zoom: 13, // 初始化地图层级
          center: [119.765299, 35.789809] // 初始化地图中心点
        })
        let appendMarker = function(arr) {
          var len = arr.length
          for (var i = 0; i < len; i++) {
            var obj = arr[i]
            var imgName = obj.name.indexOf('大棚') > -1 ? 'pointe_1' : 'pointe_2'
            var icon = '/static/smartDaping/' + imgName + '.png'
            var devX = obj.name.indexOf('大棚') > -1 ? -17.5 : -23.5
            AMapTool.marker && AMapTool.remove(AMapTool.marker)
            AMapTool.infoWindow && AMapTool.infoWindow.close()
            // 经度范围[121.138398, 121.728226]
            var lng = obj.jd
            // 纬度范围[30.972688, 31.487611]
            var lat = obj.wd
            AMapTool.setCenter([lng, lat])
            AMapTool.marker = new AMap.Marker({
              map: AMapTool,
              icon,
              position: [obj.jd, obj.wd],
              offset: new AMap.Pixel(devX, devX),
              title: obj.name,
              label: {
                deviceid: obj.deviceid,
                name: obj.name,
                online: obj.online
              }
            })
            AMapTool.marker.on('click', e => {
              let info = '<div class="pop-info1"><div class="dis"><span>' + obj.name + "</span></div><div class='dis'><span>" + obj.deviceid + "</span></div><div class='dis'><strong>设备状态:</strong>" + `<span style='color: #999' >${obj.online}</span>` + '</div></div>'
              AMapTool.infoWindow = new AMap.InfoWindow({
                offset: new AMap.Pixel(0, -30),
                content: info // 使用默认信息窗体框样式，显示信息内容
              })
              AMapTool.infoWindow.open(AMapTool, [obj.jd, obj.wd])
            })
          }
        }
      }
      /* eslint-enable */
    },
    initChart1() {
      this.chart1 = echarts.init(this.$refs.chart1, 'macarons')
      const count = 24
      const axisLine = {
        show: false,
        lineStyle: {
          color: '#666'
        }
      }
      const dataX = []
      for (let i = 0; i < count; i++) {
        dataX.push(i < 10 ? '0' + i + '时' : i + '时')
      }
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: (params, ticket, callback) => {
            return params[0].value + '人'
          }
        },
        grid: {
          left: '0',
          right: '0',
          top: '8px',
          bottom: '0',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine,
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 2,
            color: '#BFF7FF'
          },
          data: dataX
        },
        yAxis: {
          type: 'value',
          axisLine,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#BFF7FF'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#ffffff33'
            }
          }
        },
        series: [
          {
            type: 'line',
            smooth: true,
            symbol: 'image://' + linePoint,
            symbolSize: 4,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#10B1FD',
                lineStyle: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: '#0CF4FD'
                      },
                      {
                        offset: 1,
                        color: '#0954FD'
                      }
                    ],
                    false
                  )
                }
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#10b1fd4d'
                    },
                    {
                      offset: 1,
                      color: '#2bbffd00'
                    }
                  ],
                  false
                ),
                shadowColor: '#2BBFFD',
                shadowBlur: 20
              }
            },
            data: utils.randNum(2, 40, count, true)
          }
        ]
      }
      this.chart1.setOption(option)
    },
    initChart2() {
      this.chart2 = echarts.init(this.$refs.chart2, 'macarons')
      const count = 24
      const axisLine = {
        show: false,
        lineStyle: {
          color: '#666'
        }
      }
      const dataX = []
      for (let i = 0; i < count; i++) {
        dataX.push(i < 10 ? '0' + i + '时' : i + '时')
      }
      const option = {
        tooltip: {
          trigger: 'axis',
          position: (point, params, dom, rect, size) => {
            return [point[0], 10]
          }
        },
        legend: {
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          left: '8px',
          right: '8px',
          top: '28px',
          bottom: '8px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine,
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 2,
            color: '#BFF7FF'
          },
          data: dataX
        },
        yAxis: {
          type: 'value',
          axisLine,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#BFF7FF'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#ffffff33'
            }
          }
        },
        series: [
          {
            type: 'line',
            name: '空气温度',
            smooth: true,
            symbol: 'circle',
            symbolSize: 1,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#FFEA00'
              }
            },
            data: utils.randNum(0, 20, count, true)
          },
          {
            type: 'line',
            name: '空气湿度',
            smooth: true,
            symbol: 'circle',
            symbolSize: 1,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#00FC0C'
              }
            },
            data: utils.randNum(40, 60, count, true)
          },
          {
            type: 'line',
            name: '光照',
            smooth: true,
            symbol: 'circle',
            symbolSize: 1,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#FF7534'
              }
            },
            data: utils.randNum(20, 60, count, true)
          },
          {
            type: 'line',
            name: '风速',
            smooth: true,
            symbol: 'circle',
            symbolSize: 1,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#3BF6EC'
              }
            },
            data: utils.randNum(0, 10, count, true)
          },
          {
            type: 'line',
            name: '雨雪',
            smooth: true,
            symbol: 'circle',
            symbolSize: 1,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#8ED1FC'
              }
            },
            data: utils.randNum(10, 30, count, true)
          }
        ]
      }
      this.chart2.setOption(option)
    },
    initChart3() {
      this.chart3 = echarts.init(this.$refs.chart3)
      const labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
      const seriesData = [
        {
          label: '周一',
          value: [32]
        },
        {
          label: '周二',
          value: [24]
        },
        {
          label: '周三',
          value: [42]
        },
        {
          label: '周四',
          value: [32]
        },
        {
          label: '周五',
          value: [24]
        },
        {
          label: '周六',
          value: [42]
        },
        {
          label: '周天',
          value: [20]
        }
      ]
      const colors = [
        [
          { offset: 0, color: 'rgba(26, 132, 191, 1)' },
          { offset: 1, color: 'rgba(52, 163, 224, 0.08)' }
        ],
        [
          { offset: 0, color: 'rgba(137, 163, 164, 1)' },
          { offset: 1, color: 'rgba(137, 163, 164, 0.08)' }
        ],
        [
          { offset: 0, color: 'rgba(44, 166, 166, 1)' },
          { offset: 1, color: 'rgba(44, 166, 166, 0.08)' }
        ],
        [
          { offset: 0, color: 'rgba(126, 132, 191, 1)' },
          { offset: 1, color: 'rgba(52, 163, 224, 0.08)' }
        ],
        [
          { offset: 0, color: 'rgba(137, 163, 64, 1)' },
          { offset: 1, color: 'rgba(137, 163, 164, 0.08)' }
        ],
        [
          { offset: 0, color: 'rgba(34, 66, 186, 1)' },
          { offset: 1, color: 'rgba(34, 66, 186, 0.08)' }
        ],
        [
          { offset: 0, color: 'rgba(144, 66, 166, 1)' },
          { offset: 1, color: 'rgba(44, 166, 166, 0.08)' }
        ]
      ]
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: (params, ticket, callback) => {
            return params.value
          }
        },
        grid: {
          left: '8px',
          right: '8px',
          top: '8px',
          bottom: '8px',
          containLabel: true
        },
        xAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: '#666'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#BFF7FF',
            align: 'left'
          },
          splitLine: {
            show: false
          },
          data: labels
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#666'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#BFF7FF'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#ffffff33'
            }
          }
        },
        series: getSeriesData()
      }
      // 定义柱状图左侧图形元素
      const leftRect = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
          width: 19, // 柱状图宽
          zWidth: 8, // 阴影折角宽
          zHeight: 4 // 阴影折角高
        },
        buildPath: function(ctx, shape) {
          const api = shape.api
          const xAxisPoint = api.coord([shape.xValue, 0])
          const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight]
          const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight]
          const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]]
          const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]]
          const p4 = [shape.x + shape.width / 2, shape.y]

          ctx.moveTo(p0[0], p0[1])
          ctx.lineTo(p1[0], p1[1])
          ctx.lineTo(p2[0], p2[1])
          ctx.lineTo(p3[0], p3[1])
          ctx.lineTo(p4[0], p4[1])
          ctx.lineTo(p0[0], p0[1])
          ctx.closePath()
        }
      })
      // 定义柱状图右侧以及顶部图形元素
      const rightRect = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
          width: 18,
          zWidth: 15,
          zHeight: 8
        },
        buildPath: function(ctx, shape) {
          const api = shape.api
          const xAxisPoint = api.coord([shape.xValue, 0])
          const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2]
          const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]]
          const p4 = [shape.x + shape.width / 2, shape.y]
          const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]]
          const p6 = [
            shape.x + shape.width / 2 + shape.zWidth,
            shape.y - shape.zHeight / 2
          ]
          const p7 = [
            shape.x - shape.width / 2 + shape.zWidth,
            shape.y - shape.zHeight
          ]
          ctx.moveTo(p4[0], p4[1])
          ctx.lineTo(p3[0], p3[1])
          ctx.lineTo(p5[0], p5[1])
          ctx.lineTo(p6[0], p6[1])
          ctx.lineTo(p4[0], p4[1])

          ctx.moveTo(p4[0], p4[1])
          ctx.lineTo(p6[0], p6[1])
          ctx.lineTo(p7[0], p7[1])
          ctx.lineTo(p1[0], p1[1])
          ctx.lineTo(p4[0], p4[1])
          ctx.closePath()
        }
      })
      // 注册图形元素
      echarts.graphic.registerShape('leftRect', leftRect)
      echarts.graphic.registerShape('rightRect', rightRect)
      function getSeriesData() {
        const data = []
        seriesData.forEach((item, index) => {
          data.push(
            {
              type: 'custom',
              name: item.label,
              renderItem: function(params, api) {
                return getRenderItem(params, api)
              },
              data: item.value,
              itemStyle: {
                color: () => {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index])
                }
              }
            }
          )
        })
        return data
      }
      function getRenderItem(params, api) {
        const index = params.seriesIndex
        const location = api.coord([api.value(0) + index, api.value(1)])
        return {
          type: 'group',
          children: [
            {
              type: 'leftRect',
              shape: {
                api,
                xValue: api.value(0) + index,
                yValue: api.value(1),
                x: location[0],
                y: location[1]
              },
              style: api.style()
            },
            {
              type: 'rightRect',
              shape: {
                api,
                xValue: api.value(0) + index,
                yValue: api.value(1),
                x: location[0],
                y: location[1]
              },
              style: api.style()
            }
          ]
        }
      }
      this.chart3.setOption(option)
    },
    initChart4() {
      this.chart4 = echarts.init(this.$refs.chart4, 'macarons')
      const count = 24
      const axisLine = {
        show: false,
        lineStyle: {
          color: '#666'
        }
      }
      const dataX = []
      for (let i = 0; i < count; i++) {
        dataX.push(i < 10 ? '0' + i + '时' : i + '时')
      }
      const option = {
        tooltip: {
          trigger: 'axis',
          position: (point, params, dom, rect, size) => {
            return [point[0], 10]
          }
        },
        legend: {
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          left: '8px',
          right: '8px',
          top: '28px',
          bottom: '8px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine,
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 2,
            color: '#BFF7FF'
          },
          data: dataX
        },
        yAxis: {
          type: 'value',
          axisLine,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#BFF7FF'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#ffffff33'
            }
          }
        },
        series: [
          {
            type: 'line',
            name: '温度',
            smooth: true,
            symbol: 'circle',
            symbolSize: 1,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#00B3DB'
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#10b1fd4d'
                    },
                    {
                      offset: 1,
                      color: '#2bbffd00'
                    }
                  ],
                  false
                ),
                shadowColor: '#00B3DB',
                shadowBlur: 20
              }
            },
            data: utils.randNum(0, 20, count, true)
          },
          {
            type: 'line',
            name: '湿度',
            smooth: true,
            symbol: 'circle',
            symbolSize: 1,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#9999FF'
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#10b1fd4d'
                    },
                    {
                      offset: 1,
                      color: '#2bbffd00'
                    }
                  ],
                  false
                ),
                shadowColor: '#9999FF',
                shadowBlur: 20
              }
            },
            data: utils.randNum(40, 60, count, true)
          },
          {
            type: 'line',
            name: '光照',
            smooth: true,
            symbol: 'circle',
            symbolSize: 1,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#3BF6EC'
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#10b1fd4d'
                    },
                    {
                      offset: 1,
                      color: '#2bbffd00'
                    }
                  ],
                  false
                ),
                shadowColor: '#3BF6EC',
                shadowBlur: 20
              }
            },
            data: utils.randNum(5, 20, count, true)
          }
        ]
      }
      this.chart4.setOption(option)
    },
    initChart5() {
      this.chart5 = echarts.init(this.$refs.chart5, 'macarons')
      const count = 24
      const axisLine = {
        show: false,
        lineStyle: {
          color: '#666'
        }
      }
      const dataX = []
      for (let i = 0; i < count; i++) {
        dataX.push(i < 10 ? '0' + i + '时' : i + '时')
      }
      const option = {
        tooltip: {
          trigger: 'axis',
          position: (point, params, dom, rect, size) => {
            return [point[0], 10]
          }
        },
        legend: {
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          left: '8px',
          right: '8px',
          top: '28px',
          bottom: '8px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine,
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 2,
            color: '#BFF7FF'
          },
          data: dataX
        },
        yAxis: {
          type: 'value',
          axisLine,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#BFF7FF'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#ffffff33'
            }
          }
        },
        series: [
          {
            type: 'line',
            name: '二氧化碳',
            smooth: true,
            symbol: 'circle',
            symbolSize: 1,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#FFEA00'
              }
            },
            data: utils.randNum(0, 6, count, true)
          },
          {
            type: 'line',
            name: '温度',
            smooth: true,
            symbol: 'circle',
            symbolSize: 1,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#F23593'
              }
            },
            data: utils.randNum(5, 25, count, true)
          },
          {
            type: 'line',
            name: '湿度',
            smooth: true,
            symbol: 'circle',
            symbolSize: 1,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#00FC0C'
              }
            },
            data: utils.randNum(40, 60, count, true)
          },
          {
            type: 'line',
            name: '光照',
            smooth: true,
            symbol: 'circle',
            symbolSize: 1,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#10B1FD',
                lineStyle: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: '#0CF4FD'
                      },
                      {
                        offset: 1,
                        color: '#0954FD'
                      }
                    ],
                    false
                  )
                }
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#10b1fd4d'
                    },
                    {
                      offset: 1,
                      color: '#2bbffd00'
                    }
                  ],
                  false
                ),
                shadowColor: '#2BBFFD',
                shadowBlur: 20
              }
            },
            data: utils.randNum(35, 40, count, true)
          }
        ]
      }
      this.chart5.setOption(option)
    }
  }
}
</script>
<style lang="scss">
.amap-logo {
  display: none !important;
}
.amap-copyright {
  display: none !important;
}
</style>
<style lang="scss">
@font-face{
  font-family: PangMenZhengDao;
  src: url('~@/assets/home/PangMenZhengDao.ttf');
}
@font-face{
  font-family: YouSheBiaoTiHei;
  src: url('~@/assets/home/YouSheBiaoTiHei.ttf');
}
@font-face{
  font-family: DS-Digital;
  src: url('~@/assets/home/DS-Digital.ttf');
}
::-webkit-scrollbar {
  width : 0;
  height: 0;
}
.touch {
  cursor:pointer;
}
.chart_box {
  width: 100%;
  height: 170px;
  overflow: hidden;
}
.select-box {
  z-index: 9999;
  position: relative;
  font-size: 16px;
  line-height: 32px;
  ul {
    list-style: none;
    margin: 0;
    position: absolute;
    padding-inline-start: 0;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 128px;
    overflow: auto;
    border-radius: 4px;
    li {
      padding: 0 10px;
      text-align: center;
      color: #eee;
      text-shadow: 0 0 7px #4169e1, 0 0 15px #ffffff;
      font-weight: bolder;
      background-image: url('~@/assets/home/klr.png');
      background-size: 100% 100%;
    }
    li:hover {
      padding: 0 10px;
      color: wheat;
      background-color: rgba(255, 255, 255, 0.2);
    }
    .active {
      color: white;
      background-color: rgba(255, 255, 255, 0.3);
    }
  }
}
.ct-box-1 {
  display: flex;
  flex-direction: column;
  .ctn {
    flex: 1;
    position: relative;
  }
  ul {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 10px 0;
    display: grid;
    grid-template-columns:50% 50%;
    li {
      position: relative;
      padding-left: 120px;
      margin: 2px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      letter-spacing: 1px;
      &:before {
        content: "";
        position: absolute;
        top: -10px;
        left: 30px;
        height: 70px;
        width: 70px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% auto;
      }
      .label {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-wrap: normal;
        span {
          color: white;
          font-size: 23px;
          font-weight: 400;
          font-family: YouSheBiaoTiHei;
          background: linear-gradient(0, #005DF8 2%, #00ff7f 98%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .val {
        color: #ffffff;
        font-size: 36px;
        font-family: DS-Digital;
        text-transform: uppercase;
        font-weight: bold;
        text-shadow: 0 0 7px #00FFC6, 0 0 15px #fff
      }
    }
    li {
      &:before {
        background-image: url('~@/assets/home/c1.png');
      }
    }
  }
}
.ct-box-2 {
  display: flex;
  flex-direction: column;
  .ctn {
    flex: 1;
    position: relative;
  }
  ul {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 10px 0;
    display: grid;
    grid-template-columns:33.33% 33.33% 33.33%;
    li {
      position: relative;
      padding-left: 100px;
      margin-bottom: 7px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 30px;
        height: 100%;
        width: 60px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% auto;
      }
      div {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-wrap: normal;
      }
      span {
        color: white;
        font-size: 16px;
        font-weight: bolder;
        font-family: PangMenZhengDao;
      }
      font {
        color: #54c3fb;
        font-size: 12px;
      }
      p {
        margin: 4px 0;
        color: #C9E9F9;
        font-size: 14px;
      }
    }
    li:nth-child(1) {
      &:before {
        background-image: url('~@/assets/home/m1.png');
      }
    }
    li:nth-child(2) {
      &:before {
        background-image: url('~@/assets/home/m2.png');
      }
    }
    li:nth-child(3) {
      &:before {
        background-image: url('~@/assets/home/m3.png');
      }
    }
    li:nth-child(4) {
      &:before {
        background-image: url('~@/assets/home/m4.png');
      }
    }
    li:nth-child(5) {
      &:before {
        background-image: url('~@/assets/home/m5.png');
      }
    }
    li:nth-child(6) {
      &:before {
        background-image: url('~@/assets/home/m6.png');
      }
    }
    li:nth-child(7) {
      &:before {
        background-image: url('~@/assets/home/m3.png');
      }
    }
    li:nth-child(8) {
      &:before {
        background-image: url('~@/assets/home/m2.png');
      }
    }
    li:nth-child(9) {
      &:before {
        background-image: url('~@/assets/home/m7.png');
      }
    }
  }
}
.ct-box-3 {
  display: flex;
  flex-direction: column;
  .ctn {
    flex: 1;
    position: relative;
  }
  ul {
    position: absolute;
    top: 4px;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns:33.33% 33.33% 33.33%;
    li {
      position: relative;
      padding-left: 70px;
      margin: 2px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      letter-spacing: 1px;
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 12px;
        height: 60px;
        width: 60px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% auto;
      }
      .label {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-wrap: normal;
        background-image: url('~@/assets/home/label.png');
        background-size: 100% 50%;
        background-repeat: no-repeat;
        background-position: left bottom;
        span {
          padding-left: 14px;
          color: #BFF7FF;
          font-size: 17px;
          font-weight: bold;
          line-height: 24px;
        }

      }
      .val {
        color: #ffffff;
        font-size: 36px;
        font-weight: bold;
        font-family: DS-Digital;
        text-transform: uppercase;
        text-shadow: 0 0 7px #4169e1, 0 0 15px #ffffff
      }
    }
    li {
      &:before {
        background-image: url('~@/assets/home/b1.png');
      }
    }
  }
}
.ct-box-4 {
  width: 100%;
  height: 16.5vh;
  overflow-y: auto;
  padding-left: 20px;
  dl {
    margin: 0;
    display: table;
    width: 100%;
  }
  dt {
    display: table-row;
  }
  dt > div {
    display: table-cell;
    font-size: 24px;
    font-family: YouSheBiaoTiHei;
    background: linear-gradient(0deg, #59C8FF 0%, #FAFEFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  dd {
    display: table-row;
  }
  dd > div {
    display: table-cell;
    vertical-align: middle;
    padding: 5px 1px;
    font-size: 14px;
    color: #ffffff;
  }
}
.ct-box-5 {
  display: flex;
  flex-direction: column;
  height:70px;
  .ctn {
    flex: 1;
    position: relative;
  }
  ul {
    position: absolute;
    top: 4px;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns:33.33% 33.33% 33.33%;
    li {
      position: relative;
      margin: 2px auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      letter-spacing: 1px;
      text-align: center;
      .label {
        min-width: 90px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-wrap: normal;
        span {
          font-size: 32px;
          font-family: PangMenZhengDao;
          font-weight: bold;
        }

      }
      .val {
        color: #edededed;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        text-shadow: 0 0 7px #4169e1, 0 0 15px #ffffff
      }
    }
    li:nth-child(1) {
      .label {
        background-image: url('~@/assets/home/la1.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      span {
        background: linear-gradient(0deg, #0A76F6 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    li:nth-child(2) {
      .label {
        background-image: url('~@/assets/home/la2.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      span {
        background: linear-gradient(0deg, #16F7FF 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    li:nth-child(3) {
      .label {
        background-image: url('~@/assets/home/la3.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      span {
        background: linear-gradient(0deg, #FAFF67 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
.map {
  width: 100%;
  height: 50vh;
  position: relative;
  border: 2px solid rgba(0,0,0,0.65);
  .map_bottom_box {
    width: 100%;
    height: 105px;
    position: absolute;
    bottom: 0;
    padding: 6px 12px;
    background-color: rgba(0,0,0,0.25);
    font-size: 14px;
    color: #03CCFE;
    .btn {
      padding: 5px 10px;
      border: 1px solid #00F6FF;
      border-radius: 3px;
      width: 150px;
      display: inline-block;
      font-size: 12px;
      margin: 5px 12px;
    }
    .btn:hover {
      color: white;
    }
  }
}
.top-wrapper {
  padding: 12px;
	width: 100%;
	display: flex;
  position: absolute;
	align-items: center;
	justify-content: center;

  font-size: 44px;
  font-family: PangMenZhengDao;
  font-weight: 400;
  color: #FFFFFF;

  background: linear-gradient(0deg, #47D6FF 25%, #FFFFFF 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bot-wrapper {
	display: flex;
}
.da-ping {
	height: 100vh;
	overflow: hidden;
	background-image: url('~@/assets/home/bg.png');
	background-size: 100% 100%;
	padding: {
		left: 1vw;
		right: 1vw;
	}
	.left {
    padding: {
      top: 40px;
      left: 20px;
    };
		width: 30%;
		height: 97vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.box_div {
			height: 24%;
			background-image: url('~@/assets/home/klr.png');
			background-size: 100% 100%;
		}
	}
  .right {
    padding: {
      top: 40px;
      right: 20px;
    };
    width: 30%;
    height: 97vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .box_div {
      height: 24%;
      background-image: url('~@/assets/home/klr.png');
      background-size: 100% 100%;
    }
  }
	.center {
    padding-top: 90px;
		width: 40%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1 0 auto;
		margin: 0 0.6vw;
		height: 97vh;
		.center_div_up {
			height: 60%;
      background-image: url('~@/assets/home/kc.png');
      background-size: 100% 100%;
      padding: 12px;
		}
		.center_div_down {
			height: 38%;
      background-image: url('~@/assets/home/kb.png');
      background-size: 100% 100%;
      display: inherit;
      .box_c {
        width: 48%;
      }
      .box_b {
        padding: {
          top: 8px;
          left: 20px;
          right: 8px;
        };
        span {
          font-size: 14px;
          color: #E4E9FB;
          line-height: 26px;
        }
      }
		}
	}
  .box_title {
    height: 42px;
    width: 92%;
    margin: {
      top: 4px;
      left: 12px;
    };
    background-image: url('~@/assets/home/box_title.png');
    background-size: 100% 100%;
    span {
      padding-left: 46px;
      line-height: 42px;
      font-size: 26px;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      color: #FFFFFF;
      background: linear-gradient(0deg, #47D6FF 10%, #FFFFFF 70%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>
