<template>
  <div
    ref="dashboardWrap"
    id="dashboardWrap"
    style="height: 94vh; margin: 0; overflow-y: auto"
    @scroll="handleEventListener"
  >
    <div style="width: 1900px; margin: 0 auto" class="dashboard" id="dashboard">
      <el-row style="height: 100%; padding: 0 30px">
        <el-col :span="7" style="height: 100%">
          <div class="left_content">
            <div class="momdule_box">
              <div class="bumf">
                <img src="./img/newHome/msg.png" alt="" />
                <span class="title">待收通知</span>
                <span class="home_more" @click="toMore('通用功能', '待收通知')"
                  >更多</span
                >
              </div>
              <el-table
                :data="noticeList"
                @row-click="detailFn"
                style="width: 95%; margin: 0 1.5%; background: #b0cbe5"
                empty-text="暂无通知"
                max-height="180px"
              >
                <el-table-column
                  prop="title"
                  label="标题"
                  align="center"
                  :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                  prop="fbrq"
                  align="center"
                  label="发起时间"
                  width="140"
                ></el-table-column>
              </el-table>
            </div>
            <div class="momdule_box">
              <div class="bumf">
                <img src="./img/newHome/ywdb.png" alt="" />
                <span class="title">业务待办</span>
                <span class="home_more" @click="toMore('通用功能', '业务代办')"
                  >更多</span
                >
              </div>
              <el-table
                :data="tzData"
                @row-click="jumpDetails"
                max-height="180px"
                style="width: 95%; margin: 0 1.5%; background: #b0cbe5"
              >
                <el-table-column
                  prop="itemName"
                  label="标题"
                  align="center"
                  :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                  prop="reportDate"
                  align="center"
                  label="发起时间"
                  width="140"
                ></el-table-column>
              </el-table>
            </div>
            <div class="momdule_box player">
              <div class="playWndCon">
                <span style="margin-left: 5px">{{ bfName }}</span>
                <span
                  @click="reFrensh"
                  style="float: right; margin-right: 5px; cursor: pointer"
                  class="iconfont iconshuaxin"
                  >刷新</span
                >
                <div id="playWnd" class="playWnd"></div>
              </div>
              <!-- <img src="./img/newHome/play.png" alt="" /> -->
            </div>
          </div>
        </el-col>
        <el-col :span="10" style="height: 100%">
          <div class="center_map">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="numSty">
                  <div class="numTop">
                    <span style="margin-top: 10px">市级储备粮</span><br />
                    <span
                      >{{
                        Number.isInteger(statisticData.provincial)
                          ? statisticData.provincial
                          : parseFloat(statisticData.provincial).toFixed(3)
                      }}吨</span
                    >
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="numSty">
                  <div class="numTop">
                    <span>区级储备粮</span><br />
                    <span
                      >{{
                        Number.isInteger(statisticData.municipal)
                          ? statisticData.municipal
                          : parseFloat(statisticData.municipal).toFixed(3)
                      }}吨</span
                    >
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="numSty">
                  <div class="numTop">
                    <span>今日入库</span><br />
                    <span
                      >{{
                        Number.isInteger(statisticData.todayIn)
                          ? statisticData.todayIn
                          : parseFloat(statisticData.todayIn).toFixed(3)
                      }}吨</span
                    >
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="numSty">
                  <div class="numTop">
                    <span>今日出库</span><br />
                    <span
                      >{{
                        Number.isInteger(statisticData.todayOut)
                          ? statisticData.todayOut
                          : parseFloat(statisticData.todayOut).toFixed(3)
                      }}吨</span
                    >
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row class="center_map_dt">
              <tjmap v-if="mapFlag" ref="tjmap" :mapData="mapData"></tjmap>
            </el-row>
          </div>
        </el-col>
        <el-col :span="7" style="height: 100%">
          <div class="right_content">
            <div class="momdule_box">
              <div class="bumf">
                <img src="./img/newHome/jrkc.png" alt="" />
                <span class="title">今日库存变动情况</span>
                <span
                  class="home_more"
                  @click="getSituation('今日库存变动情况', 0)"
                  >更多</span
                >
              </div>
              <div class="table-box">
                <el-table
                  :data="inventoryData"
                  style="width: 95%; margin: 0 1.5%; background: #b0cbe5"
                  ref="table1"
                  max-height="180px"
                >
                  <el-table-column
                    prop="kdmc"
                    label="库点名称"
                    align="center"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    prop="inAmount"
                    label="入库数量(吨)"
                    align="center"
                    width="100"
                  >
                    <template slot-scope="scope">
                      <span>{{
                        !parseFloat(scope.row.inAmount)
                          ? ""
                          : Number.isInteger(scope.row.inAmount)
                          ? scope.row.inAmount
                          : parseFloat(scope.row.inAmount).toFixed(3)
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="outAmount"
                    align="center"
                    label="出库数量"
                    width="140"
                  >
                    <template slot-scope="scope">
                      <span>{{
                        !parseFloat(scope.row.outAmount)
                          ? ""
                          : Number.isInteger(scope.row.outAmount)
                          ? scope.row.outAmount
                          : parseFloat(scope.row.outAmount).toFixed(3)
                      }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="momdule_box">
              <div class="bumf">
                <img src="./img/newHome/jrkn.png" alt="" />
                <span class="title">今日库内作业情况</span>
                <span
                  class="home_more"
                  @click="getSituation('今日库内作业情况', 1)"
                  >更多</span
                >
              </div>
              <div class="table-box">
                <el-table
                  :data="jobData"
                  style="width: 95%; margin: 0 1.5%; background: #b0cbe5"
                  ref="table2"
                  max-height="180px"
                >
                  <el-table-column
                    prop="kdmc"
                    label="库点名称"
                    align="center"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    prop="cfmc"
                    label="仓号"
                    align="center"
                    width="100"
                  ></el-table-column>
                  <el-table-column
                    prop="jobName"
                    align="center"
                    label="作业内容"
                    width="140"
                  ></el-table-column>
                </el-table>
              </div>
            </div>
            <div class="momdule_box">
              <div class="bumf">
                <img src="./img/newHome/yjbj.png" alt="" />
                <span class="title">预警报警信息</span>
                <span class="home_more" @click="jumpView('预警报警')"
                  >更多</span
                >
              </div>
              <div class="earlyWarning">
                <div
                  class="items"
                  v-for="item in imgList"
                  :key="item.id"
                  @click="toDetail(item.url)"
                >
                  <el-badge
                    :value="item.value"
                    :max="99"
                    :is-dot="
                      item.name == 'wsdwarning' || item.name == 'devicewarning'
                    "
                    :hidden="item.value == 0"
                    class="item warning_item"
                  >
                    <img :src="item.imgUrl" class="warning_img" alt="" />
                  </el-badge>
                  <span class="warning_title">{{ item.title }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="60%"
    >
      <div class="table_box" id="dialogTable">
        <el-table
          :data="dialogList"
          style="width: 100%; margin: 10px auto 0"
          ref="table"
          max-height="500px"
        >
          <el-table-column type="index" align="center" width="70">
          </el-table-column>
          <el-table-column
            prop="kdmc"
            label="库点名称"
            align="center"
            width="240"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="inAmount"
            label="入库数量(吨)"
            align="center"
            v-if="dialogTitle == '今日库存变动情况'"
          >
            <template slot-scope="scope">
              <span>{{
                !parseFloat(scope.row.inAmount)
                  ? ""
                  : Number.isInteger(scope.row.inAmount)
                  ? scope.row.inAmount
                  : parseFloat(scope.row.inAmount).toFixed(3)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="outAmount"
            align="center"
            label="出库数量"
            v-if="dialogTitle == '今日库存变动情况'"
          >
            <template slot-scope="scope">
              <span>{{
                !parseFloat(scope.row.outAmount)
                  ? ""
                  : Number.isInteger(scope.row.outAmount)
                  ? scope.row.outAmount
                  : parseFloat(scope.row.outAmount).toFixed(3)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="cfmc"
            label="仓号"
            align="center"
            v-if="dialogTitle == '今日库内作业情况'"
          ></el-table-column>
          <el-table-column
            prop="jobName"
            align="center"
            label="作业内容"
            v-if="dialogTitle == '今日库内作业情况'"
          ></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="iconfont iconfanhui"
          size="small"
          @click="dialogVisible = false"
          >返回</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import "@/style/theme/_page.scss";
import {
  todoList,
  getHomePage,
  get_random_one,
  alarmStatistic1,
  alarmStatistic2,
} from "@/api/taskReport/index";
import { pageListNew } from "@/api/announcement/index";
import tjmap from "./tjmap";

export default {
  name: "dashboard",
  components: { tjmap },
  data() {
    return {
      tzData: [], //业务待办
      inventoryData: [], //库存变动情况
      jobData: [], //库内作业情况
      noticeList: [], //待收通知

      statisticData: [], //统计数据
      mapData: [], //地图数据
      mapFlag: false,
      oWebControl: "",
      bfId: "",
      bfName: "",
      bj: "",
      playWndCnWidth: "508",
      playWndCnHeight: "210",
      imgList: [
        {
          id: "01",
          name: "wsdwarning",
          title: "温湿度预警",
          imgUrl: require("./img/alarmMsg/alarm01.png"),
          url: "/earlyWarning/temp/index",
          value: 0,
        },
        {
          id: "02",
          name: "devicewarning",
          title: "设备故障",
          imgUrl: require("./img/alarmMsg/alarm02.png"),
          url: "/earlyWarning/camera/index",
          value: 0,
        },
        {
          id: "03",
          name: "inventoryalarm",
          title: "库存超限报警",
          imgUrl: require("./img/alarmMsg/alarm03.png"),
          url: "/earlyWarning/overrunWarning/index",
          value: 0,
        },
        {
          id: "04",
          name: "overduealarm",
          title: "存储超限预警",
          imgUrl: require("./img/alarmMsg/alarm04.png"),
          url: "/earlyWarning/storageOverrunWarningup/index",
          value: 0,
        },
        {
          id: "05",
          name: "emptyalarm",
          title: "空仓预警",
          imgUrl: require("./img/alarmMsg/alarm05.png"),
          url: "/earlyWarning/shortPositionWarningup/index",
          value: 0,
        },
        {
          id: "06",
          name: "jkqbj",
          title: "架空期预警",
          imgUrl: require("./img/alarmMsg/alarm06.png"),
          url: "/earlyWarning/overheadWarning/index",
          value: 0,
        },
        {
          id: "07",
          name: "jybgczq",
          title: "检验报告超期预警",
          imgUrl: require("./img/alarmMsg/alarm07.png"),
          url: "/earlyWarning/inspectionReport/index",
          value: 0,
        },
        {
          id: "08",
          name: "prealarm",
          title: "内控预警",
          imgUrl: require("./img/alarmMsg/alarm08.png"),
          url: "/earlyWarning/internalControlWarning/index",
          value: 0,
        },
        {
          id: "09",
          name: "wgbj",
          title: "违规预警",
          imgUrl: require("./img/alarmMsg/alarm09.png"),
          url: "/earlyWarning/violationWarningup/index",
          value: 0,
        },
        {
          id: "10",
          name: "alarmset",
          title: "报警阈值设置",
          imgUrl: require("./img/alarmMsg/alarm10.png"),
          url: "/earlyWarning/alarmThreshold/index",
          value: 0,
        },
      ],
      systeamList: [
        {
          value: "cbl",
          name: "储备粮管理",
        },
        {
          value: "ywjc",
          name: "业务检查",
        },
        {
          value: "zj",
          name: "质量管理",
        },
        {
          value: "qzzrz",
          name: "粮食安全区长责任制考核",
        },
        {
          value: "jy",
          name: "粮油交易",
        },
        {
          value: "pm",
          name: "项目管理",
        },
        {
          value: "xxsh",
          name: "信息审核备案",
        },
        {
          value: "safe",
          name: "安全生产",
        },
      ],
      dialogVisible: false,
      dialogTitle: "",
      dialogList: [],
    };
  },
  created() {
    this.getStatistic();
  },
  methods: {
    reFrensh() {
      get_random_one({}).then((res) => {
        // let data = res.data;
        this.bfName = res.data.kdmc + res.data.stdname;
        this.bfId = res.data.stdcode;
        // this.bfId = data[0].jkdbm;
        this.ylFn();
      });
    },
    jkList() {
      this.bj = "1x1";
      get_random_one({}).then((res) => {
        // let data = res.data;
        this.bfName = res.data.kdmc + res.data.stdname;
        this.bfId = res.data.stdcode;
        // this.bfId = data[0].jkdbm;
        this.camera();
      });
    },
    camera() {
      var that = this;
      this.bj = "1x1";
      that.oWebControl = new WebControl({
        szPluginContainer: "playWnd",
        iServicePortStart: 15900,
        iServicePortEnd: 15909,
        cbConnectSuccess: function () {
          that.oWebControl
            .JS_StartService("window", {
              dllPath: "./VideoPluginConnect.dll",
            })
            .then(
              function () {
                that.oWebControl
                  .JS_CreateWnd(
                    "playWnd",
                    that.playWndCnWidth,
                    that.playWndCnHeight
                  )
                  .then(function () {
                    that.oWebControl
                      .JS_RequestInterface({
                        //要显示视频预览或回放的窗口，需要对插件进行初始化，初始化接口为：JS_RequestInterface
                        funcName: "init",
                        argument: JSON.stringify({
                          appkey: "24012924",
                          secret: "uHzSYRUJpnCVCJSIEUWc",
                          ip: "10.69.3.1",
                          playMode: 0, // 0预览   1回放
                          port: 443,
                          snapDir: "D:SnapDir", //抓图存储路径
                          videoDir: "D:VideoDir", //录像路径
                          layout: that.bj,
                          enableHTTPS: 1, //是否启用HTTPS协议 0:不启用  1:启用
                          encryptedFields: "",
                        }),
                      })
                      .then(function (oData) {
                        //预览

                        that.ylFn();
                      });
                  })
                  .catch((res) => {
                    console.log(res);
                  });
              },
              function () {}
            );
        },
        cbConnectError: function () {
          that.oWebControl = null;
          $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
        },
        cbConnectClose: function () {
          that.oWebControl = null;
        },
      });
    },
    handleEventListener() {
      console.log("8809");
      let that = this;
      // that.$nextTick(() => {
      //对粮温弹框监听滚动事件（使粮温视频随着滚动条的滚动，始终在盒子里）
      // document.getElementById("playWnd").addEventListener(
      //   "scroll",
      //   () => {
      console.log("playWnd");
      that.playWndCnWidth = document.getElementById("playWnd").offsetWidth;
      if (that.oWebControl != null) {
        that.oWebControl.JS_Resize(that.playWndCnWidth, 210);
        console.log("6666");
        that.scrollFun();
      }
      // },
      // false;
      // );
      // });
    },
    scrollFun() {
      var iLastCoverLeft = 0;
      var iLastCoverTop = 0;
      var iLastCoverRight = 0;
      var iLastCoverBottom = 0;
      var iWidth = $(window).width();
      var iHeight = $(window).height();
      var oDivRect = $("#playWnd").get(0).getBoundingClientRect();

      var iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0;
      var iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0;
      var iCoverRight =
        oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0;
      var iCoverBottom =
        oDivRect.bottom - iHeight > 0
          ? Math.round(oDivRect.bottom - iHeight)
          : 0;

      iCoverLeft =
        iCoverLeft > this.playWndCnWidth ? this.playWndCnWidth : iCoverLeft;
      iCoverTop = iCoverTop > 110 ? 110 : iCoverTop;
      iCoverRight =
        iCoverRight > this.playWndCnWidth ? this.playWndCnWidth : iCoverRight;
      iCoverBottom = iCoverBottom > 210 ? 210 : iCoverBottom;

      if (iLastCoverLeft != iCoverLeft) {
        iLastCoverLeft = iCoverLeft;
        this.oWebControl.JS_SetWndCover("left", iCoverLeft);
      }
      if (iLastCoverTop != iCoverTop) {
        iLastCoverTop = iCoverTop;
        this.oWebControl.JS_SetWndCover("top", iCoverTop);
      }
      if (iLastCoverRight != iCoverRight) {
        iLastCoverRight = iCoverRight;
        this.oWebControl.JS_SetWndCover("right", iCoverRight);
      }
      if (iLastCoverBottom != iCoverBottom) {
        iLastCoverBottom = iCoverBottom;
        this.oWebControl.JS_SetWndCover("bottom", iCoverBottom);
      }
    },
    //预览
    ylFn() {
      var that = this;
      that.oWebControl
        .JS_RequestInterface({
          funcName: "startPreview",
          argument: JSON.stringify({
            // cameraIndexCode: "34142100001310000294",
            cameraIndexCode: this.bfId,
            streamMode: 0,
            transMode: 1,
            gpuMode: 0,
          }),
        })
        .then(function (oData) {});
    },
    // 更多
    toMore(MenuName, type) {
      getLeftMenuList(MenuName); //获取当前对应的左侧菜单
      if (type == "待收通知") {
        this.$router.push({
          path: "/publicfunction/announcementJs",
        });
      } else if (type == "业务代办") {
        this.$router.push({
          path: "/publicfunction/toDoThings",
        });
      }
    },
    getSituation(title, type) {
      this.dialogVisible = true;
      this.dialogTitle = title;
      if (type == 0) {
        this.dialogList = this.inventoryData;
      } else {
        this.dialogList = this.jobData;
      }
    },
    getSysteamName(code) {
      let name = "";
      this.systeamList.forEach((item) => {
        if (item.value == code) {
          name = item.name;
        }
      });
      return name;
    },
    getResCode(MenuList, row) {
      MenuList.map((item) => {
        if (row.itemUrl.indexOf("detail") > -1) {
          let detailUrl = row.itemUrl;
          detailUrl = detailUrl.split("/").slice(0, -1).join("/");
          detailUrl = detailUrl + "/index";
          if (detailUrl === item.resourceUrl) {
            if (item.children.length > 0) {
              this.getResCode(item.children, row);
            } else {
              sessionStorage.setItem("resourceCode", item.resourceCode);
              return item.resourceCode;
            }
          } else {
            if (item.children && item.children.length > 0) {
              this.getResCode(item.children, row);
            } else {
              return;
            }
          }
        } else {
          if (row.itemUrl === item.resourceUrl) {
            sessionStorage.setItem("resourceCode", item.resourceCode);
            return item.resourceCode;
          } else {
            if (item.children && item.children.length > 0) {
              this.getResCode(item.children, row);
            } else {
              return;
            }
          }
        }
      });
    },
    // 业务代办详情
    jumpDetails(row) {
      if (row.sysCode == "ywjc") {
        if (row.itemStatusName == "待分配" || row.itemStatusName == "待检查") {
          let nameStrArray = row.itemId.split("-");
          let rwId = nameStrArray[0];
          let jgId = nameStrArray[0];
          let jhId = nameStrArray[1];
          let idKeyName = row.itemQuery.idKey;
          row.itemQuery = JSON.parse(
            JSON.stringify(row.itemQuery).replace(/idKey/g, row.itemQuery.idKey)
          );

          switch (idKeyName) {
            case "rwId":
              row.itemQuery[idKeyName] = rwId;
              if (row.itemQuery.jhId) {
                row.itemQuery.jhId = jhId;
              }
              break;
            case "jhId":
              row.itemQuery[idKeyName] = jhId;
              if (row.itemQuery.rwId) {
                row.itemQuery.rwId = rwId;
              }
              break;
            case "jgId":
              row.itemQuery[idKeyName] = jgId;
              if (row.itemQuery.rwId) {
                row.itemQuery.rwId = rwId;
              }
              break;
          }
        } else {
          if (row.itemStatusName == "待企业上传") {
            let nameStrArray = row.itemId.split("-");
            let jgId = nameStrArray[0];
            let rwId = nameStrArray[0];
            row.itemQuery = JSON.parse(
              JSON.stringify(row.itemQuery.management).replace(
                /idKey/g,
                row.itemQuery.management.idKey
              )
            );
            row.itemQuery.object = JSON.stringify({ jgId: jgId });
            if (row.itemQuery.rwId) {
              row.itemQuery.rwId = rwId;
            }
            row.itemUrl = row.itemUrl.split(",")[1];
          } else {
            let nameStrArray = row.itemId.split("-");
            row.itemId = nameStrArray[0];
            if (row.itemQuery) {
              let idKeyName = row.itemQuery.idKey;
              row.itemQuery = JSON.parse(
                JSON.stringify(row.itemQuery).replace(
                  /idKey/g,
                  row.itemQuery.idKey
                )
              );
              row.itemQuery[idKeyName] = row.itemId;
            }
          }
        }
      } else if (row.sysCode == "qzzrz") {
        row.handlingTime = this.dateFormat(new Date());
        row.handler = JSON.parse(sessionStorage.getItem("userInfo")).userName;
        row.handlerId = JSON.parse(sessionStorage.getItem("userInfo")).userId;
        // modificationFn(row).then((res) => {});
      } else {
        if (row.sysCode == "jy" && row.itemId.indexOf("-") != -1) {
          row.itemId = row.itemId.substring(0, row.itemId.indexOf("-"));
        }
        if (
          row.sysCode == "cbl" &&
          row.itemId.indexOf("-") != -1 &&
          row.itemId.indexOf(",") == -1
        ) {
          row.itemId = row.itemId.substring(0, row.itemId.indexOf("-"));
        }
        if (
          row.sysCode == "xxsh" &&
          row.itemId.indexOf("-") != -1 &&
          row.itemId.indexOf(",") == -1
        ) {
          row.itemId = row.itemId.substring(0, row.itemId.indexOf("-"));
        }
        if (row.sysCode == "safe" && row.itemId.indexOf("-") != -1) {
          row.itemId = row.itemId.substring(0, row.itemId.indexOf("-"));
        }
        if (row.itemQuery) {
          if (row.itemId.indexOf(",") != -1) {
            row.itemId = row.itemId.split(",");
            row.itemQuery.idKey = row.itemQuery.idKey.split(",");
            row.itemId.forEach((item, index) => {
              if (item.indexOf("-") != -1) {
                row.itemId[index] = item.substring(0, item.indexOf("-"));
              }
            });
            row.itemQuery.idKey.map((item, index) => {
              row.itemQuery[row.itemQuery.idKey[index]] = row.itemId[index];
            });
          } else {
            row.itemQuery[row.itemQuery.idKey] = row.itemId;
          }
        }
      }
      getLeftMenuList(this.getSysteamName(row.sysCode));
      let MenuList = [];
      MenuList = JSON.parse(sessionStorage.getItem("topMenuList"));
      this.getResCode(MenuList, row);
      console.log(
        sessionStorage.getItem("resourceCode"),
        "lllllllllllllllllk-----"
      );
      sessionStorage.setItem("searchData", null);
      let query = "";
      console.log(row, "row");
      if (row.itemUrl) {
        if (row.itemQuery) {
          for (let key in row.itemQuery) {
            query += key + "=" + row.itemQuery[key] + "&";
          }
          window.location.href =
            location.host == "localhost:9000"
              ? "/#" + row.itemUrl + "?" + query
              : "/web/portal/#" + row.itemUrl + "?" + query;
        } else {
          window.location.href =
            location.host == "localhost:9000"
              ? "/#" + row.itemUrl
              : "/web/portal/#" + row.itemUrl;
        }
      }
    },
    // 预警报警更多
    jumpView(name) {
      getLeftMenuList(name);
      this.getFirstMenu(JSON.parse(sessionStorage.getItem("leftMenuList")));
      console.log(JSON.parse(sessionStorage.getItem("topMenuList")), "list");
      window.location.href =
        location.host == "localhost:9000"
          ? "/#" + this.menuUrl
          : "/web/portal/#" + this.menuUrl;
    },
    getFirstMenu(arr) {
      if (arr[0].children.length) {
        this.getFirstMenu(arr[0].children);
      } else {
        this.menuUrl = arr[0].resourceUrl;
      }
    },
    // 业务代办
    getList() {
      if (!sessionStorage.getItem("orgCode")) {
        let retimer = setTimeout(() => {
          this.getList();
        }, 2000);
      }
      // this.listLoading = true;
      let data = {
        pageSize: "4",
        pageNum: "1",
        itemName: "",
        submitter: "",
        receiver: sessionStorage.getItem("userCode"),
        orgCode: sessionStorage.getItem("orgCode"),
      };
      todoList(data).then((res) => {
        this.tzData = res.items;
      });
    },
    // 待收通知
    getNoticeList() {
      let params = {
        page: 1,
        size: 4,
      };
      pageListNew(
        { jsdwbm: sessionStorage.getItem("orgCode"), isjs: 0 },
        params
      )
        .then((res) => {
          this.noticeList = res.items;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 首页数据
    getHomeDate() {
      getHomePage().then((res) => {
        this.inventoryData = res.data.todayInventoryList;
        this.jobData = res.data.todayJobList;
        this.statisticData = res.data.quantityStatistic;
        res.data.mapAreaData.map((item) => {
          item.name = item.groupName;
          // item.value = 123;
        });
        this.mapData = res.data.mapAreaData;
        this.mapFlag = true;
        // this.$refs.tjmap.
      });
    },
    // 自动滚动
    autoScrollInventory() {
      const table = this.$refs.table1;
      const divData = table.bodyWrapper;
      divData.onmouseover = function () {
        clearInterval(timer1);
      };
      divData.onmouseout = function () {
        start();
      };
      let timer1;
      function start() {
        // if (divData.clientHeight >= divData.scrollHeight) {
        //   return;
        // }
        timer1 = setInterval(() => {
          divData.scrollTop += 1;
          if (
            divData.clientHeight + divData.scrollTop ==
            divData.scrollHeight
          ) {
            divData.scrollTop = 0;
          }
        }, 50);
      }
      start();
    },
    autoScrollJob() {
      const table = this.$refs.table2;
      const divData = table.bodyWrapper;
      divData.onmouseover = function () {
        clearInterval(timer2);
      };
      divData.onmouseout = function () {
        start();
      };
      let timer2;
      function start() {
        // if (divData.clientHeight >= divData.scrollHeight) {
        //   return;
        // }
        timer2 = setInterval(() => {
          divData.scrollTop += 1;
          if (
            divData.clientHeight + divData.scrollTop ==
            divData.scrollHeight
          ) {
            divData.scrollTop = 0;
          }
        }, 50);
      }
      start();
    },
    // 待收通知跳转详情
    detailFn(row) {
      if (row.isjs == 1) {
        this.$router.push({
          path: "/publicfunction/announcementDetailJs",
          query: { action: "详情", id: row.id },
        });
      } else {
        this.$router.push({
          path: "/publicfunction/announcementDetailJs",
          query: { action: "接收", id: row.id },
        });
      }
    },
    // 预警报警跳转
    toDetail(url) {
      getLeftMenuList("预警报警");
      if (url) {
        window.location.href =
          location.host == "localhost:9000"
            ? "/#" + url
            : "/web/portal/#" + url;
      } else {
        console.log("error!There are currently no pages available.");
      }
    },
    // 预警报警信息统计
    async getStatistic() {
      let objNew = {};
      let obj1 = {};
      let obj2 = {};
      await alarmStatistic1().then((res) => {
        obj1 = res.data;
      });
      await alarmStatistic2().then((res) => {
        obj2 = res.data;
      });
      objNew = { ...obj1, ...obj2 };
      this.imgList.forEach((item) => {
        if (item.name == "wsdwarning") {
          item.value = objNew.wsdwarning;
        } else if (item.name == "devicewarning") {
          item.value = objNew.devicewarning;
        } else if (item.name == "inventoryalarm") {
          item.value = objNew.inventoryalarm;
        } else if (item.name == "overduealarm") {
          item.value = objNew.overduealarm;
        } else if (item.name == "emptyalarm") {
          item.value = objNew.emptyalarm;
        } else if (item.name == "jkqbj") {
          item.value = objNew.jkqbj;
        } else if (item.name == "jybgczq") {
          item.value = objNew.jybgczq;
        } else if (item.name == "prealarm") {
          item.value = objNew.prealarm;
        } else if (item.name == "wgbj") {
          item.value = objNew.wgbj;
        }
      });
    },
  },
  mounted() {
    setTimeout(() => {
      this.getList();
      this.getNoticeList();
      this.getHomeDate();
    }, 500);
    console.log("888----------=========");
    this.autoScrollInventory();
    this.autoScrollJob();
    // window.addEventListener("scroll", this.scrolling);
    window.addEventListener("scroll", this.handleEventListener);
    //监控视频
    if (window.location.host != "101.36.160.140:8097") {
      this.jkList();
    }
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleEventListener);

    this.oWebControl.JS_Disconnect().then(
      function () {
        // 断开与插件服务连接成功
      },
      function () {
        // 断开与插件服务连接失败
      }
    );
    this.oWebControl
      .JS_RequestInterface({
        funcName: "destroyWnd",
      })
      .then(function (oData) {});
    // clearInterval(this.timer);
    clearInterval(this.timer1);
    clearInterval(this.timer2);
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}
// ------局内公文 数据统计 ----/-----
#dashboardWrap {
  background-repeat: no-repeat;
  background-image: url("./img/newHome/bj.png") !important;
  background-size: 100% 100%;
}
.line {
  width: 100%;
  height: 10px;
  border: none;
  background: pink;
}
.left_content,
.right_content {
  height: 100%;
  padding-top: 10px;
}
/deep/ .momdule_box {
  height: 230px;
  // border-radius: 10px;
  margin-bottom: 10px;
  // background-color: #ffffff;
  overflow: hidden;
  background-image: url("./img/newHome/title.png");
  background-size: 100% 105%;
  .el-table {
    border-bottom: 0;
    transition: all 2s linear;
    height: 100%;
  }
  .has-gutter {
    background-repeat: no-repeat;
    background-image: url("./img/newHome/table-title.png") !important;
    background-size: 100% 100%;
    // color: #fff;
  }
  .has-gutter .cell {
    color: #fff;
  }
  .el-table thead tr th {
    padding: 0 !important;
    height: 30px !important;
    background: transparent !important;
  }
  .el-table th,
  .el-table tr {
    background-color: transparent !important;
  }
  .el-table td {
    border-bottom: 1px dashed #cec9c9 !important;
  }
  .el-table .el-table__body tr {
    cursor: pointer;
  }
  .bumf {
    height: 35px;
    line-height: 35px;
    color: #ffffff;
    font-size: 16px;
    padding-left: 15px;
    // background-repeat: no-repeat;
    // background-color: #eff7ff;
    // background-image: url("./img/newHome/title.png");
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;
    img {
      margin-top: -5px;
      margin-right: 4px;
    }
  }
  .bumf .home_more {
    float: right;
    font-weight: normal;
    font-size: 14px;
    padding-right: 15px;
    position: absolute;
    cursor: pointer;
    top: 7px;
    right: 6px;
    color: #56666e;
  }
}
.table-box {
  height: 195px;
  .is-scrolling-none {
    overflow: hidden;
    overflow-y: auto;
    overflow-x: scroll;
  }
  .is-scrolling-none::-webkit-scrollbar {
    display: none;
  }
  .el-table--scrollable-y ::-webkit-scrollbar {
    display: none;
  }
  .el-table--scrollable-x ::-webkit-scrollbar {
    display: none;
  }
}
.center_map {
  border-radius: 4px;
  // width: 100%;
  height: 770px;
  margin: 10px;
  // padding: 20px;
}
.center_map_dt {
  height: 100%;
  background-repeat: no-repeat;
  // background-color: #eff7ff;
  background-image: url("./img/newHome/map_bg.png");
  background-size: 87%;
  background-position: 40px 10px;
}
.player {
  width: 99%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #706e8c;
}

/deep/ .earlyWarning {
  width: 100%;
  height: 195px;
  display: flex;
  flex-flow: row wrap;
  .items {
    width: 20%;
    height: 90px;
    margin: 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
    .warning_img {
      width: 60px;
    }
    .warning_title {
      display: inline-block;
      text-align: center;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0 !important;
    }
    &:hover {
      background: rgb(221, 234, 244);
    }
  }
  .warning_item {
    margin-top: 0;
    margin-right: 0;
  }
  .el-badge__content.is-fixed {
    position: absolute;
    top: 12px;
    right: 16px;
    -webkit-transform: translateY(-50%) translateX(100%);
    transform: translateY(-50%) translateX(100%);
  }
  .el-badge__content.is-dot {
    height: 12px;
    width: 12px;
  }
}
.numSty {
  width: 100%;
  height: 66px;
  background: url(./img/center-num.png);
  background-size: 100%;
  text-align: center;

  // vertical-align: middle;
  // line-height: 66px;
}
.numTop {
  padding-top: 10px;
  font-size: 16px;
  font-weight: 550;
}

.playWndCon {
  background-color: black;
  width: 100%;
  /* height: 100%; */
  /* margin: 0 auto; */
  color: #fff;
  overflow: hidden;
}
.playWnd {
  width: 100%;
  height: 210px;
  /* margin: 0 auto; */
  /* position: relative; */
  // margin: 0 auto;
}
// .spList {
//   font-size: 28px;
//   /* margin: 0 auto; */
//   text-align: center;

//   color: #fff;
// }
#dashboardWrap /deep/.el-table__body td {
  // padding: 0;
  height: 33px !important;
}
#dialogTable /deep/.el-table__body td {
  // height: 500px;
  height: 50px !important;
}
</style>
