
<template >
  <div class="big">
    <div class="chart-containerr">
      <div class="head">
        <div class="headleft">
          <div class="homeIcon">
            <img src="../../assets/images/wsy.png" />
            <span style="padding-left:10px;">首页</span>
          </div>
          <div id="datebox" class="datebox">
            {{datastr}}
            <!-- <span style="margin-left:10px;">北京市</span> -->
            <span
              id="city"
              style="margin-left:10px;"
              @mouseleave="cancelwe"
              @mouseenter="getweather"
            ></span>
            <span
              id="weather"
              style="margin-left:10px;"
              @mouseleave="cancelwe"
              @mouseenter="getweather"
            ></span>
            <span
              id="temper"
              style="margin-left:10px;"
              @mouseleave="cancelwe"
              @mouseenter="getweather"
            ></span>℃
          </div>
          <div class="fifweather" id="dialog"></div>
        </div>
        <div class="headtitle">
          <img src="../../assets/images/titlelogo.png" />
          <span class="titlezi">标准化管理云平台</span>
        </div>
        <div class="rightbox">
          <div class="nave">
            <Navebarright></Navebarright>
          </div>
          <div class="gonggao">
            <p
              v-for="item in messageNoticeData"
              :key="item.title"
              style="height:54px;line-height:54px;margin:0;cursor:pointer;"
              class="marquee-list"
              :class="{ 'animate-up': animateUp }"
              @click="noticeDetailFn(item)"
            >
              <span v-if="!item.readStatus" class="unread">●</span>
              <span v-if="item.readStatus" class="unread">●</span>
              <span v-if="item.title.length>27">{{ item.title.slice(0,27) }}...</span>
              <span v-if="item.title.length<28">{{ item.title }}</span>
              <span style="float:right">{{item.time}}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="leftboxs">
          <div id="myCharttwo" class="one"></div>
          <div id="myChartone" class="two"></div>
          <div id="myChartthi" class="thi"></div>
        </div>
        <div class="rightbox">
          <div class="rtop">
            <div class="rtopl">
              <div class="myChartdcru">
                <span class="el-icon-location" style="float: left;color: rgb(0,195,210);"></span>
                <el-breadcrumb separator="/">
                  <el-breadcrumb-item
                    v-for="(item,index) in crumbs"
                    :key="index"
                    @click.native="backProvince(item.name)"
                  >{{item.name}}</el-breadcrumb-item>
                </el-breadcrumb>
              </div>
              <div id="myChartdt" class="myChartdtb" v-on:mousemove="dataDetails($event)"></div>
              <div class="threebox">
                  <div style="height: 40%;"></div>
                  <div class="minibox">
                      <p style="margin:3px 0">仓房数量</p>
                      <span class="minispan minispanone">200</span>
                  </div>
                  <div class="minibox">
                    <p style="margin:3px 0">粮库数量</p>
                      <span class="minispan minispantwo">200</span>
                  </div>
                  <div class="minibox">
                    <p style="margin:3px 0">人员数量</p>
                      <span class="minispan minispanthi">200</span>
                  </div>
            </div>
            </div>
            <div class="rtopr">
              <div id="myChartrt" class="rtoprt"></div>
              <div id="myChartrb" class="rtoprb"></div>
            </div>
          </div>
          <div id="myChartfor" class="rbot"></div>
        </div>
      </div>
      <div class="foot">版权所有 : 山西省粮食和物资储备局</div>
    </div>
  </div>
