<template>
  <div class="containMap" ref="appRef" id="dpModels">
    <div class="head">
      <div class="title">高标准农田遥感监测大数据平台</div>
      <div class="weather">
        <div class="weatherLeft">
          <div class="date">2024.02.21</div>
          <div class="weatherInfo">15°C 晴</div>
        </div>
        <div class="weatherRight">09:27:53</div>
      </div>
      <div class="sysBar">
        <div :class="item.Category == CategoryType ? 'sys sys-active' : 'sys'" v-for="(item, index) in mainData" :key="index"
          @click="changeCategory(item.Category)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <img src="@/assets/screenSccnTwo/left_bg.png" alt="" id="leftBg" />
    <img src="@/assets/screenSccnTwo/right_bg.png" alt="" id="rightBg" />
    <img src="@/assets/screenSccnTwo/down_bg.png" alt="" id="downBg" />
    <div class="leftSlider">
      <div :class="
          optionsType == item.type ? 'listItem listItem-active' : 'listItem'
        " v-for="(item, index) in mainData[CategoryType].typeOptions" :key="index" @click="changeOptions(item)" @mouseover="
          () => {
            listItemFlag = index
          }
        " @mouseleave="
          () => {
            listItemFlag = -1
          }
        ">
        <img class="listItemIcon" :src="
            require('@/assets/screenSccnTwo/' +
              (optionsType == item.type ? item.iconActive : item.icon))
          " alt="类型" />
        <p class="listItemName">{{ item.name }}</p>
        <div class="listItemInfo" v-show="listItemFlag == index">
          <p class="desc">{{ item.dataSource }}</p>
          <p class="desc">{{ item.ratio }}</p>
          <p class="desc">{{ item.desc }}</p>
        </div>
      </div>
      <div class="cropsList">
        <div :class="
            cropsType == item.type ? 'cropsItem cropsItem-active' : 'cropsItem'
          " v-for="(item, index) in cropsOptions" :key="index" @click="changeCrops(item)">
          <img :src="require('@/assets/screenSccnTwo/' + item.icon)" alt="农作物种类" class="cropsIcon" v-if="item.icon" />
          <span class="cropsName">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div :class="toggleFlag ? 'rightSlider rightactive' : 'rightSlider'">
      <!-- <div class="rightSliderTop">
        <div class="weatherBox">
          <p class="top">
            <span>2024-03-22</span>
            <span>星期五</span>
            <span>甲辰年二月十三</span>
          </p>
          <div class="timeAndTem">
            <span class="time">01:33</span>
            <p>
              <img src="@/assets/cucumber_img/qing.png" alt="">
              <span class="tem">15°C</span>
              <span class="weather">晴</span>
            </p>
          </div>
        </div>
      </div> -->
      <div class="rightSliderBottom">
        <div class="chartBox">
          <div class="rightEchart" v-if="CategoryType == 'yg'">
            <div class="echartItem">
              <div class="itemHead">
                <p class="itemName" v-if="['营养状况','非粮化监测','效益评估'].includes(echartsTitle)">{{ cropsTypeName }}{{echartsTitle}}评价</p>
                <p class="itemName" v-else>{{ cropsTypeName }}{{echartsTitle}}数据</p>
                <!-- <span class="itemUnit">单位：万亩</span> -->
              </div>
              <div class="itemContent">
                <echartsBar v-if="optionsType=='zwsb'" :optionsType="optionsType"></echartsBar>
                <echartszsjcPie v-if="optionsType=='zsjc'" :optionsType="optionsType"></echartszsjcPie>
                <div class="descript" v-if="optionsType=='yyzk'">
                  从成熟期分布图来看，农场作物平均叶层叙积累量为0.78，但是个别田块之间的叶层氮积累量存在些许差异。
                </div>
                <echartsLine v-if="['csdyg','clyg'].includes(optionsType)" :optionsType="optionsType"></echartsLine>
                <div class="descript" v-if="optionsType=='flhjc'">
                  从“非粮化”监测分布图来看，农场非粮化作物占比4%.
                </div>
                <div class="descript" v-if="optionsType=='xypg'">
                  从效益预估分布图来看，农场作物预估产值 1745 万元，同比去年增长30%。
                </div>
              </div>
            </div>
            <div class="echartItem">
              <div class="itemHead">
                <p class="itemName" v-if="['营养状况','非粮化监测','效益评估'].includes(echartsTitle)">{{ cropsTypeName }}{{echartsTitle}}占比</p>
                <p class="itemName" v-else>{{ cropsTypeName }}{{echartsTitle}}统计</p>
                <!-- <span class="itemUnit">单位：万亩</span> -->
              </div>
              <div class="itemContent">
                <echartsTable v-if="['zwsb','zsjc','csdyg','clyg'].includes(optionsType)" :optionsType="optionsType"></echartsTable>
                <echartsyyzkPie v-if="['yyzk','flhjc','xypg'].includes(optionsType)" :optionsType="optionsType"></echartsyyzkPie>
              </div>
            </div>
            <div class="echartItem">
              <div class="itemHead">
                <p class="itemName" v-if="['营养状况','非粮化监测','效益评估'].includes(echartsTitle)">{{ cropsTypeName }}各地块{{echartsTitle}}</p>
                <p class="itemName" v-else>{{ cropsTypeName }}{{echartsTitle}}对比</p>
                <!-- <span class="itemUnit">单位：万亩</span> -->
              </div>
              <div class="itemContent">
                <echartsLine v-if="['zwsb','csdyg','clyg'].includes(optionsType)" :optionsType="optionsType"></echartsLine>
                <echartsBars v-if="optionsType=='zsjc'" :optionsType="optionsType"></echartsBars>
                <echartsBar v-if="['yyzk','flhjc','xypg'].includes(optionsType)" :optionsType="optionsType"></echartsBar>
              </div>
            </div>
          </div>
          <div class="rightEchart" v-if="CategoryType == 'nt'">
            <div class="echartItem">
              <div class="itemHead">
                <p class="itemName">
                  {{ cropsTypeName }}{{ echartsTitle }}数据
                </p>
                <span class="itemUnit">单位：万亩</span>
              </div>
              <div class="itemContent">
                <echartsPies :optionsType="optionsType" v-if="optionsType == 'mqjc' || optionsType == 'bcqjc'"></echartsPies>

                <echartsBar_copy ref="echartsBarCopy" :optionsType="optionsType" v-else></echartsBar_copy>
              </div>
            </div>
            <div class="echartItem" style="flex: 2">
              <div class="itemHead">
                <p class="itemName">
                  {{ cropsTypeName }}{{ echartsTitle }}统计
                </p>
              </div>
              <div class="itemContent" style="display: flex">
                <echartsTable :optionsType="optionsType"></echartsTable>
              </div>
            </div>
          </div>

          <div class="toggleBtn">
            <img :src="
                toggleFlag
                  ? require('@/assets/screenSccnTwo/show.png')
                  : require('@/assets/screenSccnTwo/unshow.png')
              " alt="" @click="changeToggle" />
          </div>

          <div class="mapToolAndLegend">
            <div class="mapTools">
              <div class="tools">
                <div class="toolItem" @click="handleFun('full')">
                  <img src="@/assets/screenSccnTwo/full-screen.png" title="全屏" />
                </div>
                <div class="toolItem" @click="handleFun('magnify')">
                  <img src="@/assets/screenSccnTwo/magnify.png" title="放大" />
                </div>
                <div class="toolItem" @click="handleFun('lessen')">
                  <img src="@/assets/screenSccnTwo/lessen.png" title="缩小" />
                </div>
                <div class="toolItem" @click="handleFun('center')">
                  <img src="@/assets/screenSccnTwo/back-cnter.png" title="回到中心" />
                </div>
                <div class="toolItem" @click="handleFun('distance')">
                  <img src="@/assets/screenSccnTwo/distance.png" title="测量距离" />
                </div>
                <div class="toolItem" @click="handleFun('area')">
                  <img src="@/assets/screenSccnTwo/area.png" title="测量面积" />
                </div>
                <div class="toolItem" @click="handleFun('clear')">
                  <img src="@/assets/screenSccnTwo/clear.png" title="清除" />
                </div>
                <!-- <div class="toolItem" @click="handleFun('curlUp')">
                  <img src="@/assets/screenSccnTwo/curl-up.png" title="卷帘图">
                </div> -->
              </div>
              <div class="tools" style="margin-top: 20px">
                <div class="toolItem mapType">
                  <img src="@/assets/screenSccnTwo/mapType.png" alt="" title="底图切换" @click="changeMapTyeFlag" />
                  <ul v-show="mapTypeFlag">
                    <li :class="mapType == 'zk' ? 'map-active' : ''" @click="changeMapTye('zk')">
                      中科星图
                    </li>
                    <li :class="mapType == 'td' ? 'map-active' : ''" @click="changeMapTye('td')">
                      天地图
                    </li>
                  </ul>
                </div>
              </div>
              <div class="layerDiv">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 10px 0; border-bottom: 1px solid #fff"></div>
                <el-checkbox-group v-model="checkedLayers" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="layer in layers" :label="layer" :key="layer">{{ layer }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </div>

          <div class="typeLegend">
            <img class="pre" src="@/assets/screenSccnTwo/pre.png" alt="">
            <div class="legends">
              <div class="title">图例{{ legendsUnit[optionsType] }}</div>
              <div class="listType">
                <div class="list" v-for="(item, index) in legnedsOption[optionsType]" :key="index+optionsType">
                  <span class="leg" :style="`background:${item.background?item.background:('#'+item.color)};`"></span>
                  <span class="name">{{item.name}}</span>
                </div>
              </div>
            </div>
            <img class="after" src="@/assets/screenSccnTwo/after.png" alt="">
          </div>
        </div>
      </div>
    </div>

    <screen-town v-if="tabActiveIndex == 0" ref="screenTown" id="MyMap" :titles="title" @getRootName="getRootName"></screen-town>
  </div>
</template>

<script>
import { useIndex } from '../../utils/utilsDramAdminTwo.js'
import echartsTable from './components/echartsTable'
import screenTown from '@/components/mapbox/screenTwo'
import echartsBar from './components/echartsBar'
import echartsBars from './components/echartsBars'
import echartsBar_copy from './components/echartsBar_copy'
import echartsLine from './components/echartsLine'
import echartsyyzkPie from './components/echartsyyzkPie'
import echartsPies from './components/echartsPies'
import echartszsjcPie from './components/echartszsjcPie'
import dateutil from '@/common/dateutil'
import { getAction } from '@/api/manage'
// import { getCurrDate } from "@/common/dateutil";
import Vue from 'vue'
import jsonData from './data/data.json'

const layerOptions = ['地块', '注记', '村边界', '乡镇边界', '县边界']

export default {
  name: 'screenMain',
  props: {
    title: '随县',
  },
  data () {
    return {
      mainData: jsonData,
      tabActiveIndex: '0',
      CategoryType: 'yg', //类目
      optionsType: jsonData['yg'].typeOptions[0].type, //类型
      cropsOptions: jsonData['yg'].typeOptions[0].crops || [], //农作物种类数据
      cropsType: jsonData['yg'].typeOptions[0].crops[0]?.type || '', //农作物种类
      cropsTypeName: jsonData['yg'].typeOptions[0].crops[0]?.name || '', //农作物种类
      toggleFlag: true,
      mapTypeFlag: false,
      listItemFlag: -1,
      mapType: 'zk',
      show: true,
      echartsTitle: '作物识别',
      checkAll: false,
      checkedLayers: ['地块', '注记', '村边界'],
      layers: layerOptions,
      isIndeterminate: true,
      legnedsOption: {
        zwsb: [{
          name: '冬小麦',
          color: '37FFEB'
        }, {
          name: '夏玉米',
          color: 'FFBA60'
        }, {
          name: '大豆',
          color: 'A64D79'
        }],
        zsjc: [{
          name: '很差',
          color: 'a70024'
        }, {
          name: '差',
          color: 'f89454'
        }, {
          name: '较差',
          color: 'fef8b4'
        }, {
          name: '中等',
          color: '5ab761'
        }, {
          name: '较好',
          color: '128947'
        }, {
          name: '好',
          color: '036d39'
        }, {
          name: '很好',
          color: '026a38'
        }],
        yyzk: [{
          name: '0~195',
          color: 'cd2626'
        }, {
          name: '195~340',
          color: 'ff3030'
        }, {
          name: '340~485',
          color: 'ff7256'
        }, {
          name: '485~630',
          color: '228b22'
        }, {
          name: '630~775',
          color: '32cd30'
        }, {
          name: '775~920',
          color: '7cfc00'
        }, {
          name: '920~1165',
          color: '98fb98'
        }, {
          name: '1165~1310',
          color: 'eee8aa'
        }, {
          name: '1310~1455',
          color: 'ffd700'
        }, {
          name: '1455~2500',
          color: 'cd950c'
        }, {
          name: '2500~5500',
          color: '3399cc'
        }, {
          name: '5500~7500',
          color: '7379cc'
        }, {
          name: '7500~10000',
          color: '3300cc'
        }],
        csdyg: [{
          name: '10',
          color: '006400'
        }, {
          name: '20',
          color: '008000'
        }, {
          name: '30',
          color: '2e8b57'
        }, {
          name: '40',
          color: '66cdaa'
        }, {
          name: '50',
          color: '00ff7f'
        }, {
          name: '60',
          color: 'adff2f'
        }, {
          name: '70',
          color: '9acd32'
        }, {
          name: '80',
          color: 'ffd700'
        }, {
          name: '90',
          color: 'ffff00'
        }, {
          name: '100',
          color: 'daa520'
        }],
        clyg: [{
          name: '0~200',
          color: '00ff00'
        }, {
          name: '200~225',
          color: '21ff00'
        }, {
          name: '225~250',
          color: '3dff00'
        }, {
          name: '250~275',
          color: '58ff00'
        }, {
          name: '275~300',
          color: '6fff00'
        }, {
          name: '300~325',
          color: '84ff00'
        }, {
          name: '325~350',
          color: 'a2ff00'
        }, {
          name: '350~375',
          color: 'bcff00'
        }, {
          name: '375~400',
          color: 'd3ff00'
        }, {
          name: '400~425',
          color: 'f2ff00'
        }, {
          name: '425~450',
          color: 'ffef00'
        }, {
          name: '450~475',
          color: 'ffd600'
        }, {
          name: '475~500',
          color: 'ffb600'
        }, {
          name: '500~525',
          color: 'ffa100'
        }, {
          name: '525~550',
          color: 'ff8d00'
        }, {
          name: '550~575',
          color: 'ff7500'
        }, {
          name: '575~600',
          color: 'ff5800'
        }, {
          name: '600~625',
          color: 'ff3b00'
        }, {
          name: '625~650',
          color: 'ff2600'
        }, {
          name: '650~9999',
          color: 'ff0000'
        }],
        flhjc: [{
          name: '粮食作物',
          color: '018506'
        }, {
          name: '非粮食作物',
          color: 'f2ae79'
        }],
        xypg: [{
          name: '0~200',
          color: '00ff00'
        }, {
          name: '200~225',
          color: '21ff00'
        }, {
          name: '225~250',
          color: '3dff00'
        }, {
          name: '250~275',
          color: '58ff00'
        }, {
          name: '275~300',
          color: '6fff00'
        }, {
          name: '300~325',
          color: '84ff00'
        }, {
          name: '325~350',
          color: 'a2ff00'
        }, {
          name: '350~375',
          color: 'bcff00'
        }, {
          name: '375~400',
          color: 'd3ff00'
        }, {
          name: '400~425',
          color: 'f2ff00'
        }, {
          name: '425~450',
          color: 'ffef00'
        }, {
          name: '450~475',
          color: 'ffd600'
        }, {
          name: '475~500',
          color: 'ffb600'
        }, {
          name: '500~525',
          color: 'ffa100'
        }, {
          name: '525~550',
          color: 'ff8d00'
        }, {
          name: '550~575',
          color: 'ff7500'
        }, {
          name: '575~600',
          color: 'ff5800'
        }, {
          name: '600~625',
          color: 'ff3b00'
        }, {
          name: '625~650',
          color: 'ff2600'
        }, {
          name: '650~9999',
          color: 'ff0000'
        }],
        mqjc: [{
          name: '四类苗',
          color: 'ba1414'
        }, {
          name: '三类苗',
          color: 'f2ae79'
        }, {
          name: '二类苗',
          color: 'b8db84'
        }, {
          name: '一类苗',
          color: '018506'
        }, {
          name: '云量',
          color: 'ffffff'
        }],
        trsqjc: [{
          name: '0.1',
          background: 'linear-gradient(#8c510a,#bf812d)'
        }, {
          name: '0.2',
          background: 'linear-gradient(#bf812d,#dfc27d)'
        }, {
          name: '0.3',
          background: 'linear-gradient(#dfc27d,#f6e8c3)'
        }, {
          name: '0.4',
          background: 'linear-gradient(#f6e8c3,#f5f5f5)'
        }, {
          name: '0.5',
          background: 'linear-gradient(#f5f5f5, #c7eae5)'
        }, {
          name: '0.6',
          background: 'linear-gradient(#c7eae5,#80cdc1)'
        }, {
          name: '0.7',
          background: 'linear-gradient(#80cdc1,#35978f)'
        }, {
          name: '0.8',
          background: 'linear-gradient(#35978f,#01665e)'
        }, {
          name: '0.9',
          background: 'linear-gradient(#01665e,#003c30)'
        }, {
          name: '1.0',
          background: 'linear-gradient(#003c30,#003c30)'
        }],
        bcqjc: [{
          name: '无风险',
          color: '267a0a'
        }, {
          name: '低风险',
          color: 'b0e000'
        }, {
          name: '中风险',
          color: 'ffcb42'
        }, {
          name: '高风险',
          color: 'ff0000'
        }],
        qxjc: [{
          name: '0',
          background: 'linear-gradient(#f4f4f4,#bef4b0)'
        }, {
          name: '5',
          background: 'linear-gradient(#bef4b0,#70ec4e)'
        }, {
          name: '10',
          background: 'linear-gradient(#bef4b0,#70ec4e)'
        }, {
          name: '25',
          background: 'linear-gradient(#bef4b0,#70ec4e)'
        }, {
          name: '50',
          background: 'linear-gradient(#6ab9f2,#0001f8)'
        }, {
          name: '100',
          background: 'linear-gradient(#0001f8,#f0f)'
        }, {
          name: '200',
          background: 'linear-gradient(#f0f,#f0f)'
        }],
        qxzhjc: [{
          name: '未受灾',
          color: '267a0a'
        }, {
          name: '轻度受灾',
          color: 'b0e000'
        }, {
          name: '中度受灾',
          color: 'ffcb42'
        }, {
          name: '重度受灾',
          color: 'ff0000'
        }],
      },
      legendsUnit: {
        zwsb: '',
        zsjc: '',
        yyzk: '(单位: g/㎡)',
        csdyg: '',
        clyg: '(单位: 千克/亩)',
        flhjc: '',
        xypg: '(单位: 万元/万亩)',
        mqjc: '',
        trsqjc: '',
        bcqjc: '',
        qxjc: '(单位: mm)',
        qxzhjc: '',
      }
    }
  },

  filters: {
    filtrIcon (url) {
      return require(url)
    },
    filterWeather (val) {
      if (val == '晴') {
        return require('@/assets/cucumber_img/qing.png')
      } else if (val == '阴') {
        return require('@/assets/cucumber_img/yin.png')
      } else if (/雷/.test(val)) {
        return require('@/assets/cucumber_img/lei.png')
      } else if (/雪/.test(val)) {
        return require('@/assets/cucumber_img/xue.png')
      } else if (/雨/.test(val)) {
        return require('@/assets/cucumber_img/yu.png')
      } else if (/云/.test(val)) {
        return require('@/assets/cucumber_img/yun.png')
      } else if (/雾/.test(val)) {
        return require('@/assets/cucumber_img/wu.png')
      } else if (/沙/.test(val)) {
        return require('@/assets/cucumber_img/shachen.png')
      } else {
        return require('@/assets/cucumber_img/qing.png')
      }
    },
  },
  beforeDestroy () {
    clearTimeout(this.interVal)
  },
  components: {
    screenTown,
    echartsBar,
    echartsyyzkPie,
    echartsPies,
    echartsLine,
    echartsBars,
    echartsTable,
    echartsBar_copy,
    echartszsjcPie,
  },

  beforeCreate () {
    if (this.$route.query.tk) {
      // console.log(this.$route.query.tk, '出来了')
      Vue.ls.set('ACCESS_TOKEN', this.$route.query.tk)
      Vue.ls.set('ACCESS_NAME', this.$route.query.name)
      this.userName = this.$route.query.name ? this.$route.query.name : '管理员'
    }
  },

  mounted () {
    var previousField = window.location.host.split(':')[0]
    console.log(previousField) // 输出之前字段的值
    this.isImg = previousField === '36.40.79.205'
    const { calcRate, windowDraw } = useIndex(this.$refs.appRef, 1920, 1080)
    calcRate()
    windowDraw()
    let date = new Date()
    this.nowDateStr = date.format('yyyy-MM-dd')
    this.getTimeCurrDate()
    this.getTianQi()
    window.addEventListener('keydown', this.keydown, true)
  },

  methods: {
    handleCheckAllChange (val) {
      this.checkedLayers = val ? layerOptions : []
      this.isIndeterminate = false
      if (this.checkAll) {
        layerOptions.forEach((element) => {
          this.$refs.screenTown.treeChange(element, true)
        })
      } else {
        layerOptions.forEach((element) => {
          this.$refs.screenTown.treeChange(element, false)
        })
      }
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.layers.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.layers.length
      layerOptions.forEach((element) => {
        if (value.indexOf(element) < 0) {
          this.$refs.screenTown.treeChange(element, false)
        } else {
          this.$refs.screenTown.treeChange(element, true)
        }
      })
    },
    //类目切换
    changeCategory (type) {
      this.CategoryType = type
      this.optionsType = jsonData[type].typeOptions[0].type
      this.echartsTitle = jsonData[type].typeOptions[0].name
      this.cropsOptions = jsonData[type].typeOptions[0].crops || []
      this.cropsType = jsonData[type].typeOptions[0]?.crops[0].type || ''
      this.cropsTypeName = jsonData[type].typeOptions[0]?.crops[0].name || ''

      // 地块服务切换
      this.changeLayerDK()
    },
    //类型切换
    changeOptions (item) {
      // console.log(item, "sdfs水电费");
      this.optionsType = item.type
      this.cropsOptions = item.crops
      if (item.crops.length > 0) {
        this.cropsType = item.crops[0].type || ''
        this.cropsTypeName = item.crops[0].name || ''
      }
      this.echartsTitle = item.name

      // 地块服务切换
      this.changeLayerDK()
    },
    //农作物种类切换
    changeCrops (item) {
      this.cropsType = item.type
      this.cropsTypeName = item.name

      // 地块服务切换
      this.changeLayerDK()
    },
    changeToggle () {
      this.toggleFlag = !this.toggleFlag
    },
    changeMapTyeFlag () {
      this.mapTypeFlag = !this.mapTypeFlag
    },
    changeMapTye (type) {
      this.mapType = type
      this.$refs.screenTown.changeType(type)
    },
    //重置数据
    resetData () {
      this.optionsType = ''
      this.cropsType = 'ym'
      this.cropsTypeName = '玉米'
    },
    handleFun (type) {
      let that = this
      switch (type) {
        case 'full':
          that.$refs.screenTown.FullScreenFun()
          break
        case 'center':
          that.$refs.screenTown.setCenter(31.84, 113.223)
          break
        case 'magnify':
          that.$refs.screenTown.zoomIn()
          break
        case 'lessen':
          that.$refs.screenTown.zoomOut()
          break
        case 'distance':
          that.$refs.screenTown.jl()
          break
        case 'area':
          that.$refs.screenTown.mj()
          break
        case 'curlUp':
          that.$refs.screenTown.fw()
          break
        case 'clear':
          that.$refs.screenTown.ql()
          break
        default:
          break
      }
    },
    getRootName (val) {
      this.title = val
      document.title = '高标准农田遥感监测平台'
    },
    // 监听全屏按键全屏
    keydown (event) {
      if (event.code === 'F11') {
        // this.fullscreen=true
      }
    },
    openFullScreen (el) {
      // 此处可根据获取节点进行区域全屏事件
      let element = document.getElementById('dpModel')
      if (this.fullscreen) {
        if (document.exitFullscreen && document.fullscreenElement) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen()
        }
      }
      this.fullscreen = !this.fullscreen
    },
    goToHome () {
      this.$router.push({
        path: '/home',
      })
    },
    openTip () {
      this.tipShow = true
    },
    minItemClick (item) {
      this.$router.push({
        path: item.path,
      })
    },
    closeTip () {
      this.tipShow = false
    },
    changeTabItem (tabIndex) {
      this.tabActiveIndex = tabIndex
    },
    getTimeCurrDate () {
      let date = new Date()
      let currtime = date.getTime()
      this.addTimeCurr(currtime)
      this.getWeekDate(date)
    },
    getWeekDate (now) {
      var day = now.getDay()
      var weeks = new Array(
        '周日',
        '周一',
        '周二',
        '周三',
        '周四',
        '周五',
        '周六'
      )
      this.nowStrWeeks = weeks[day]
    },
    getTianQi () {
      let day = new Date().getDate()
      day += '-weather'
      let weather = Vue.ls.get(day)
      // return false
      // if (weather) {
      //   this.nowTianQi = weather
      // } else {
      // https://dev.qweather.com/docs/api/weather/weather-daily-forecast/  api文档
      getAction('https://devapi.qweather.com/v7/weather/3d', {
        location: '101201301',
        key: '0a4535e4dffe4a6190e6432dde78899d',
      }).then((res) => {
        Vue.ls.set(day, res.now, 3 * 3600 * 1000)
        this.tianQiDe = `${res.daily[0].textDay}  ${res.daily[0].fxDate} ${this.nowStrWeeks} ${res.daily[0].tempMax}℃~${res.daily[0].tempMin}℃`
      })
      // }
    },
    addTimeCurr (currtime) {
      // 定时器延时一秒（在上面先格式化日期，显示后再开启定时器）
      this.interVal = setInterval(() => {
        currtime += 1000
        let updateDate = new Date(currtime)
        this.nowStr = updateDate.format('yyyy-MM-dd hh:mm:ss')
        this.nowTimeStr = updateDate.format('hh:mm:ss')
      }, 1000)
    },
    loginOut () {
      window.location.href = 'http://localhost:8080/dashboard/analysis'
    },
    //获取天气信息
    getWeather () { },
    /**
     * 地块服务切换
     */
    changeLayerDK () {
      this.$refs.screenTown.changeLayerDK(
        this.CategoryType,
        this.optionsType,
        this.cropsType
      )
    },
  },
}
</script>

