<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">
          <ul class="outUl">
            <li>仓房名称</li>
            <li>报警时间</li>
            <li>已处理等待时常</li>
            <li>处理</li>
          </ul>
          <vue-seamless-scroll
            :data="tableData"
            :class-option="classOption"
            class="scroll"
          >
            <ul
              class="DataList_top inUl"
              v-for="(item, index) in tableData"
              :key="index"
            >
              <li class="DataList_left">
                {{ item.cfmc }}
              </li>
              <li class="DataList_left">
                {{ item.bjsj }}
              </li>
              <li class="DataList_left">
                {{ item.yclddsc }}
              </li>
              <li class="DataList_left">
                <el-button
                  class="czBut"
                  type="button"
                  size="mini"
                  icon="el-icon-edit"
                  >反馈</el-button
                >
              </li>
            </ul>
          </vue-seamless-scroll>
          <span class="seeMore">查看更多></span>
        </div>
      </div>

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

            <div id="dataNums">{{ outNumber }}</div>

            <div class="baifenNumber">
              较昨日
              <span v-if="outjiangdi === '增长'" style="color: #64d140">{{
                outInfo
              }}</span>
              <span v-else style="color: #ee92a7">{{ outInfo }}</span>
              <!-- <img
                v-if="outInfo.hasOwnProperty('增长')"
                src="./image/zezhang.png"
                alt=""
              />
              <img
                v-if="outInfo.hasOwnProperty('降低')"
                src="./image/jiangdi.png"
                alt=""
              /> -->
              <img
                v-if="outjiangdi === '增长'"
                src="./image/zezhang.png"
                alt=""
              />
              <img v-else src="./image/jiangdi.png" alt="" />
            </div>
          </div>
          <div class="rk_div">
            <div class="ckNumber">当天入库量（吨）</div>

            <div id="dataNums1">{{ inNumber }}</div>

            <div class="baifenNumber1">
              较昨日
              <span v-if="injiangdi === '增长'" style="color: #64d140">{{
                inInfo
              }}</span>
              <span v-else style="color: #ee92a7">{{ inInfo }}</span>
              <!-- <img v-if="inInfo.hasOwnProperty('降低')" src="./image/jiangdi.png" alt="" />
                 <img v-if="inInfo.hasOwnProperty('增长')" src="./image/zezhang.png" alt="" /> -->
              <img
                v-if="injiangdi === '降低'"
                src="./image/jiangdi.png"
                alt=""
              />
              <img v-else src="./image/zezhang.png" alt="" />
            </div>
          </div>
          <div class="cr_div">
            <div class="cr_top">
              <span class="zcr">总仓容</span>
              <div id="dataNums2">{{ sumNumber }}</div>

              <span class="dun">吨</span>
            </div>
            <div class="cr_middle">
              <span class="yiyong">已用</span>
              <div id="dataNums3">{{ useNumber }}</div>

              <span class="dun">吨</span>
            </div>
            <div class="cr_bottom">
              <span class="syky">剩余可用</span>
              <div id="dataNums4">{{ remainingNumber }}</div>

              <span class="lastDun" style="right: 12%">吨</span>
            </div>
          </div>
        </div>
        <div class="kc_right">
          <div id="map">
            <img
              src="./image/kq.png"
              border="0"
              usemap="#planetmap"
              alt="Planets"
              class="imgStyle"
              style="width: 100%; height: 100%"
            />
          </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 v-model="time" type="year" placeholder="选择年">
          </el-date-picker>
        </div>
        <div
          class="myChart"
          id="myChart"
          :style="{ width: '100%', top: '15%', height: '75%' }"
        ></div> -->
        <div class="alarmTodo_table1">
          <ul class="outUl">
            <li>仓房名称</li>
            <li>开始时间</li>
            <li>结束时间</li>
            <li>重量(吨)</li>
          </ul>
          <vue-seamless-scroll
            :data="dataSearchList"
            :class-option="classOption"
            class="scroll1"
          >
            <ul
              class="DataList_top inUl"
              v-for="(item, index) in dataSearchList"
              :key="index"
            >
              <li class="DataList_left">
                {{ item.equiName }}
              </li>
              <li class="DataList_left">
                {{ item.beginTime }}
              </li>
              <li class="DataList_left">
                {{ item.endTime }}
              </li>
              <li class="DataList_left">
                {{ item.lkWeight }}
              </li>
            </ul>
          </vue-seamless-scroll>
          <span class="seeMore" @click="dataMore()">查看更多></span>
        </div>
      </div>
    </div>
    <div class="page-content-bottom">
      <div class="bottom_left">
        <div class="left_title">
          <img style="margin-right: 5px" class="arrow" src="./image/xjt.png" />
          <span>粮食数量变化趋势</span>
        </div>
        <div class="imgLeft_father">
          <div class="bac_div">
            <div>仓房名称:</div>
            <div class="linearDiv">{{ cfName }}</div>
          </div>
          <div class="bac_div">
            <div style="top: -1%">粮食种类:</div>
            <div style="left: 40%; top: 28%" class="linearDiv">
              {{ pzName }}
            </div>
          </div>
          <div class="bac_div">
            <div style="top: -8%">目前粮食数量(吨):</div>
            <div style="left: 40%; top: 21%" class="linearDiv">
              {{ lsNumber }}
            </div>
            <!-- //百分比 -->
            <div
              style="position: absolute; font-size: 14px; left: 14%;top:55%"
              v-if="!changeNumber && changeRatio.toString().indexOf('-') < 0"
            >
              同比昨天

              <span v-if="leftJd === '增长'" style="color: #64d140">{{
                leftInfo
              }}</span>
              <span v-else style="color: #ee92a7">{{ leftInfo }}</span>

              <img v-if="leftJd === '降低'" src="./image/jiangdi.png" alt="" />
              <img v-else src="./image/zezhang.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="bottom_right">
        <div class="right_top">
          <div style="margin-left: 10px; height: 40px; line-height: 40px">
            <el-date-picker
              v-model="timeValue"
              v-if="timeValue"
              type="daterange"
              :picker-options="pickerOptions"
              range-separator="-"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="dateChange"
            >
            </el-date-picker>
          </div>
          <div style="margin-left: 10px; height: 40px; line-height: 40px">
            <el-form :model="cfSelect" label-width="80px">
              <el-form-item label="仓房名称:">
                <el-select
                  v-model="cfSelect.cfName"
                  placeholder="请选择仓房"
                  @change="cfChange"
                >
                  <el-option
                    v-for="item in cfLists"
                    :key="item.id"
                    :label="item.orgName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="right_bottom">
          <div
            class="myChart2"
            id="myChart2"
            :style="{ width: '100%', height: '100%', top: '0px' }"
          ></div>
        </div>
      </div>
    </div>
  </d2-container>
