<template>
  <d2-container class="page">
    <div class="home_top" style="display: flex; justify-content: space-between">
      <!-- 报警待处理 -->
      <div class="alarmTodo">
        <div class="alarmTodo_title">
          <img class="arrow" src="./image/xjt.png" />
          <span>报警待处理</span>
        </div>
        <div class="alarmTodo_table">
          <el-table
            :data="tableData"
            @row-click="jumpDetails"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              prop="cfmc"
              label="仓房名称"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="bjsj"
              label="报警时间"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="yclddsc"
              align="center"
              label="已处理等待时常"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column align="center" label="处理">
              <el-button
                class="czBut"
                type="button"
                size="small"
                icon="el-icon-edit"
                >反馈</el-button
              >
            </el-table-column>
          </el-table>
          <span class="seeMore">查看更多></span>
        </div>
        <div></div>
      </div>

      <!-- 库区图 -->
      <div class="kcImg">
        <div class="kc_left">
          <div class="ck_div">
            <!-- <div class="ckImg"> -->
            <div class="ckNumber">当天出库量（吨）</div>
            <div class="ckMiddle">
              <div class="numberBac"><span>7</span></div>
              <div class="numberBac"><span>7</span></div>
              <div class="numberBac"><span>7</span></div>
            </div>

            <div class="baifenNumber">
              较昨日增长
              <span style="color: #64d140">15%</span>
              <img src="./image/zezhang.png" alt="" />
            </div>
            <!-- </div> -->
          </div>
          <div class="rk_div">
            <div class="ckNumber">当天入库量（吨）</div>
            <div class="ckMiddle">
              <div class="numberBac"><span>7</span></div>
              <div class="numberBac"><span>7</span></div>
              <div class="numberBac"><span>7</span></div>
              <div class="numberBac"><span>7</span></div>
            </div>

            <div class="baifenNumber">
              较昨日降低
              <span style="color: #ee92a7">15%</span>
              <img src="./image/jiangdi.png" alt="" />
            </div>
          </div>
          <div class="cr_div">
            <div class="crImg"></div>
          </div>
        </div>
        <div class="kc_right">
          <div id="map">
            <img
              src="./image/kq.png"
              border="0"
              usemap="#planetmap"
              alt="Planets"
             class="rqImg"
            />
          </div>
        </div>
      </div>
      <!-- 出入库数量 -->
      <div class="crkTrend">
        <div class="crkTrend_title">
          <img class="arrow" src="./image/xjt.png" />
          <span>出入库数量趋势</span>
        </div>
        <div class="crkTrend_date">
          <el-date-picker
            class="timeOption"
            v-model="time"
            type="monthrange"
            range-separator="-"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
          >
          </el-date-picker>
        </div>
        <div
          class="myChart"
          id="myChart"
          :style="{ width: '100%', top: '25%', height: '75%' }"
        ></div>
      </div>
    </div>

    <div class="page-content-bottom">
      <span class="content-bottom-title">
        <img class="arrow" src="./image/xjt.png" />近一周粮食数量变化</span
      >
      <div style="position: absolute; right: 7.3%; top: 20px; display: flex">
        <div>
          <el-button type="primary">今日</el-button>
          <el-button type="primary">本周</el-button>
          <el-button type="primary">本月</el-button>
        </div>
        <div style="margin-left: 10px">
          <el-date-picker
            v-model="timeValue"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="bottom_div">
        <div class="imgLeft_father">
          <div class="bac_div">
            <div style="font-size: 10px; margin-left: 20px">仓房名称:</div>
            <div style="text-align: center">1号仓</div>
          </div>
          <div class="bac_div">
            <div style="font-size: 10px; margin-left: 20px">粮食种类:</div>
            <div style="text-align: center">稻谷</div>
          </div>
          <div class="bac_div">
            <div style="font-size: 10px; margin-left: 15px">
              目前粮食数量(kg):
            </div>
            <div style="text-align: center; margin-bottom: 3px">100</div>
            <div style="font-size: 10px; text-align: center">
              同比昨天<span class="zcColor"></span
              ><img src="./image/zezhang.png" />
            </div>
          </div>
        </div>
        <div
          class="myChart2"
          id="myChart2"
          :style="{ width: '80%', height: '80%', top: '10%' }"
        ></div>
      </div>
    </div>
  </d2-container>
</template>