<style lang="less" scoped>
@import "../../views/bigScreen/font.less";
@import "../../styles/fonts/fontNum.less";

.typeLegend {
  min-height: 80px;
  width: 180px;
  position: absolute;
  bottom: 2.5vw;
  left: -190px;
  background: rgba(3, 32, 31, 0.5);
  .pre,
  .after {
    display: block;
    width: 180px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .after {
    bottom: 0;
    top: auto;
  }
  .legends {
    padding: 30px 40px;
    .title {
      color: #cdcdce;
      font-size: 18px;
      line-height: 20px;
      margin-bottom: 10px;
      text-align: left;
    }
    .listType {
      .list {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .leg {
          display: inline-block;
          width: 15px;
          height: 12px;
          margin-right: 8px;
        }
        .name {
          color: #cdcdce;
          font-size: 14px;
          line-height: 14px;
        }
      }
    }
  }
}

.layerDiv {
  position: absolute;
  top: 0px;
  right: 45px;
  z-index: 9999;
  width: 130px;
  // height: 160px;
  background: rgba(42, 102, 110, 0.8);
  padding: 20px;
  border-radius: 4px;
  .el-checkbox-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: #fff;
  }
  .el-checkbox {
    display: flex;
    margin-bottom: 10px;
    color: #fff;
  }
}
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.map {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: -1;
  background: linear-gradient(
    -90deg,
    rgba(20, 34, 41, 0.9) 20%,
    rgba(5, 60, 71, 0) 100%
  );
}