</template>

<script>
import $ from "jquery";
import fjmap from "./fjmap";
import countTo from "vue-count-to";
import api from "@/api";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "index",
  components: { fjmap, countTo, vueSeamlessScroll },
  data() {
    return {
      //仓Id
      houseId: localStorage.getItem("manageStore"),

      // 库Id
      orgId: localStorage.getItem("orgId"),
      // 数据查询
      dataSearchList: [
        // {
        //   cfmc: "3号仓",
        //   startTime: "2021-1-2 10:59:59",
        //   endTime: "2021-1-2 10:59:59",
        //   count: 300,
        // },
      ],
      //热区初始化
      datas: {
        //从上往下

        maps: [
          //从上往下
          {
            index: 0,
            x: 90.34375,
            y: 7,
            // path: "/warehouseTravel",
            params: 111,
            kqcfName: "1号大豆仓",
          },
          {
            index: 1,
            x: 88.34375,
            y: 18,
            // path: "/warehouseTravel",
            params: "02",
            kqcfName: "2号大豆仓",
          },
          { index: 2, x: 82.34375, y: 32, kqcfName: "3号大豆仓" },
          { index: 3, x: 81.34375, y: 48, kqcfName: "4号大豆仓" },
          { index: 4, x: 76.34375, y: 63, kqcfName: "5号大豆仓" },
          { index: 5, x: 72.34375, y: 77, kqcfName: "6号大豆仓" },
          { index: 6, x: 68.34375, y: 92, kqcfName: "7号大豆仓" },
          { index: 7, x: 65.34375, y: 107, kqcfName: "8号大豆仓" },
          { index: 8, x: 62.34375, y: 122, kqcfName: "9号大豆仓" },
          // 从左上到右下
          {
            index: 9,
            x: 31.34375,
            y: 144,
            w: 10,
            h: 10,
            kqcfName: "1号稻谷仓",
          },
          {
            index: 10,
            x: 26.34375,
            y: 154,
            w: 10,
            h: 10,
            kqcfName: "2号稻谷仓",
          },
          {
            index: 11,
            x: 40.34375,
            y: 156,
            w: 10,
            h: 10,
            kqcfName: "3号稻谷仓",
            path: "/warehouseTravel",
          },
          {
            index: 12,
            x: 55.34375,
            y: 159,
            w: 10,
            h: 10,
            kqcfName: "4号稻谷仓",
          },
          {
            index: 13,
            x: 57.34375,
            y: 149,
            w: 10,
            h: 10,
            kqcfName: "5号稻谷仓",
          },
        ],
        width: 206.491,
        height: 202.898,
      },
      cfSelect: {
        cfName: "",
      },
      numberList: [7, 7, 7],

      // ************
      timeValue: [],
      time: "",
      tableData: [
        // {
        //   cfmc: "1号仓",
        //   bjsj: "2020-10-21",
        //   yclddsc: "2小时",
        // },
      ],
      tzggListData: [
        // { name: "哈哈哈" },
        //  { name: "哈哈哈" }
      ],

      //仓房列表
      cfLists: [],
      // 仓房名称
      cfName: "",
      //粮食品种
      pzName: "",
      //粮食数量
      lsNumber: null,
      //比例
      //百分比
      changeRatio: 0,
      //吨
      changeNumber: 0,

      //出入库

      //出库量
      outNumber: null,
      //已用
      useNumber: null,

      //出库率
      outRatio: null,
      changeOutNumber: null,
      //入库率
      inRatio: null,
      changeInNumber: null,
      //剩余数量
      remainingNumber: null,
      //入库量
      inNumber: null,
      //总仓容
      sumNumber: null,

      //判断增高还是降低的条件

      outInfo: 0,
      inInfo: 0,
      outjiangdi: "",
      injiangdi: "",

      //粮食数量
      leftInfo: 0,
      leftJd: "",

      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },

      //周粮情变化echarts
      xData: [],
      yData: [],

      kqData: [],
    };
  },
  computed: {
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 0, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },

  mounted() {
    console.log(this.houseId, this.orgId, "mmmmmm");
    if (this.tableData.length == 0) {
      $(".scroll")
        .append(`<div style="height:40px;line-height:40px;text-align:center;color:#ccc;background:#fff">暂无数据</div>
      `);
    }
    this.getDataList();
    this.kqList();
    this.cfList();
    //出入库数量趋势

    // this.drawLine();

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

    this.weekList();
    this.crkList();
    // 热区
    window.onresize = () => {
      this.scale();
    };
    setTimeout(() => {
      // this.getValue();
      this.addArea();
      this.numberGun();
      this.numberGun1();
      this.numberGun2();
      this.numberGun3();
      this.numberGun4();
      this.scale();
    }, 500);
  },
  methods: {
    //数据查询查看更多
    dataMore() {
      this.$router.push({
        path: "/dataQuery",
      });
    },
    //下拉选值改变时
    dateChange(val) {
      console.log(val, "/////");
      this.startTime = val[0];
      this.endTime = val[1];
      this.weekList();
    },
    //仓房值改变时
    cfChange(val) {
      // this.parentId = val;
      // this.cfList();

      this.cfLists.forEach((item) => {
        if (item.id == val) {
          this.cfName = item.orgName;
        }
      });
    },
    //获取仓房列表
    cfList() {
      var data = {
        parentId: parseInt(this.orgId),
      };
      api
        .ckList(data)
        .then((res) => {
          if (res.code == 200) {
            this.cfLists = res.data;
            res.data.forEach((item) => {
              var obj = {};
              if (item.storeTypeCode === 43) {
                console.log(item, "item...");
                (obj.orgName = item.orgName), (obj.id = item.id);
                this.cfLists.push(obj);
              }
            });

            console.log(this.cfLists);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 近一周粮食变化
    weekList() {
      var condition = {
        houseId: parseInt(this.houseId),
        startTime: this.timeValue[0],
        endTime: this.timeValue[1],
      };
      condition = JSON.stringify(condition);
      let data = {
        condition: condition,
      };
      console.log(data, "请求实体。。");
      api
        .weekChange(data)
        .then((res) => {
          //右下角仓房名称显示
          if (res.code == 200) {
            const leftData = res.data.clxx;
            this.cfSelect.cfName = leftData.mainId;
            //左侧数据
            this.cfName = leftData.cfName;
            this.pzName = leftData.pzName;
            this.lsNumber = parseInt(leftData.lsNumber);
            // this.changeRatio = parseInt(res.data.clxx.changeRatio); //0
            // this.changeNumber = parseInt(res.data.clxx.changeNumber); //NaN
            // console.log(this.changeRatio, this.changeNumber, "???????");
            // console.log(!this.changeNumber, "changeNumber");
            var leftJd = "";
            var leftNum = "";
            var leftUnit = "";
            if (leftData.changeNumber && leftData.changeRatio === null) {
              const changeNumber = Number(leftData.changeNumber);

              leftJd = changeNumber < 0 ? "降低" : "增长";

              leftUnit = "吨";

              leftNum = parseInt(Math.abs(changeNumber));
              console.log(leftNum, "leftNum...");
            } else if (leftData.changeRatio && leftData.changeNumber === null) {
              const changeRatio = Number(leftData.changeRatio);

              leftJd = changeRatio < 0 ? "降低" : "增长";

              leftUnit = "%";

              leftNum = parseInt(Math.abs(changeRatio));
            }
            this.leftInfo = `${leftJd}${leftNum}${leftUnit}`;
            this.leftJd = leftJd;
            console.log(this.leftInfo, "leftInfo...");

            //右侧数据
            this.timeValue = [res.data.startTime, res.data.endTime];
            console.log(res.data.wightList, "res.data.wightList");
            this.yData = res.data.wightList.reverse();
            this.xData = res.data.dayList.reverse();
            console.log(this.timeValue, "this.timeValue");

            this.drawQuline();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //出入库

    crkList() {
      var condition = {
        orgId: parseInt(this.orgId),
      };
      condition = JSON.stringify(condition);
      let data = {
        condition: condition,
      };
      api
        .crkData(data)
        .then((res) => {
          if (res.code == 200) {
            const data = res.data;
            var outjiangdi = "",
              injiangdi = "";
            var outunit = "",
              inunit = "";
            var outnum = 0,
              innum = 0;

            if (
              data.hasOwnProperty("inRatio") &&
              data.hasOwnProperty("outRatio")
            ) {
              //百分比
              const inRatio = Number(data.inRatio);
              const outRatio = Number(data.outRatio);
              injiangdi = inRatio < 0 ? "降低" : "增长";
              outjiangdi = outRatio < 0 ? "降低" : "增长";
              inunit = "%";
              outunit = "%";
              innum = Math.abs(inRatio);
              outnum = Math.abs(outRatio);
            } else if (
              data.hasOwnProperty("changeInNumber") &&
              data.hasOwnProperty("changeOutNumber")
            ) {
              // 吨
              const changeInNumber = Number(data.changeInNumber);
              const changeOutNumber = Number(data.changeOutNumber);
              console.log(
                changeInNumber,
                changeOutNumber,
                ">>>>>>>>>>>>>>>>>>"
              );
              injiangdi = changeInNumber < 0 ? "降低" : "增长";
              outjiangdi = changeOutNumber < 0 ? "降低" : "增长";
              inunit = "吨";
              outunit = "吨";
              innum = Math.abs(changeInNumber);
              outnum = Math.abs(changeOutNumber);
            } else if (
              data.hasOwnProperty("changeInNumber") &&
              data.hasOwnProperty("outRatio")
            ) {
              const changeInNumber = Number(data.changeInNumber);
              const outRatio = Number(data.outRatio);
              injiangdi = changeInNumber < 0 ? "降低" : "增长";
              outjiangdi = outRatio < 0 ? "降低" : "增长";
              inunit = "吨";
              outunit = "%";
              innum = Math.abs(changeInNumber);
              outnum = Math.abs(outRatio);
            } else if (
              data.hasOwnProperty("changeOutNumber") &&
              data.hasOwnProperty("inRatio")
            ) {
              const changeOutNumber = Number(data.changeOutNumber);
              const inRatio = Number(data.inRatio);
              injiangdi = inRatio < 0 ? "降低" : "增长";
              outjiangdi = changeOutNumber < 0 ? "降低" : "增长";
              inunit = "%";
              outunit = "吨";
              innum = Math.abs(inRatio);
              outnum = Math.abs(changeOutNumber);
            }
            const outInfo = `${outjiangdi}${outnum}${outunit}`;
            const inInfo = `${injiangdi}${innum}${inunit}`;
            this.outInfo = outInfo;
            this.inInfo = inInfo;
            console.log(data, inInfo, outInfo);
            this.outjiangdi = outjiangdi;
            this.injiangdi = injiangdi;

            // this.realInRatio = res.data.inRatio;
            // this.realOutRatio = res.data.outRatio;
            // this.realChangeInNumber = res.data.changeInNumber;
            // this.realChangeOutNumber = res.data.changeOutNumber;

            //入库量
            if (!res.data.inNumber) {
              this.inNumber = 0;
            } else {
              this.inNumber = String(Math.abs(parseInt(res.data.inNumber)));
            }
            console.log(this.inNumber, "//////");
            //入库率
            // if (res.data.inRatio) {
            //   this.inRatio = parseInt(Math.abs(res.data.inRatio));
            // }
            // if (res.data.changeInNumber) {
            //   this.inRatio = parseInt(Math.abs(res.data.changeInNumber));
            // }
            // 出库量
            if (!res.data.outNumber) {
              this.outNumber = 0;
            } else {
              this.outNumber = String(Math.abs(parseInt(res.data.outNumber)));
              console.log();
            }

            //出库率
            // if (res.data.outRatio) {
            //   this.outRatio = parseInt(Math.abs(res.data.outRatio));
            // }
            // if (res.data.changeOutNumber) {
            //   this.inRatio = parseInt(Math.abs(res.data.changeOutNumber));
            // }

            //已用
            if (!res.data.useNumber) {
              this.useNumber = 0;
            } else {
              // this.useNumber=(res.data.useNumber).split(".")[0]
              this.useNumber = parseInt(res.data.useNumber);
            }

            //剩余可用
            if (!res.data.remainingNumber) {
              this.remainingNumber = 0;
            } else {
              // this.remainingNumber=(res.data.remainingNumber).split(".")[0]
              this.remainingNumber = parseInt(Math.abs(res.data.remainingNumber));
            }
            //总仓容

            if (!res.data.sumNumber) {
              this.sumNumber = 0;
            } else {
              this.sumNumber = res.data.sumNumber.split(".")[0];
            }

            console.log(this.inRatio, "this.inRatio");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //库区图
    kqList() {
      var condition = {
        orgId: parseInt(this.orgId),
      };
      condition = JSON.stringify(condition);
      let data = {
        condition: condition,
      };
      api
        .kqData(data)
        .then((res) => {
          if (res.code == 200) {
            console.log(res, "res....");

            this.kqData = res.data.list;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取列表数据
    getDataList() {
      console.log("....");
      console.log(this.cfbh);
      var condition = {
        orgId: parseInt(this.orgId),
      };
      condition = JSON.stringify(condition);
      var data = {
        condition: condition,
      };
      api
        .dataQuery(data)
        .then((res) => {
          if (res.code == 200) {
            this.dataSearchList = res.data;
            console.log(this.dataSearchList, "dataSearchList");
            if (this.dataSearchList.length == 0) {
              $(".scroll1")
                .append(`<div style="height:40px;line-height:40px;text-align:center;color:#ccc;background:#fff">暂无数据</div>
      `);
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 数字滚动
    numberGun() {
      $("#dataNums").rollNum({
        deVal: this.outNumber,
      });
    },
    numberGun1() {
      $("#dataNums1").rollNum({
        deVal: this.inNumber,
      });
    },
    numberGun2() {
      $("#dataNums2").rollNum({
        deVal: this.sumNumber,
      });
    },

    numberGun3() {
      $("#dataNums3").rollNum({
        deVal: this.useNumber,
      });
    },
    numberGun4() {
      $("#dataNums4").rollNum({
        deVal: this.remainingNumber,
      });
    },
    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],
    //         //data: [],
    //       },
    //       {
    //         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({
        tooltip: {
          trigger: "axis",
          backgroundColor: "#0059a4",
          borderColor: "#4cbbc9",
          textStyle: {
            color: "#fff",
          },
        },
        // 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: this.xData,
            // data: [
            //   "10-23周日",
            //   "10-24周一",
            //   "10-25周二",
            //   "10-26周三",
            //   "10-27周四",
            //   "10-28周五",
            //   "10-29周六",
            // ],
          },
        ],
        grid: {
          top: "7%",
          left: "7%",
          right: "1px",
          bottom: "30px",
        },
        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, 30, 50, 20],
            data: this.yData,
            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 ? 12 : ele.w;
        var h = ele.h === undefined ? 12 : ele.h;
        var url = ele.url === undefined ? "-1" : ele.url;
        var path = ele.path === undefined ? "-1" : ele.path;
        var params = ele.params === undefined ? "-1" : ele.params;
        var kqcfName = ele.kqcfName;

        htmlStr += `<div w=${w} h=${h} x=${x}  y=${y} url=${url} path=${path}  params=${params} kqcfName=${kqcfName} class="area" style=left:${
          x - w / 2
        }px;top:${y - h / 2}px;width:${ele.w}px;height:${ele.h}px></div>
         `;
      }
      htmlStr += `<div id="pDiv"></div>`;

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

      //点击每个仓房时
      $(".area").click((e) => {
        var areaCfmc = e.target.getAttribute("kqcfname");
        console.log(areaCfmc, "areaCfmc");

        //  for (let index = 0; index < this.datas.maps.length; index++) {
        //  const mapEle= this.datas.maps[index];
        for (let j = 0; j < this.kqData.length; j++) {
          if (this.kqData[j].orgName === areaCfmc) {
            var routerCfbh = this.kqData[j].id;
          }
        }
        //  }

        console.log(e.target, "e.target...");
        var url = e.target.getAttribute("url");
        var path = e.target.getAttribute("path");
        var params = e.target.getAttribute("params");

        console.log(url, path);
        if (url !== "-1") {
          console.log(",,,,");
          this.type = 1;
          // this.iframSrc = url
          window.location.href = url;
          // window.open(url);
        }

        if (path !== "-1") {
          // this.type = 3;
          console.log(params, "params....");
          this.$router.push({
            path: path,
            query: {
              houseId: routerCfbh,
            },
          });
        }
      });

      //鼠标移上去的样式
      $(".area").mouseover((e) => {
        const kqcfName = $(e.target).attr("kqcfName");
        console.log(kqcfName, "kqcfName");
        var kqcfObj = this.kqData.find((item) => {
          return item.orgName === kqcfName;
          // return item.orgName.indexOf(kqcfName);
        });
        console.log(kqcfObj, "kqcfObj");

        if (!kqcfObj) {
          $("#pDiv").html(` <div>暂无数据</div>`);
        } else {
          $("#pDiv").html(` 
         <div>
             <span>仓房名称:</span>
             <span>${kqcfObj.orgName}</span>
         </div>
          <div>
             <span>粮食品种:</span>
             <span>${kqcfObj.pzName}</span>
          </div>
          <div>
              <span>粮食数量:</span>
              <span>${kqcfObj.lsNumber}吨</span>
           </div>
           <div>
               <span>设备状态:</span>
                <span>在线</span>
                
          </div>
      `);
        }
        const offset = 30;
        const top = $(e.target).position().top + offset;
        const left = $(e.target).position().left + offset;
        $("#pDiv").show();
        $("#pDiv").css({
          top: top,
          left: left,
        });
      });
      $(".area").mouseleave((e) => {
        $("#pDiv").hide();
      });
    },
    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(JSON.stringify(data));
        this.datas = JSON.stringify(data);
        //$(".a").css({position: "absolute",'top': ,'left':offsetleft+50});
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  // min-height:600px;
  // overflow-y: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;
    // min-height: 600px !important;
    // overflow-y: auto !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;
  }
  // 下拉选样式
  ::v-deep.el-form-item__label {
    color: #fff;
  }

  ::v-deep.el-input__inner {
    background: #1a2f62;
    height: 30px;
  }

  .content-bottom-title {
    position: absolute;
    left: 10px;
    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: -30px;
    right: -10px;
    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: 22px;
    width: 5%;
    color: #f7feff;
  }

  ::v-deep.el-input__inner {
    border: 1px solid #338ab3;
    // height:0px;
  }
}

.home_top {
  height: 406px;
  width: 100%;
  min-width: 1500px;
  .alarmTodo,
  .crkTrend {
    height: 100%;
    padding: 0 12px;
    flex: 1;
    background: url("./image/kuang-bg_1.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .kcImg {
    //height: 100%;
    // width: 33%;
    padding: 0 20px;
    display: flex;
    box-sizing: border-box;

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

      .ck_div,
      .rk_div,
      .cr_div {
        width: 100%;

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

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

        .baifenNumber {
          position: absolute;
          // top: 69px;
          top: 77%;
          left: 33%;
          font-size: 12px;
        }
      }
      .rk_div {
        background: url("./image/rk_new.png") no-repeat;
        background-size: 100% 100%;
        position: relative;
        .ckNumber {
          position: absolute;
          top: 20%;
          left: 39%;
          font-size: 12px;
        }
        .ckMiddle {
          display: flex;
          justify-content: center;
          width: calc(100% - 100px);
          position: absolute;
          left: 88px;
          top: 55px;

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

        .baifenNumber1 {
          position: absolute;
          // top: 69px;
          top: 77%;
          left: 33%;
          font-size: 12px;
        }
      }
      .cr_div {
        background: url("./image/cr.png") no-repeat;
        background-size: 100% 100%;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        font-size: 12px;

        .cr_top,
        .cr_middle,
        .cr_bottom {
          width: 100%;
          height: 32%;
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          .numberStyle {
            margin: 0 5px;
            span {
              display: inline-block;
              padding: 3px 5px;
              background: url("./image/ckNumber.png") no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
    }
    .kc_right {
      width: 434px;
      height: 406px;
    }
  }
  .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: 10px;
  }
  .alarmTodo_table {
    width: calc(100% - 24px);
    height: 78%;
    position: absolute;

    top: 15%;
    .outUl {
      display: flex;

      justify-content: space-around;
      padding: 7px 0;
      background: #2b60aa;

      li {
        text-align: center;
        width: 23%;
        font-size: 14px;
      }
      li:nth-child(3) {
        width: 31%;
      }
      // li:nth-child(1) {
      //   width: 24%;
      // }
    }
    .DataList_top:nth-child(2n + 1) {
      background: #123365;
    }
    .DataList_top:nth-child(2n) {
      background: #1a4270;
    }
    .inUl {
      display: flex;

      justify-content: space-around;

      li {
        line-height: 29px;
        text-align: center;
        width: 23%;
        font-size: 12px;
      }

      li:nth-child(3) {
        width: 31%;
      }
      // li:nth-child(1) {
      //   width: 24%;
      // }
    }
  }

  .alarmTodo_table1 {
    width: calc(100% - 24px);
    height: 78%;
    position: absolute;

    top: 15%;
    .outUl {
      display: flex;

      justify-content: space-around;
      padding: 7px 0;
      background: #2b60aa;

      li {
        text-align: center;
        width: 20%;
        font-size: 14px;
      }
      li:nth-child(2) {
        width: 30%;
      }
      li:nth-child(3) {
        width: 30%;
      }
    }
    .DataList_top:nth-child(2n + 1) {
      background: #123365;
    }
    .DataList_top:nth-child(2n) {
      background: #1a4270;
    }
    .inUl {
      display: flex;

      justify-content: space-around;

      li {
        line-height: 29px;
        text-align: center;
        width: 20%;
        font-size: 12px;
      }

      li:nth-child(2) {
        width: 30%;
      }
      li:nth-child(3) {
        width: 30%;
      }
    }
  }
}
.page-content-bottom {
  display: flex;
  position: relative;
  margin-top: 20px;
  min-width: 1500px;
  min-height: 240px;

  height: calc(100% - 428px);
  background: url("./image/lsslCopy.png") no-repeat;
  background-size: 100% 100%;
  .bottom_left {
    width: 180px;
    height: 100%;
    padding-left: 12px;

    .left_title {
      padding: 8px 0;
    }
    .imgLeft_father {
      width: 180px;
      min-height: calc(100% - 50px);
      // height:200px;
      background: url("./image/kuang-bg_2.png") no-repeat;
      background-size: 100% 97%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .bac_div {
        // height: 32%;
        flex: 1;
        position: relative;
      }
      .imgLeft {
        // display: inline-block;
        // width: 200px;
        // height: 220px;
      }
    }
  }
  .bottom_right {
    width: calc(100% - 222px);
    height: 100%;
    padding-right: 12px;
    .right_top {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
    .right_bottom {
      width: 100%;
      // height: calc(100% - 82px);
      height: calc(100% - 62px);
    }
  }
}

// ::v-deep.seamless-warp {
//   width: 100%;
//   // height: calc(100% - 16px);
//   height: 220px;
//   overflow: hidden;
// }
.scroll {
  height: 280px;
  overflow: hidden;
}
.scroll1 {
  height: 280px;
  overflow: hidden;
}

::v-deep.el-button--mini {
  padding: 4px 7px;
}
</style>

<style>
.area {
  position: absolute;

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

  border-radius: 50%;
  cursor: pointer;
  /* pointer-events: none; */
}
#map {
  height: 100%;
  position: relative;
  /* soverflow: hidden; */
}

#pDiv {
  position: absolute;
  top: 10%;
  left: 50%;
  z-index: 99;
  font-size: 14px;
  padding: 8px;
  display: none;
  background: rgba(0, 77, 128, 0.418);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 2px #006f95;
  border: 1px solid #3a8db5;
}

#pDiv div {
  line-height: 20px;
}
/* 字体颜色渐变 */
.linearDiv {
  font-weight: bolder;
  background-image: -webkit-linear-gradient(top, #fff, #2880b7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bac_div div:nth-child(1) {
  font-size: 14px;
  position: absolute;
  left: 8%;
  top: 8%;
}
.bac_div div:nth-child(2) {
  font-size: 24px;
  /* text-align: center; */
  position: absolute;
  top: 43%;
  left: 20%;
}
</style>