<script>
import $ from "jquery";
import fjmap from "./fjmap";
export default {
  components: { fjmap },
  data() {
    return {
      //热区初始化
      datas: {
        //从上往下


        "maps": [
            { "index": 0, "x": 510, "y": 30 },
            { "index": 1, "x": 490, "y": 97 },
            { "index": 2, "x": 471, "y": 173 },
            { "index": 3, "x": 450, "y": 251 },
            { "index": 4, "x": 430, "y": 334 },
            { "index": 5, "x": 412, "y": 413 },
            { "index": 6, "x": 391, "y": 494 },
            { "index": 7, "x": 370, "y": 578 },
            { "index": 8, "x": 350, "y": 655 },
            //从左下到右上
            { "index": 9, "x": 171, "y": 760 ,"w":55,"h":50},
            { "index": 10, "x": 150, "y": 821 ,"w":55,"h":50},
            { "index": 11, "x": 230, "y": 835,"w":55,"h":50 },
            { "index": 12, "x": 309, "y": 846,"w":55,"h":50 },
            { "index": 13, "x": 321, "y": 789 ,"w":55,"h":50}], "width": 1165, "height": 1090


      },
      // ************
      timeValue: [],
      time: "",
      tableData: [
        {
          ckmc: "商丘中转库",
          cfmc: "3号仓",
          bjsj: "2020-10-21",
          yclddsc: "2小时",
        },
        {
          ckmc: "商丘中转库",
          cfmc: "5号仓",
          bjsj: "2020-10-22",
          yclddsc: "5小时",
        },
      ],
      tzggListData: [
        // { name: "哈哈哈" },
        //  { name: "哈哈哈" }
      ],
    };
  },
  created() {},
  mounted() {
    //出入库数量趋势

    this.drawLine();

    //粮食数量变化
    this.drawQuline();

    // 热区
    window.onresize = () => {
      this.scale();
    };
    setTimeout(() => {
      this.addArea();
      this.scale();
    }, 500);
  },
  methods: {
    jumpDetails() {},
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "one-row";
      } else {
        return "two-row";
      }
    },

    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        // title: { text: "在Vue中使用echarts" },
        tooltip: {
          backgroundColor: "rgba(21, 96, 176, 0.5)",
          borderColor: "#7dc9de",
          textStyle: {
            color: "dafaff",
          },
        },
        legend: {
          x: "center",
          y: "bottom",
          padding: [0, 0, 20, 0],
          data: ["出库", "入库"],
          textStyle: {
            color: "#dafaff",
          },
        },
        grid: {
          top: "40px",
          left: "5%",
          right: "4%",
          // bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              type: "solid",
              color: "#0a4b88",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#dafaff",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            interval: 0,
          },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              type: "solid",
              color: "#0a4b88",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#dafaff",
              width: 1,
              type: "solid",
            },
          },
        },
        series: [
          {
            name: "出库",
            type: "line",
            stack: "Total",
            smooth: true,
            data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90],
          },
          {
            name: "入库",
            type: "line",
            stack: "Total",
            smooth: true,
            data: [220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 90],
          },
        ],
      });

      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    drawQuline() {
      // 基于准备好的dom，初始化echarts实例
      let myChart2 = this.$echarts.init(document.getElementById("myChart2"));
      // 绘制图表
      myChart2.setOption({
        // title: { text: "在Vue中使用echarts" },
        xAxis: [
          {
            splitLine: {
              show: true,
              lineStyle: {
                color: "#005292",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#fff", //坐标值得具体的颜色
              },
            },
            axisLine: {
              show: true, // X轴 网格线 颜色类型的修改
              lineStyle: {
                type: "dashed",
                color: "#005292",
              },
            },

            data: [
              "10-23周日",
              "10-24周一",
              "10-25周二",
              "10-26周三",
              "10-27周四",
              "10-28周五",
              "10-29周六",
            ],
          },
        ],
        grid: {
          top: "7%",
          left: "7%",
          right: "3%",
          bottom: "15%",
        },
        yAxis: [
          {
            splitLine: {
              show: true,
              lineStyle: {
                color: "#005292",
              },
            },
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#fff", //坐标值得具体的颜色
              },
            },
          },
          {
            type: "value",
            name: "Precipitation",

            position: "right",

            axisLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#005292",
              },
            },
          },
        ],

        series: [
          {
            data: [10, 22, 28, 23, 19],
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                color: "#fff", //折点颜色
                lineStyle: {
                  color: "#00d7db", //折线颜色
                },
              },
            },
            areaStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00d7db",
                },
                {
                  offset: 1,
                  color: "#002d56",
                },
              ]),
            },
          },
        ],
      });

      window.addEventListener("resize", function () {
        myChart2.resize();
      });
    },

    //热区
    addArea() {
      var htmlStr = "";
      for (let index = 0; index < this.datas.maps.length; index++) {
        const ele = this.datas.maps[index];
        var x = ele.x;
        var y = ele.y;
        var w = ele.w === undefined ? 100 : ele.w;
        var h = ele.h === undefined ? 100 : ele.h;
        var url = ele.url === undefined ? "-1" : ele.url;
        var path = ele.path === undefined ? "-1" : ele.path;
        var videoIndex = ele.index;
        htmlStr += `<div w=${w} h=${h} x=${x}  y=${y} url=${url} path=${path} indexs=${videoIndex} class="area" style=left:${
          x - w / 2
        }px;top:${y - w / 2}px;width:${ele.w}px;height:${ele.h}px></div>`;
      }

      $("#map").append(htmlStr);

      $(".area").click((e) => {
        console.log(".....");
        console.log(e.target, "e.target...");
        var url = e.target.getAttribute("url");
        var path = e.target.getAttribute("path");
        var Vindex = Number(e.target.getAttribute("indexs"));

        console.log(url, path);
        if (url !== "-1") {
          console.log(",,,,");
          this.type = 1;
          // this.iframSrc = url
          window.location.href = url;
          // window.open(url);
        }
        // if(Vindex ==21&&url !== "-1"){
        //   this.type = 1
        //
        //    this.iframSrc = url
        //    $("#mobsf").css({ width: "100%", height: "100%" })
        // }

        if (path !== "-1") {
          this.type = 3;

          this.$router.push(path);
        }
        //库区监管
        // if (Vindex == 12) {
        //   this.type = 2
        // }
      });
    },
    scale() {
      var w = $("#map").width();
      var h = $("#map").height();
      console.log(w, h);
      $(".area").each((index, ele) => {
        var left = Number($(ele).attr("x"));
        var top = Number($(ele).attr("y"));
        var araw = Number($(ele).attr("w"));
        var arah = Number($(ele).attr("h"));
        // var index=Number($(ele).attr("index"))

        var sx = left / this.datas.width;
        var sy = top / this.datas.height;
        var sw = araw / this.datas.width;
        var sh = arah / this.datas.height;

        var x = w * sx;
        var y = h * sy;
        var w1 = w * sw;
        var h1 = h * sh;

        $(ele).css({ left: x - w1 / 2, top: y - h1 / 2 });

        //$(ele).offset({ left: x - w1 / 2, top: y - h1 / 2 + 70 });
        $(ele).css({ width: w1, height: h1 });
      });
    },

    getValue() {
      var data = {
        maps: [],
      };
      var index = 0;
      $("#map").mousedown(function (e) {
        data.width = $(".imgStyle").width();
        data.height = $(".imgStyle").height();
        var left = $(this).offset().left;
        var top = $(this).offset().top;
        console.log(e.pageX, e.pageY, left, top);

        var area = {
          index: index,
          x: Number(e.pageX) - left,
          y: Number(e.pageY) - top,
        };
        data.maps.push(area);
        index++;

        console.log(data);

        console.log(JSON.stringify(data));

        //$(".a").css({position: "absolute",'top': ,'left':offsetleft+50});
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  // min-width:1400px;
  // overflow-x:auto ;

  color: #dafaff;
  background: url("./image/bg.png") center no-repeat;
  background-size: 100%;
  ::v-deep.el-button--small,
  .el-button--small.is-round {
    padding: 7px 15px;
  }
  ::v-deep.el-table::before {
    background-color: #042c59 !important;
  }
  ::v-deep.el-table td.el-table__cell,
  ::v-deep.el-table th.el-table__cell.is-leaf {
    border: 0px !important;
    padding: 5px 0px;
  }
  ::v-deep.el-table th.el-table__cell {
    background-color: #1460b0;
  }
  ::v-deep.el-table--enable-row-hover
    .el-table__body
    tr:hover
    > td.el-table__cell {
    background-color: #1460b0;
  }
  ::v-deep.el-table thead {
    color: #dafaff;
  }
  ::v-deep.d2-container-full__body {
    background: none !important;
  }
  ::v-deep.el-table .one-row {
    background-color: #042c59 !important;
    color: #dafaff;
  }
  ::v-deep.el-table .two-row {
    background-color: #063c67 !important;
    color: #f7feff;
  }
  ::v-deep.el-date-editor {
    background: #0e2a59;
  }

  .page-content-bottom {
    position: relative;
    margin-top: 20px;
    height: calc(40% - 20px);
    background: url("./image/lsslCopy.png") no-repeat;
    background-size: 100% 100%;
  }
  .content-bottom-title {
    position: absolute;
    left: 20px;
    top: 10px;
  }
  .right-content {
    height: 30%;
    min-height: 300px;
    margin-right: -20px;
    float: right;
  }
  .left-content {
    height: 30%;
    min-height: 400px;
    float: left;
  }
  .tzggList {
    margin: 10px 0;
    padding: 0;
  }
  .tzggList li {
    margin: 0 5px;
    padding-left: 20px;
    list-style: none;
    padding-right: 10px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #1460b0;
  }
  .tzggList li:hover {
    background: #1460af;
    // border-bottom: 1px solid #1460b0;
    border-radius: 25px;
  }
  .tzggListLi {
    float: right;
  }
  // .myChart {
  //   margin: 0 auto;
  //   color: #f7feff;
  // }
  .mapPosition {
    width: 30%;
    margin: 0 auto;
    min-width: 400px;
    height: 92%;
    position: absolute;
    left: 36%;
    right: center;
  }
  .echarts-map {
    min-width: 30px;
    min-height: 30px;
    width: 100%;
    height: 100%;
  }
  .kck-content {
    font-size: 14px;
    width: 91%;
    height: 50px;
    margin: 5% 0 0 4%;
    float: left;
    background: url("./image/crbg.png") no-repeat;
    background-size: 100% 100%;
    background-position: center;
  }
  .kck-content-out {
    text-align: center;
    line-height: 47px;
  }
  .kck-content-in-2 {
    margin: 0 15px;
  }
  .kck-content-num1 {
    margin: 0 5px;
    font-size: 20px;
    font-weight: bold;
  }
  .kck-content-num2 {
    display: inline-block;
    width: 35px;
    height: 22px;
    line-height: 22px;
    background: url("./image/szkBlue.png") no-repeat;
    background-size: 100%;
    letter-spacing: 12px;
    padding-left: 6px;
  }
  .kck-content-num3 {
    display: inline-block;

    width: 35px;
    height: 22px;
    line-height: 22px;
    background: url("./image/szkBlue.png") no-repeat;
    background-size: 100% 100%;
    letter-spacing: 12px;
    padding-left: 6px;
  }
  .ckt-bg {
    position: relative;
    width: 190px;
    height: 100px;
    float: left;
    background: url("./image/ckl.png") no-repeat;
    background-size: 100% 100%;
  }
  .rkt-bg {
    width: 190px;
    height: 100px;
    float: right;
    background: url("./image/rkl.png") no-repeat;
    background-size: 100% 100%;
  }
  .czBut {
    color: #dafaff;
    background-color: #142f66;
    border: 1.5px solid #4a95be;
    border-radius: 7px;
  }
  .czBut:hover {
    color: #dafaff;
    background-color: #3d8ee9;
    border: 1.5px solid #4a95be;
    border-radius: 7px;
  }
  .ckmcImg {
    width: 17px;
    margin: 0px 10px 0 -5px;
  }
  .seeMore {
    font-size: 14px;
    position: absolute;
    bottom: 10px;
    right: 0px;
    margin: 10px 20px;
    cursor: pointer;
  }
  .tzXyd {
    background: #dafaff;
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .ckt-szk-bg {
    position: absolute;
    width: 35px;
    height: 22px;
    left: 100px;
    top: 50px;
    background: url("./image/szkBlue.png") no-repeat;
    background-size: 100% 100%;
    letter-spacing: 12px;
    padding-left: 6px;
  }
  .rkt-szk-bg {
    position: absolute;
    width: 35px;
    height: 22px;
    right: 100px;
    top: 50px;
    background: url("./image/szkGreen.png") no-repeat;
    background-size: 100% 100%;
    letter-spacing: 12px;
    padding-left: 6px;
  }
  .rkt-bg-font {
    font-size: 14px;
    position: absolute;
    right: 70px;
    top: 23px;
  }
  .ckt-bg-font {
    font-size: 14px;
    position: absolute;
    left: 70px;
    top: 23px;
  }
  .ckt-bg-little {
    font-size: 12px;
    position: absolute;
    left: 60px;
    top: 79px;
  }
  .rkt-bg-little {
    font-size: 12px;
    position: absolute;
    right: 40px;
    top: 79px;
  }
  .zcColor {
    margin-right: 5px;
    color: #19d606;
  }
  .jdColor {
    margin-right: 5px;
    color: #ff8ca7;
  }
  .timeOption {
    position: absolute;
    width: 187px;
    right: 20px;
    height: 28px;
    background-color: #142f66;
    padding: 0;
    margin: -16px 0 0 0;
    border: 1.5px solid #4a95be;
  }
  ::v-deep.el-date-editor .el-range__icon {
    font-size: 12px;
    margin-left: 5px;
    color: #f7feff;
    float: left;
    line-height: 26px;
  }
  ::v-deep.el-range-editor .el-range-input {
    background: #142f66;
    font-size: 12px;
  }
  ::v-deep.el-date-editor .el-range-separator {
    padding: 0 5px;
    line-height: 25px;
    width: 5%;
    color: #f7feff;
  }
  .bottom_div {
    width: calc(100% - 20px);
    height: 75%;
    position: absolute;
    top: 50px;
    left: 20px;
    display: flex;
    justify-content: space-between;
    .imgLeft_father {
      width: 150px;

      background: url("./image/kuang-bg_2.png") no-repeat;
      background-size: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .bac_div {
        height: 32%;
        margin-top: 15px;
      }
      .imgLeft {
        // display: inline-block;
        // width: 200px;
        // height: 220px;
      }
    }
    .myChart2 {
      position: absolute;
      left: 15%;
    }
  }
  ::v-deep.el-input__inner {
    border: 1px solid #338ab3;
  }

  // .btn-group {
  //   color: $color-text-placehoder;
  //   font-size: 12px;
  //   line-height: 12px;
  //   margin-top: 0px;
  //   margin-bottom: 20px;
  //   .btn-group__btn {
  //     color: $color-text-sub;
  //     &:hover {
  //       color: $color-text-main;
  //     }
  //     &.btn-group__btn--link {
  //       color: $color-primary;
  //     }
  //   }
  // }
}

.home_top {
  height: 60%;
  width: 100%;
  .alarmTodo,
  .crkTrend {
    height: 100%;
    width: 33%;
    background: url("./image/kuang-bg_1.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .kcImg {
    height: 100%;
    width: 33%;

    display: flex;
    box-sizing: border-box;

    .kc_left {
      // width:40%;
      // height:70%;
      width: 200px;
      height: 70%;

      .ck_div,
      .rk_div,
      .cr_div {
        width: 100%;
        height: 90px;
        //  height:32%;
      }
      .ck_div {
        background: url("./image/ck_new.png") no-repeat;
        background-size: 100% 100%;
        position: relative;
        .ckNumber {
          position: absolute;
          top: 20px;
          left: 85px;
          font-size: 14px;
        }
        .ckMiddle {
          display: flex;
          justify-content: center;
          width: calc(100% - 100px);
          position: absolute;
          left: 88px;
          top: 42px;

          .numberBac {
            padding: 3px 5px;
            background: url("./image/ckNumber.png") no-repeat;
            background-size: 100% 100%;
            background-position: center;
          }
        }

        .baifenNumber {
          position: absolute;
          top: 69px;
          left: 78px;
          font-size: 14px;
        }
      }
      .rk_div {
        background: url("./image/rk_new.png") no-repeat;
        background-size: 100% 100%;
        position: relative;
        .ckNumber {
          position: absolute;
          top: 15px;
          left: 85px;
          font-size: 14px;
        }
        .ckMiddle {
          display: flex;
          justify-content: center;
          width: calc(100% - 100px);
          position: absolute;
          left: 88px;
          top: 38px;

          .numberBac {
            padding: 3px 5px;
            background: url("./image/rkNumber.png") no-repeat;
            background-size: 100% 100%;
            background-position: center;
          }
        }

        .baifenNumber {
          position: absolute;
          top: 69px;
          left: 78px;
          font-size: 14px;
        }
      }
      .cr_div {
        background: url("./image/cr.png") no-repeat;
        background-size: 100% 100%;
        margin-top: 10px;
      }
    }
    .kc_right {
      // width:60%;
      width: calc(100% - 200px);
    }
  }
  .crkTrend_title,
  .alarmTodo_title {
    position: absolute;
    left: 10px;
    height: 30px;
    display: flex;
    align-items: center;
    font-size: 15px;
    .arrow {
      margin-right: 5px;
    }
  }
  .crkTrend_date {
    position: absolute;
    top: 45px;
    right: 0px;
  }
  .alarmTodo_table {
    width: 90%;
    height: 80%;
    position: absolute;
    left: 5%;
    top: 15%;
  }
}
.area {
  position: absolute;

  // background: rgba(107, 107, 106, 0.514);
  background: green;

  border-radius: 50%;
  cursor: pointer;
  //  pointer-events: none;
}
#map {
  height: 100%;
  position: relative;
  // overflow: hidden;
  .rqImg{
    transform: scale(0.35);
    position:absolute;
    top:-150px;
    left:-155px;
  }
}
</style>