.head {
  width: 100vw;
  height: 9vh;
  background: linear-gradient(
    90deg,
    rgba(20, 34, 41, 0.8) 0%,
    rgba(5, 60, 71, 0.6) 50%,
    rgba(20, 34, 41, 1) 100%
  );
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
  .title {
    background-image: url("@/assets/screenSccnTwo/head-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 9vh;
    line-height: 8vh;
    font-weight: 400;
    font-size: 3vh;
    color: #ffffff;
    text-align: left;
    font-style: normal;
    text-transform: none;
    padding-left: 4vh;
    font-weight: 600;
  }
  .weather {
    position: absolute;
    right: 2.5vh;
    top: 0;
    display: flex;
    align-items: center;
    color: #ffffff;
    height: 8vh;

    .weatherLeft {
      text-align: right;
      font-size: 1.2vh;
      line-height: 1.5vh;
      padding-right: 20px;
      margin-right: 20px;
      border-right: 4px solid #af8445;
    }
    .weatherRight {
      font-size: 2.2vh;
      line-height: 3.6vh;
    }
  }
  .sysBar {
    position: absolute;
    top: 10vh;
    left: 18vh;
    display: flex;
    .sys {
      width: 175px;
      height: 58px;
      text-align: center;
      line-height: 58px;
      font-size: 18px;
      background-image: url("@/assets/screenSccnTwo/menu.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      color: #ffffff;
      cursor: pointer;
    }
    .sys-active {
      background-image: url("@/assets/screenSccnTwo/menu-active.png");
    }
    .sys:first-child {
      margin-right: 20px;
    }
  }
}
#leftBg {
  display: block;
  position: fixed;
  left: 0;
  bottom: 0;
  height: 92vh;
  width: 3vh;
  background: rgba(20, 34, 41, 0.8);
}
#rightBg {
  display: block;
  position: fixed;
  right: 0;
  bottom: 0;
  height: 93vh;
  width: 3vh;
  background: rgba(20, 34, 41, 0.9);
  z-index: 2;
}
#downBg {
  display: block;
  position: fixed;
  left: 3vh;
  // right: 3vh;
  bottom: 0;
  height: 2vh;
  width: calc(100% - 3vh);
  background: linear-gradient(
    90deg,
    rgba(20, 34, 41, 0.8) 0%,
    rgba(5, 60, 71, 0.6) 50%,
    rgba(20, 34, 41, 1) 100%
  );
}
.leftSlider {
  width: 12vh;
  height: 86vh;
  // padding-top: 120px;
  position: fixed;
  left: 4vh;
  top: 10vh;
  // background-image: url("@/assets/screenSccnTwo/leftSlider-left.png");
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  background: rgba(13, 42, 51, 0.72);
  border-radius: 0px 0px 0px 0px;
  border: 1px solid rgba(104, 254, 255, 0.81);
  .listItem {
    padding: 1vh 0;
    cursor: pointer;
    position: relative;
    .listItemIcon {
      display: block;
      margin: 1vh auto;
      width: 6vh;
      height: 6vh;
      border-radius: 14px;
    }
    .listItemName {
      text-align: center;
      color: #ffffff;
      font-size: 1.4vh;
      line-height: 2vh;
    }
    .listItemInfo {
      position: absolute;
      right: -300px;
      top: -10px;
      background: rgba(7, 56, 61, 0.6);
      border-radius: 0.05208rem;
      width: 300px;
      height: auto;
      padding: 0.6vw;
      z-index: 10;
      .desc {
        line-height: 32px;
        color: #ffffff;
        font-size: 16px;
        text-align: left;
      }
    }
  }
  .listItem-active {
    background-color: #15394b;

    .listItemIcon {
      box-shadow: 0px -0px 0px RGBA(12, 103, 151, 1),
        10px 0px 16px RGBA(12, 103, 151, 1), 0px 10px 16px RGBA(12, 103, 151, 1),
        -10px 0px 16px RGBA(12, 103, 151, 1);
    }
  }
  .cropsList {
    position: absolute;
    top: 10vh;
    left: 15vh;
    .cropsItem {
      display: flex;
      width: 110px;
      height: 40px;
      justify-content: center;
      align-items: center;
      background: rgba(13, 42, 51, 0.7216);
      border: 1px solid rgba(104, 254, 255, 0.8118);
      border-radius: 20px;
      margin-bottom: 10px;
      cursor: pointer;
      .cropsIcon {
        display: block;
        width: 18px;
        height: 18px;
        margin-right: 5px;
      }
      .cropsName {
        color: #ffffff;
        font-size: 15px;
      }
    }
    .cropsItem-active {
      background: rgba(104, 254, 255, 0.4);
    }
  }
}
.rightSlider {
  transform: translateX(-2.99vh);
  transition: all 0.7s ease-in;
  height: 91vh;
  width: 25vw;
  position: fixed;
  right: -24vw;
  top: 9vh;
  padding-top: 1vh;
  padding-right: 1vw;
  background: linear-gradient(
    -90deg,
    rgba(20, 34, 41, 0.9) 20%,
    rgba(5, 60, 71, 0) 100%
  );
}
.rightSliderTop {
  background: rgba(7, 56, 61, 0.6);
  position: fixed;
  right: 1.2vw;
  top: 4vw;
  height: 9vh;
  width: 18vw;
  border-radius: 6px;
  box-sizing: border-box;
  padding: 1.2vw 1.2vw 0.2vw;
  .weatherBox {
    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      span {
        color: #ffffff;
        font-size: 16px;
      }
    }
    .timeAndTem {
      display: flex;
      justify-content: space-between;
      color: #ffffff;
      .time {
        font-size: 32px;
        font-weight: 600;
      }
      p {
        display: flex;
        align-items: flex-end;
        img {
          display: block;
          width: 50px;
          height: 50px;
        }
        .tem {
          font-size: 36px;
        }
      }
    }
  }
}