</template>
<script>
import { noticeList, noticeDetail } from "@/api/home"
import axios from "axios"
import "../../../node_modules/echarts/map/js/province/shanxi.js"
import cityMap from "./js/china-main-city-map"
import Navebarright from "@/components/Navebarright"
import { findbyTreeDatac, getleftdata } from "@/api/branchoff/index.js"
export default {
  components: {
    Navebarright
  },
  name: "Home",
  data() {
    return {
      dialogVisible: false,
      shanxiarr: [], // 省地图json
      provinceJson: null,
      administrativeDivision: "",
      crumbs: [],
      floatLeft: 0,
      floatTop: 170,
      mapAll: {
        万荣县粮食储备库: [110.4927, 35.2533],
        代县粮油贸易总公司阳明堡库: [112.5257, 39.158]
      },
      mapList: [
        {
          orgname: "万荣县粮食储备库",
          name: "万荣县粮食储备库",
          lon: "110.492700",
          orgid: "173",
          lat: "35.253300",
          status: ""
        },
        {
          orgname: "代县粮油贸易总公司阳明堡库",
          name: "代县粮油贸易总公司阳明堡库",
          lon: "112.525700",
          orgid: "48",
          lat: "39.1580000",
          status: ""
        }
      ],
      datastr: "",
      messageNoticeData: [],
      animateUp: false,
      timer: null,
      objone: {
        depotId: "",
        grainVarieties: "g"
      },
      objtwo: {
        depotId: "",
        warehouseStatus: "w"
      },
      objthi: {
        depotId: "",
        storageStatus: "s"
      },
      storageobj: {
        name: "",
        value: ""
      },
      objhouse: {
        name: "",
        value: ""
      },
      objhousename: [],
      storagename: [],
      grainname: [],
      grainvalue: []
    }
  },
  created() {
    this.objone.depotId = JSON.parse(localStorage.getItem("userInfo")).depotId
    this.objtwo.depotId = JSON.parse(localStorage.getItem("userInfo")).depotId
    this.objthi.depotId = JSON.parse(localStorage.getItem("userInfo")).depotId
    this.administrativeDivision = 140000
    Object.keys(cityMap).forEach((key, index) => {
      if (cityMap[key] == this.administrativeDivision) {
        this.provinceName = key
        this.crumbs = [{ name: this.provinceName }]
      }
    })
    this.getdate()
  },
  mounted() {
    this.timer = setInterval(this.scrollAnimate, 2000)
    this.drawone()
    this.drawtwo()
    this.drawthi()
    this.drawfor()
    this.drawtdt()
    this.drawtrt()
    this.drawtrb()
    this.showCityInfo()
    this.getNoticeList()
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    getNoticeList() {
      let data = {
        pageIndex: "1",
        pageSize: "5"
      }
      noticeList(data).then(res => {
        this.messageNoticeData = res.data.records
        this.messageNoticeNum = 0
        res.data.records.forEach(item => {
          if (!item.readStatus) {
            this.messageNoticeNum = this.messageNoticeNum + 1
          }
        })
      })
    },
    noticeDetailFn(data) {
      this.$router.push({
        path: "/notice/noticeDetail",
        query: { id: data.id }
      })
    },
    cancelwe() {
      document.getElementById("dialog").style.display = "none"
    },
    getweather() {
      document.getElementById("dialog").style.display = "block"
    },
    showCityInfo() {
      var citysearch = new AMap.CitySearch()
      citysearch.getLocalCity(function(status, result) {
        if (status === "complete" && result.info === "OK") {
          if (result && result.city && result.bounds) {
            var city = result.city
            document.getElementById("city").innerHTML = result.city
            AMap.plugin("AMap.Weather", function() {
              var weather = new AMap.Weather()
              weather.getLive(city, function(err, data) {
                if (!err) {
                  document.getElementById("temper").innerHTML = data.temperature
                }
              })

              weather.getForecast(city, function(err, data) {
                if (err) {
                  return
                }
                document.getElementById("weather").innerHTML =
                  data.forecasts[0].dayWeather
                var str = [
                  '<div style="font-size:12px;height:30px;line-height: 30px;text-align: center;color:#037D41;font-weight:700;"> > &nbsp;近4日天气预报 &nbsp; < </div><div  style="font-size:12px;padding:0 10px;"><span style="background-color:#F9F9F9;font-weight:700;width:95px;line-height:30px;height: 30px;display:inline-block; text-align: center;border:1px solid #D9D9D9;">日期</span><span style="background-color:#F9F9F9;font-weight:700;width:95px;line-height:30px; height: 30px;display:inline-block; text-align: center;border:1px solid #D9D9D9;">天气</span><span style="background-color:#F9F9F9;font-weight:700;width:95px;line-height: 30px; height: 30px;display:inline-block; text-align: center;border:1px solid #D9D9D9;">温度</span></div>'
                ]
                for (var i = 0, dayWeather; i < data.forecasts.length; i++) {
                  dayWeather = data.forecasts[i]
                  str.push(
                    '<div  style="font-size:12px;padding:0 10px;"><span style="width:95px;line-height:30px;height: 30px;display:inline-block; text-align: center;border:1px solid #D9D9D9;">' +
                      dayWeather.date +
                      '</span><span style="width:95px;line-height:30px; height: 30px;display:inline-block; text-align: center;border:1px solid #D9D9D9;">' +
                      dayWeather.dayWeather +
                      '</span><span style="width:95px;line-height: 30px; height: 30px;display:inline-block; text-align: center;border:1px solid #D9D9D9;">' +
                      dayWeather.nightTemp +
                      "~" +
                      dayWeather.dayTemp +
                      "℃ </span></div>"
                  )
                }
                document.getElementById("dialog").innerHTML = str.join("")
              })
            })
          }
        }
      })
    },
    scrollAnimate() {
      this.animateUp = true
      setTimeout(() => {
        this.messageNoticeData.push(this.messageNoticeData[0])
        this.messageNoticeData.shift()
        this.animateUp = false
      }, 500)
    },
    getdate() {
      var myDate = new Date()
      var year = myDate.getFullYear() //获取完整的年份(4位,1970-????)
      var mon = myDate.getMonth() + 1 //获取当前月份(0-11,0代表1月)
      var date = myDate.getDate() //获取当前日(1-31)
      var week = myDate.getDay() //获取当前星期X(0-6,0代表星期天)
      let d1 = new Date()
      let d2 = new Date()
      d2.setMonth(0)
      d2.setDate(1)
      let rq = d1 - d2
      let s1 = Math.ceil(rq / (24 * 60 * 60 * 1000))
      let s2 = Math.ceil(s1 / 7)
      this.datastr =
        year +
        "年" +
        mon +
        "月" +
        date +
        "日" +
        "\xa0\xa0\xa0" +
        "第" +
        s2 +
        "周"
    },
    drawone() {
      var color = ["#88C06A", "#F3DF36", "#0a7e41"]
      getleftdata(this.objthi).then(res => {
        res.forEach(item => {
          this.storageobj.name = item.storageStatus
          this.storageobj.value = item.count
          const obj = JSON.stringify(this.storageobj)
          const objClone = JSON.parse(obj)
          this.storagename.push(objClone)
        })
        const myCharttwo = this.$echarts.init(
          document.getElementById("myCharttwo")
        )
        // 绘制图表
        myCharttwo.setOption({
          title: [
            {
              text: "储存状态",
              show: true,
              textStyle: {
                color: "#000",
                fontSize: 12
              }
            }
          ],
          tooltip: {
            show: true, // 是否显示提示框
            formatter: "{b} </br> 数量{c} </br> 占比{d}%" // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。
          },
          // 系列列表
          series: [
            {
              name: "圆环图系列名称", // 系列名称
              type: "pie", // 系列类型
              center: ["50%", "50%"], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
              radius: ["20%", "35%"], // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
              hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
              color: color, // 圆环图的颜色
              label: {
                normal: {
                  show: true, // 是否显示标签[ default: false ]
                  position: "outside", // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
                  // formatter: "{b} : {c}个" // 标签内容      '{b|{b}：}{c}  ({d}%) '
                  formatter:  '{b}： {d}% ' // 标签内容      '{b|{b}：}{c}  ({d}%) '
                }
              },
              labelLine: {
                normal: {
                  show: true, // 是否显示视觉引导线。
                  length: 15, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
                  length2: 10, // 视觉引导项第二段的长度。
                  lineStyle: {
                    // 视觉引导线的样式
                    color: "#000",
                    width: 1
                  }
                }
              },
              data: this.storagename // 系列中的数据内容数组。
            }
          ]
        })
      })
    },
    drawtwo() {
      const myChartone = this.$echarts.init(
        document.getElementById("myChartone")
      )
      getleftdata(this.objone).then(res => {
        res.forEach(item => {
          this.grainname.push(item.grainVarieties)
          this.grainvalue.push(item.count)
          console.log(item, "98765432")
        })

        myChartone.setOption({
          title: {
            text: "粮食种类",
            show: true,
            textStyle: {
              color: "#333333",
              fontSize: 12
            }
          },

          color: "#8CCF23",
          xAxis: {
            type: "category",
            data: this.grainname,
            name: "",
            axisLabel: {
              interval: 0
              // rotate: 45 //代表x轴逆时针度数
            }
          },
          grid: {
            bottom: "7%",
            right: "15%",
            containLabel: true
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          yAxis: {
            type: "value",
            name: ""
          },
          series: [
            {
              data: this.grainvalue,
              type: "bar",
              itemStyle: {
                normal: {
                  label: {
                    show: true, // 开启显示
                    position: "top", // 在上方显示
                    textStyle: {
                      // 数值样式
                      color: "black",
                      fontSize: 12
                    }
                  }
                }
              }
            }
          ]
        })
      })

      // 绘制图表
    },
    drawthi() {
      var color = ["#F3DF36", "#FFA200", "#20A1E7", "#88C06A", "#0a7e41"]
      getleftdata(this.objtwo).then(res => {
        console.log(res, "wsrfacwdaacsa")
        res.forEach(item => {
          this.objhouse.name = item.warehouseStatus
          this.objhouse.value = item.count
          const obj = JSON.stringify(this.objhouse)
          const objClone = JSON.parse(obj)
          this.objhousename.push(objClone)
        })
        const myChartthi = this.$echarts.init(
          document.getElementById("myChartthi")
        )
        // 绘制图表
        myChartthi.setOption({
          title: [
            {
              text: "储存状态",
              show: true,
              textStyle: {
                color: "#000",
                fontSize: 12
              }
            }
          ],
          tooltip: {
            show: true, // 是否显示提示框
            formatter: "{b} </br> 数量{c} </br> 占比{d}%" // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。
          },
          
          // 系列列表
          series: [
            {
              name: "圆环图系列名称", // 系列名称
              type: "pie", // 系列类型
              center: ["45%", "50%"], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
              radius: ["20%", "35%"], // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
              hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
              color: color, // 圆环图的颜色
              label: {
                normal: {
                  show: true, // 是否显示标签[ default: false ]
                  position: "outside", // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
                  formatter: '{b}： {d}% ' // 标签内容
                }
              },
              labelLine: {
                normal: {
                  show: true, // 是否显示视觉引导线。
                  length: 15, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
                  length2: 10, // 视觉引导项第二段的长度。
                  lineStyle: {
                    // 视觉引导线的样式
                    color: "#000",
                    width: 1
                  }
                }
              },
              data: this.objhousename // 系列中的数据内容数组。
            }
          ]
        })
      })
    },

    drawfor() {
      const myChartfor = this.$echarts.init(
        document.getElementById("myChartfor")
      )
      // 绘制图表
      myChartfor.setOption({
        title: {
          text: "粮情检测(虫害)",
          show: true,
          textStyle: {
            color: "#000",
            fontSize: 12
          }
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "01fffd",
              width: "2"
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#333"
            },
            rotate: -0
          },
          data: [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12"
          ]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "26%",
          containLabel: true
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#f2f2f2",
              width: "2"
            }
          },
          splitLine: {
            show: true, // X轴线 颜色类型的修改
            lineStyle: {
              type: "solid",
              color: "#f2f2f2"
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#333"
            },
            rotate: -0
          },
          type: "value"
        },
        series: [
          {
            itemStyle: {
              normal: {
                color: "#A7CDEC", // 改变折线点的颜色
                lineStyle: {
                  color: "#A7CDEC" // 改变折线颜色
                }
              }
            },
            data: [0, 0.3, 0, 0.6, 0, 0.7, 0, 0, 0.9, 0, 1, 0],
            type: "line"
          }
        ]
      })
    },
    drawtdt() {
      axios
        .get("/mock/" + this.administrativeDivision + ".json", {})
        .then(response => {
          let mapJson = response.data
          this.provinceJson = mapJson
          let myChartdt = this.$echarts.init(
            document.getElementById("myChartdt")
          )
          this.mapSet(this.provinceName, mapJson, this.mapAll, myChartdt)
          myChartdt.on("click", params => {
            var cityId = cityMap[params.name]
            if (cityId) {
              if (this.crumbs.length > 1) {
                this.crumbs = [{ name: "山西省" }]
                this.crumbs.push({ name: params.name })
              } else {
                this.crumbs.push({ name: params.name })
              }
              axios.get("/mock/" + cityId + ".json", {}).then(response => {
                const mapJson = response.data
                this.mapSet(params.name, mapJson, this.mapAll, myChartdt)
              })
            }
          })
        })
    },

    mapSet(mapName, mapJson, lmapAll, myChartdt) {
      let geoCoordMap = lmapAll
      console.log(geoCoordMap, "geoCoordMapgeoCoordMap")
      let convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          console.log(data[i].name, "data[i]data[i]data[i]")
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push(
              geoCoord.concat([data[i].orgname, data[i].status, data[i].orgid])
            )
          }
        }
        return res
      }
      this.$echarts.registerMap(mapName, mapJson)
      let mapOption = {
        title: {
          text: "",
          show: true,
          subtext: "",
          x: "left",
          textStyle: {
            color: "#333333",
            fontSize: 14
          }
        },

        geo: {
          label: {
            normal: {
              //静态的时候展示样式
              show: true, //是否显示地图省份得名称
              textStyle: {
                color: "#fff",
                fontSize: 10,
                fontFamily: "Arial"
              }
            }
          },
          map: mapName, //地图范围
          itemStyle: {
            color: "#0B8751",
            borderWidth: 1,
            borderColor: "#82BD61"
          }
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            symbolSize: 10,
            opacity: 1,
            itemStyle: {
              borderWidth: 10,
              borderColor: "#FFEA31"
            },
            data: convertData(this.mapList)
          }
        ]
      }
      myChartdt.setOption(mapOption, true)
    },

    drawtrt() {
      var chartData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100] // 数据
      var yMax = "" // 最大值
      for (var i = 0; i < chartData.length; i++) {
        yMax = chartData[i]
      }
      yMax += yMax / 10
      var yMaxArr = [] // 全部都是最大值, 做图形的底部灰色打底
      for (var o = 0; o < chartData.length; o++) {
        yMaxArr.push(yMax)
      }
      var chartName = [
        "中央储备大同直属库有限公司",
        "中央储备太原直属库有限公司",
        "中央储备太原直属库有限公司",
        "中央储备太原直属库有限公司",
        "中央储备太原直属库有限公司",
        "中央储备太原直属库有限公司",
        "中央储备太原直属库有限公司",
        "中央储备太原直属库有限公司",
        "中央储备太原直属库有限公司",
        "中央储备长治直属库有限公司"
      ]
      const myChartrt = this.$echarts.init(document.getElementById("myChartrt"))
      // 绘制图表
      myChartrt.setOption({
        title: {
          text: "上月在线活跃度排名",
          show: true,
          textStyle: {
            color: "#333333",
            fontSize: 12
          }
        },

        grid: {
          top: "center",
          height: 120,
          left: 120,
          right: 30
        },

        xAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#ccc"
            }
          },
          show: false,
          splitLine: {
            show: false
          }
        },
        yAxis: [
          {
            type: "category",
            data: chartName,
            splitLine: {
              show: false
            },
            show: false,
            axisLine: {
              lineStyle: {
                color: "#ccc"
              }
            }
          },
          {
            // 第二个y轴 为了让数据在右侧末尾显示
            show: true,
            inverse: true,
            data: chartData,
            nameTextStyle: {}, // 坐标轴名称的文字样式。 官网上是这样的解释, 但是 我试了这个并不能改变坐标轴的文字样式
            axisLabel: {
              textStyle: {
                fontSize: 8, // 坐标轴名称的大小
                color: "#333", // 坐标轴名称的颜色
                fontWeight: 700
              }
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "我是打底",
            type: "pictorialBar",
            symbol: "rect", // 类型
            yAxisIndex: 0,
            barWidth: 10,
            itemStyle: {
              normal: {
                // barBorderRadius: 5,
                color: "#ccc"
              }
            },
            label: {
              normal: {
                position: "right"
              }
            },
            symbolRepeat: true,
            // symbolRotate: '45',
            symbolSize: [8, 8],
            // symbolMargin: 2,
            data: yMaxArr
          },
          {
            name: "我是上层方块",
            type: "pictorialBar",
            symbol: "rect",
            itemStyle: {
              normal: {
                color: "green"
              }
            },
            label: {
              normal: {
                // show: true, // 数据大小的显示, 100 200 300
                textStyle: {
                  color: "#000000" // 颜色
                },
                position: "right"
              }
            },
            barWidth: 10,
            symbolRepeat: true,
            // symbolRotate: '45',
            symbolSize: [8, 8],
            // symbolMargin: 2,
            data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
          },
          // 数据条--------------------我是分割线君------------------------------//
          {
            show: true,
            type: "bar",
            // xAxisIndex: 1, //代表使用第二个X轴刻度
            barGap: "-100%",
            barWidth: "25%",
            itemStyle: {
              normal: {
                barBorderRadius: 50,
                // color: 'yellow',
                color: "transparent" // rgba(22,203,115,0.05) 数据条柱状图的填充颜色,, 一开始我的有一点点背景颜色
              }
            },
            label: {
              normal: {
                show: true,
                position: [-110, 0],
                textStyle: {
                  fontSize: 8,
                  color: "#333",
                  fontWeight: 700
                },
                formatter: function(data) {
                  return chartName[data.dataIndex]
                }
              }
            },
            data: chartData
          }
        ]
      })
    },
    drawtrb() {
      const myChartrb = this.$echarts.init(document.getElementById("myChartrb"))
      // 绘制图表
      myChartrb.setOption({
        title: {
          text: "上月工作积分情况",
          show: true,
          textStyle: {
            color: "#333333",
            fontSize: 12
          }
        },

        color: "#0033FF",
        xAxis: {
          type: "value",
          data: [1, 1, 1],
          name: "",
          axisLabel: {
            interval: 0
            // rotate: 45 //代表x轴逆时针度数
          }
        },
        grid: {
          bottom: "7%",
          right: "15%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        yAxis: {
          type: "category",
          name: ""
        },
        series: [
          {
            data: [1, 1, 1],
            type: "bar",
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: "right", // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: "black",
                    fontSize: 12
                  }
                }
              }
            }
          }
        ]
      })
    },
    dataDetails(e) {
      this.floatLeft = e.offsetX + 38 + "px" // 减去外层div的left距离
      this.floatTop = e.offsetY + 140 + "px"
    },
    backProvince(name) {
      if (name == "山西省") {
        if (this.crumbs.length != 1) {
          this.crumbs.pop()
          this.drawtdt()
        }
      }
    }
  }
}
</script>
<style scoped lang="scss">
.big {
  width: 100%;
  height: 960px;
  overflow: hidden;
}
.chart-containerr {
  width: calc(100vw + 15px);
  height: calc(100vh);
  overflow-y: scroll;
  .head {
    width: 100%;
    height: 110px;
    background-color: #0a7e41;
    border-bottom: 5px solid #8ccf23;
    .headtitle {
      width: 30%;
      height: 110px;
      line-height: 110px;
      float: left;
      text-align: center;
      img {
        width: 33px;
        height: 37px;
        vertical-align: middle;
        margin: 0 10px 12px 0;
        // line-height: 110px;
      }
      .titlezi {
        width: 130px;
        height: 110px;
        line-height: 110px;
        color: #fff;
        font-size: 28px;
      }
    }

    .headleft {
      width: 33%;
      height: 110px;
      float: left;
      .homeIcon {
        height: 54px;
        line-height: 54px;
        padding-left: 30px;
        font-size: 14px;
        color: #fff;
        img {
          width: 20px;
          vertical-align: middle;
        }
      }
      .datebox {
        border-top: 2px solid #fff;
        height: 54px;
        line-height: 54px;
        padding-left: 30px;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .rightbox {
      width: 33%;
      height: 110px;
      float: right;
      .nave {
        height: 54px;
        line-height: 54px;
        padding-right: 30px;
        font-size: 14px;
        color: #fff;
      }
      .gonggao {
        padding-left: 60px;
        line-height: 54px;
        height: 54px;
        padding-right: 30px;
        font-size: 14px;
        overflow: hidden;
        color: #fff;
        border-top: 2px solid #fff;
        .marquee-list {
          p {
            width: 100%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            list-style: none;
            text-align: center;
          }
        }
        .animate-up {
          transition: all 0.5s ease-in-out;
          transform: translateY(-54px);
        }
      }
    }
  }
  .main {
    width: 100%;
    height: 850px;
    padding: 10px 30px 0 30px;
    background-color: #f3f3f3;
  }
  .foot {
    width: 100%;
    height: 30px;
    color: #666;
    line-height: 30px;
    text-align: center;
    box-shadow: 0 -2px 3px -1px #70b18a;
  }
  .leftboxs {
    width: 25%;
    height: 850px;
    display: inline-block;
    .one {
      width: 98%;
      height: 32%;
      background-color: #fff;
      border-radius: 5px;
    }
    .two {
      width: 98%;
      height: 32%;
      background-color: #fff;
      margin: 5px 0 5px 0;
      border-radius: 5px;
    }
    .thi {
      width: 98%;
      height: 32%;
      background-color: #fff;
      border-radius: 5px;
    }
  }
  .rightbox {
    width: 75%;
    height: 850px;
    display: inline-block;
    .rtop {
      width: 100%;
      height: 65%;
      .rtopl {
        width: 65%;
        height: 100%;
        border-radius: 5px;
        margin: 3px 0;
        float: left;
        border-radius: 5px;
        background-color: #F8F8F8;
        .myChartdcru {
          width: 100%;
          height: 10%;
          padding: 13px 3px 5px 0;
          color: #333;
          font-weight: 700;
        }
        .myChartdtb {
          width: 85%;
          height: 90%;
          float: left;
        }
        .threebox{
             width: 80px;
          height: 90%;
           float: left;
           text-align: center;
           .minibox{
             height: 70px;
             background: #fff;
             margin: 5px ;
             font-size: 12px;
             padding: 3px;
            .minispan{
              width: 40px;
              height: 40px;
              line-height: 40px;
              display: inline-block;
              border-radius: 20px;
             
            }
            .minispanone{
              border: 2px solid #F8C259;
            }
             .minispantwo{
              border: 2px solid #448ACA;
            }
             .minispanthi{
              border: 2px solid #13B5B1;
            }
           }
        }
      }
      .rtopr {
        width: 35%;
        height: 100%;
        float: right;
        .rtoprt {
          // 右边下面的
          width: 100%;
          height: 50%;
          background-color: #fff;
          margin: 0 0 5px 2%;
          border-radius: 5px;
        }
        .rtoprb {
          // 右边上面的
          width: 100%;
          height: 50%;
          background-color: #fff;
          margin: 0 0 0 2%;
          border-radius: 5px;
        }
      }
    }
    .rbot {
      width: 101%;
      height: 31%;
      background-color: #fff;

      margin-top: 10px;
    }
  }
}
.el-dialog__wrapper {
  width: 700px;
  height: 600px;
  background-color: #fff;
  margin: 50px auto;
  border-radius: 5px;
}
.fifweather {
  position: fixed;
  top: 100px;
  left: 15%;
  width: 311px;
  height: 210px;
  background-color: #fff;
  z-index: 999;
  display: none;
  border-radius: 5px;
  color: #333;
  -moz-box-shadow: 2px 2px 10px #909090;
  -webkit-box-shadow: 2px 2px 10px #909090;
  box-shadow: 2px 2px 10px #909090;
}
.unread {
  color: #fff;
}
</style>