.rightSliderBottom {
  height: 86vh;
  width: 24vw;
  background: rgba(13, 42, 51, 0.72);
  border-radius: 0px 0px 0px 0px;
  border: 1px solid rgba(104, 254, 255, 0.81);
  .chartBox {
    height: 100%;
    .rightEchart {
      height: 100%;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding-top: 0.6vw;

      .echartItem {
        flex: 1;
        display: flex;
        flex-direction: column;
        .itemHead {
          margin: 0 1.2vw;
          height: 2vw;
          background-image: url("@/assets/screenSccnTwo/zw.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #ffffff;
          padding: 0 2.6vw 0 1.1vw;
          .itemName {
            font-size: 1vw;
            font-weight: 600;
          }
          .itemUnit {
            font-size: 16px;
            color: #99a4b7;
          }
        }
        .itemContent {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          .descript {
            display: flex;
            align-items: center;
            // justify-content: center;
            text-align: left;
            font-size: 0.8vw;
            line-height: 2vw;
            height: 100%;
            width: 100%;
            color: #fff;
            box-sizing: border-box;
            padding: 20px;
          }
        }
      }
      .echartItem-2 {
        flex: 2;
      }
    }
    .toggleBtn {
      position: absolute;
      right: 24.5vw;
      top: 1.2vw;
      height: 10vw;
      width: 2vw;
      cursor: pointer;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .mapToolAndLegend {
      position: absolute;
      right: 26.5vw;
      top: 0.2vw;
      // height: 8vw;
      width: 2vw;
      cursor: pointer;

      .tools {
        background: rgba(3, 32, 31, 0.5);
        padding: 0.01vw 0;
        .toolItem {
          width: 2vw;
          height: 2vw;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0.2vw 0;
          img {
            display: block;
            height: auto;
            width: 1.4vw;
          }
        }
      }
      .mapType {
        border-radius: 4px;
        margin-top: 0.6vw;
        position: relative;
        img {
          display: block;
          width: 2vw;
          height: 2vw;
        }
        ul {
          position: absolute;
          top: 0;
          left: -6.4vw;
          background-color: rgba(42, 102, 110, 0.8);
          width: 6vw;
          font-size: 16px;
          line-height: 28px;
          li {
            color: #ffffff;
            list-style: none;
            margin: 10px 0;
          }
          .map-active {
            color: #5ce0dd;
          }
        }
      }
    }
  }
}
.rightactive {
  transition: all 0.7s ease-in;
  right: 0vw;
  transform: translateX(-3vh);
}
</style>
<style>
.layerDiv .el-checkbox__label {
  margin-left: 20px;
  color: #fff;
}
</style>
