<!--
 * @Author: your name
 * @Date: 2022-01-11 13:44:17
 * @LastEditTime: 2025-09-16 11:12:25
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /test/hello-world/src/views/Home.vue
-->
<template>
  <div class="home bigwindow" @click="windowClick">
    <div id="map"></div>
    <!-- <Center :show="show" :centerData="centerData" /> -->
    <!-- <UserCenter
      :title="centerTitle"
      :show="userCenterShow"
      ref="userCenter"
      :detcetorList="detcetorList"
      :userId="centerUserId"
      :total="centerTotal"
      :pageSize="20"
    />
    <OtherCenter
      :title="centerTitle"
      :show="otherCenterShow"
      ref="otherCenter"
      :detcetorList="detcetorList"
      :userId="centerUserId"
      :total="centerTotal"
      :pageSize="20"
    /> -->
    <!-- <PipeSelect
      @transmit="getPipeSelectMessage"
      @closeMediumPressureLine="clearBigWindowsSelectPipe"
    /> -->

    <Top @sel1="sel1" @deviceSearchClick="deviceSearchClick" ref="Top" />
    <Bottom v-if="enterpriseId == -2" @listChange="listChange" ref="Bottom" />

    <!-- 弹框 -->
    <div
      id=""
      style="position: fixed; top: 0; right: 0; width: 100px; height: 100px"
    >
      <!-- <markerInfoWindow></markerInfoWindow> -->
    </div>

    <!-- 头部 -->
    <div class="banner-test">
      <!-- <dv-decoration-5 style="width:100%;height:100%;" /> -->
      <!-- <img
        v-if="this.enterpriseId == -2"
        src="../../assets/images/zibk.png"
        alt=""
      />
      <img v-else src="../../assets/images/20230805152711.png" alt="" /> -->
      {{ $store.state.user.systemSetting.large_screen_header_city_name }}
    </div>

    <!-- 左边 -->
    <div class="leftbar" :style="changeLeftBarStyle">
      <PipeColor :t="true" />
      <leftBar ref="mychild2"></leftBar>
    </div>

    <!-- 右边 -->
    <div class="rightbar" :style="changeRightBarStyle">
      <div class="goSystem" @click="$router.push('/index')">进入管理系统</div>
      <PipeColor
        v-if="lineData.length > 0"
        :b="true"
        @showAnimate="showAnimate"
      />

      <rightBar ref="mychild"></rightBar>
    </div>
    <!-- <img src="../../assets/images/leftbk.svg" alt=""> -->
    <!-- 左上角天气 -->
    <div
      class="weather"
      style="
        position: fixed;
        top: 0;
        margin-top: 25px;
        margin-left: 15px;
        left: 0;
        z-index: 999;
        height: 50px;
      "
    >
      <!-- <iframe src="../../static/weather.html" frameborder="0"></iframe> -->
      <!-- <iframe
        scrolling="no"
        src="https://tianqiapi.com/api.php?style=tz&skin=pitaya&color=fff"
        frameborder="0"
        width="450"
        height="30"
        allowtransparency="true"
      ></iframe> -->
      <!-- <iframe scrolling="no" src="https://yiketianqi.com/api.php?style=ty&skin=pitaya" frameborder="0" width="300" height="75" allowtransparency="true"></iframe> -->
    </div>

    <!-- 右上角时间 -->
    <div
      class="right-time"
      style="
        position: fixed;
        top: 0;
        margin-top: 25px;
        margin-right: 15px;
        right: 0;
        z-index: 999;
        width: 200px;
        height: 0px;
        color: #fff;
      "
    >
      <div style="height: 20px; width: 100%; float: right; font-size: 14px">
        {{ nowDate }}&nbsp;{{ nowtime }}&nbsp;{{ nowweek }}
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { EditorMap } from "@/utils/mapClass/map";
import { LocalLine } from "@/utils/mapClass/mapLoca";
import { mapGetters, mapActions } from "vuex";
import { listDetectorInfo } from "@/api/detector/detectorInfo";
import {
  detectorUserList,
  massMarksDetectorUserList,
  labelsLayerMarksDetectorUserList,
  labelsLayerMarksDUserVillageSafDevInfoMap,
} from "@/api/detector/detectorUser";
import {
  pipeData,
  tiaoyaxiang,
  famen,
  changzhan,
  jiankong,
  user,
  alarmtime,
} from "@/utils/mapClass/config.js";
import {
  getPipe,
  getTyx,
  getFm,
  getCz,
  getVideo,
  getUser,
  getEnterprise,
  userAlarm,
  getTcqDevice,
  getYhq,
  deviceUser,
} from "@/api/bigWindow/getDevice";
import Line from "@/components/bigWindow/Line.vue";
import VideoView from "@/components/bigWindow/VideoView.vue";
import Device from "@/components/bigWindow/Device.vue";
import Cz from "@/components/bigWindow/Cz.vue";
import User from "@/components/bigWindow/User.vue";
import Center from "@/components/bigWindow/Center.vue";
import UserCenter from "@/components/bigWindow/UserCenter.vue";
import OtherCenter from "@/components/bigWindow/OtherCenter.vue";
import Company from "@/components/bigWindow/Company.vue";
import PipeColor from "@/components/bigWindow/PipeColor.vue";
import yhqUser from "@/components/bigWindow/yhqUser.vue";
import { getUserProfile } from "@/api/system/user";

// import markerInfoWindow from './components/markerInfoWindow.vue'
import leftBar from "@/components/bigWindow/leftBar.vue";
import rightBar from "@/components/bigWindow/rightBar.vue";
import Bottom from "./components/Bottom.vue";
import Top from "./components/Top.vue";
import { mapState } from "vuex";
import MediumPressureLineVue from "../../components/bigWindow/MediumPressureLine.vue";
import PipeSelect from "../../components/bigWindow/PipeSelect.vue";
export default {
  name: "Home",
  components: {
    leftBar,
    rightBar,
    // Center,
    UserCenter,
    OtherCenter,
    PipeColor,
    PipeSelect,
    Top,
    Bottom,
  },
  data() {
    return {
      map: null,
      show: false,
      // centerData: null,
      selarr: [1, 2, 3],
      weather: "",
      lower: "",
      higher: "",
      nowDate: "",
      nowweek: "",
      nowtime: "", // 当前日期
      changeRightBarStyle: "",
      changeLeftBarStyle: "",
      typeList: [
        {
          val: 1,
          name: "中燃翔科",
        },
        {
          val: 2,
          name: "中诚然气",
        },
        {
          val: 3,
          name: "中燃韵科",
        },
      ],
      //      2:"调压箱",
      // 3:"阀门",
      // 4:"厂站",
      // 5:"监控",
      // 6:"用户",
      arr: [
        {
          val: 2,
          ischeck: false,
          imgurl: require("@/assets/firstimage/tiaoyaxiang1.png"),
          name: "调压箱",
        },
        {
          val: 3,
          ischeck: false,
          imgurl: require("@/assets/firstimage/famen1.png"),
          name: "阀门井",
        },
        {
          val: 4,
          ischeck: false,
          imgurl: require("@/assets/firstimage/changzhan1.png"),
          name: "场 站",
        },
        {
          val: 6,
          ischeck: false,
          imgurl: require("@/assets/firstimage/user1.png"),
          name: "居民用户",
        },
        {
          val: 61,
          ischeck: false,
          imgurl: require("@/assets/firstimage/syUser1.svg"),
          name: "商业用户",
        },
        {
          val: 5,
          ischeck: false,
          imgurl: require("@/assets/firstimage/jiankong1.png"),
          name: "监 控",
        },
        {
          val: 18,
          ischeck: false,
          imgurl: require("@/assets/firstimage/yhq1.svg"),
          name: "餐饮单位液化气用户",
        },
      ],
      selarr1: [1],
      // 用户的center数据
      detcetorList: [],
      centerUserId: null,
      centerTotal: null,
      userCenterShow: false,
      centerTitle: "",
      queryParams2: {
        enterpriseType: 1,
      },
      // 其他设备的center数据
      // 除了这个值，用来显示隐藏，其他值与user共用
      otherCenterShow: false,

      // 报警轮询timer
      alarmTimer: null,
      geoJsonArr: [],
      // 管道数据
      lineData: [],
    };
  },

  computed: {
    ...mapGetters(["company", "systemSetting", "enterpriseId"]),
    companyLength() {
      return this.typeList.length;
    },
  },
  watch: {
    selarr(newValue) {
      if (newValue.length == this.companyLength) {
        // this.$refs.mychild.choice(0);
        // this.$refs.mychild2.choice(0);
      }
    },
  },
  created() {
    window.addEventListener("resize", this.leftRightBarChange);
    this.leftRightBarChange();
    // changeRightBarStyle
  },

  async mounted() {
    // labelsLayerMarksDUserVillageSafDevInfoMap();
    // console.log(99999999999999)
    //   getPipe().then(res=>{
    //   console.log("成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功",res)
    // }).catch(res=>{
    //   console.log(123)
    // })
    // return;

    const path = eval(this.systemSetting.map_center);
    this.map = new EditorMap(
      "map",
      {
        center: path,
        // mapStyle: "amap://styles/4651b4007b4adfcf5015dd154459ab46",
        mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
        zoom: 12,
      },
      this
    );
    this.LocalLine = new LocalLine(this.map.map);

    getUserProfile().then((response) => {
      var user = response.data;
      if (user.deptId == 13) {
        this.map.setCenter(["117.908541", "39.688353"]);
      }
    });

    console.log("--");
    // 这是测试，用本地数据
    if (this.systemSetting.prod_test === "test") {
      this.addPipeLine(pipeData, Line);
      this.addDevice(tiaoyaxiang, Device);
      this.addDevice(famen, Device);
      this.addDevice(changzhan, Cz);
      this.addDevice(user, User);
      this.addDevice(jiankong, VideoView);
    } else {
      // 调用状态管理器方法获取公司信息每次都要调取,因为每次进来都是更新的
      this.GetCompany();
      // 过滤出来id 6跟12 的不要
      this.typeList = this.company
        .filter((item) => item.conpanyId != 6 && item.conpanyId != 12)
        .map((item) => ({
          val: item.conpanyId,
          name: item.companyName,
        }));
      this.selarr = this.company
        .filter((item) => item.conpanyId != 6 && item.conpanyId != 12)
        .map((item) => item.conpanyId);
      // this.selarr1 = this.arr.map((item) => item.val);
      this.arr.forEach((item) => (item.ischeck = true));
      // getPipe() getTyx() getFm() getCz() getVideo() getUser()
      await this.goMap(getEnterprise, this.addDevice, Company, true);
      // this.goMap(getPipe, this.addPipeLine, Line, true);
      //管道
      this.goMediumPressureLineMap(
        getPipe,
        this.addMediumPipeLine,
        Line,
        MediumPressureLineVue,
        true
      );
      //调压箱
      this.labelsLayerMarksTysGoMap(getTyx, Device, false);
      //阀门井
      this.labelsLayerMarksFmjGoMap(getFm, Device, false);
      //场站
      this.labelsLayerMarksCzGoMap(getCz, Cz, false);
      //监控
      this.labelsLayerMarksVideoGoMap(getVideo, VideoView, false);

      labelsLayerMarksDUserVillageSafDevInfoMap().then((res) => {
        const mapData = res.data[18];
        //this.goMap(getYhq, this.addDevice2, yhqUser, false); //液化气用户上图
        if (this.enterpriseId == -2) {
          this.map.labelsLayerMarksDeviceUserGoMap(mapData, yhqUser, false);
        }

        // 用户要等一下 因为有报警数据
        const mapDataDetector = { 6: res.data[6], 61: res.data[61] };
        this.map.labelsLayerMarksDetectorUserList(
          mapDataDetector,
          User,
          yhqUser,
          false
        );
      });
      // //this.goMap(getYhq, this.addDevice2, yhqUser, false); //液化气用户上图
      // if (this.enterpriseId == -2) {
      //   // this.labelsLayerMarksDeviceUserGoMap(deviceUser, yhqUser, false); //用户上图
      //   this.labelsLayerMarksDeviceUserGoMap(
      //     labelsLayerMarksDUserVillageSafDevInfoMap,
      //     yhqUser,
      //     false
      //   ); //用户上图
      // }

      // // 用户要等一下 因为有报警数据
      // this.labelsLayerMarksDetectorUserGoMap(
      //   labelsLayerMarksDUserVillageSafDevInfoMap,
      //   User,
      //   yhqUser,
      //   false
      // ).then((res) => {
      //   // 先查一下，然后开启定时器
      //   return;
      //   this.userAlarm();
      //   this.alarmTimer = setInterval(() => {
      //     this.userAlarm();
      //     // console.log("查询报警");
      //   }, alarmtime);
      // });
    }
    this.currentTime();
    this.$refs.mychild.choice(this.selarr);
    this.$refs.mychild2.choice(this.selarr);
    // alert(this.enterpriseId);
    // console.log(this.enterpriseId)
  },
  methods: {
    ...mapActions({
      GetCompany: "bigWindowCompany/GetCompany",
    }),
    // 搜索设备上图功能
    deviceSearchClick(device, deviceDetail) {
      console.log(deviceDetail);
      this.map.infowindowClose();
      if (deviceDetail.iconType == 1) {
        // 管道
        const path = eval(deviceDetail.path)[0];
        if (path.length == 0) {
          this.msgError("经纬度不全，无法展示");
          return;
        }
        const lnglat = { lng: path[0], lat: path[1] };

        this.map.addMediumPipeLine(
          deviceDetail,
          Line,
          MediumPressureLineVue,
          true
        );
        this.map.pipeClicked(lnglat);
      } else {
        // 1.阀井 iconType=3
        // 2.调压箱  iconType=2
        // 3.场站  iconType=4
        // 4.居民用户 6
        // 5.商业用户 61
        // 6.工业用户 62
        // 7.监控  5
        // 8.餐饮单位液化气用户 conType=18
        if (!deviceDetail.longitude || !deviceDetail.latitude) {
          this.msgError("经纬度不全，无法展示");
          return;
        }
        const lnglat = [deviceDetail.longitude, deviceDetail.latitude];
        const deviceCom = {
          2: Device,
          3: Device,
          4: Cz,
          6: User,
          61: User,
          62: User,
          5: VideoView,
          18: yhqUser,
        };
        this.map.addDevice(
          deviceDetail,
          deviceCom[deviceDetail.iconType],
          true
        );
        this.map.markerClicked(lnglat, deviceCom[deviceDetail.iconType]);
      }
    },
    leftRightBarChange() {
      const scale = window.innerHeight / 1080;
      let right = 0;
      if (scale >= 1) {
        right = (482 / 2) * (scale - 1) - 20;
      } else {
        right = (482 / 2) * (scale - 1) - 20;
      }

      // console.log("right", right, "scale", scale);
      this.changeRightBarStyle = [
        { right: right + 20 + "px" },
        { transform: `scale(${scale})` },
      ];
      this.changeLeftBarStyle = [
        { left: right + 20 + "px" },
        { transform: `scale(${scale})` },
      ];
    },
    windowClick() {
      this.$refs.Bottom.selectUpClear();
      this.$refs.Top.clearSearchContainer();
    },
    // 点击了 大屏端 管道搜索的清除键
    clearBigWindowsSelectPipe() {
      this.map.infowindowClose();
    },
    getPipeSelectMessage(data, id) {
      let arrArea = data.split(",");
      this.map.setCenter([arrArea[0], arrArea[1]]);
      this.map.filterSelectPipe(
        id,
        MediumPressureLineVue,
        arrArea[0],
        arrArea[1]
      );
    },
    // 管道上图
    addPipeLine(data, component) {
      for (let comp in data) {
        data[comp].forEach((pipe) => {
          this.map.addPipeLine(pipe, component);
        });
      }
    },
    // 管道上图
    addMediumPipeLine(data, component, mediumComponent) {
      console.log("管道的数据", data);

      data.data.forEach((item, index) => {
        if (item.path) {
          const geoJson = {
            type: "FeatureCollection",
            d: item,
            features: [
              {
                type: "Feature",
                properties: {
                  type: item.pipePressure,
                },
                geometry: {
                  type: "LineString",
                  coordinates: eval(item.path),
                },
              },
            ],
          };
          this.geoJsonArr.push(geoJson);
        }
      });

      // this.LocalLine = new LocalLine(this.map.map, );
      this.LocalLine.init(this.geoJsonArr);

      for (let comp in data) {
        data[comp].forEach((pipe) => {
          if (pipe.path) {
            this.map.addMediumPipeLine(pipe, component, mediumComponent);
          }
        });
      }
    },
    // 管道;动效

    showAnimate(bool) {
      console.log(bool);
      let num = 1;
      if (!bool) {
        num = 1;
        this.LocalLine.stop();
      } else {
        num = 0.1;
        this.LocalLine.start();
      }
      this.map.piprOpacityChange(num);
    },
    // 设备上图
    addDevice(data, component, show) {
      for (let comp in data) {
        data[comp].forEach((pipe) => {
          this.map.addDevice(pipe, component, show);
        });
      }
    },
    addDevice2(data, component, show) {
      // console.log("data33333333333333333",data);
      for (let comp in data) {
        data[comp].forEach((pipe) => {
          pipe.iconType = 18;
          this.map.addDevice(pipe, component, show);
        });
      }
    },
    addDevice3(data, component, show) {
      for (let comp in data) {
        data[comp].forEach((pipe) => {
          if (pipe.userType == 1) {
            pipe.iconType = 6;
          } else if (pipe.userType == 2) {
            pipe.iconType = 61;
          }

          this.map.addDevice(pipe, component, show);
        });
      }
    },
    goMediumPressureLineMap(
      httpFunc,
      addFunc,
      component,
      mediumComponent,
      show
    ) {
      return httpFunc().then((res) => {
        // 给用户加icontype
        console.log("管道", res.data);
        this.lineData = res.data;
        // if (res.data && !res.data[0].iconType) {
        res.data.forEach((item) => {
          item.iconType = 1;
        });
        // }

        res.data.forEach((item) => {
          if (item.companyType == 0) {
            item.companyType = 21;
          }
        });

        // 根据数据格式不同，赋值不同，如果是个数组，就用res，如果不是就用res.data
        let config = {};
        if (Array.isArray(res)) {
          config = { data: res };
          // 给视频设备的conpanyType变成null,因为视频不受企业控制
          if (res[0].iconType == 5) {
            res.forEach((item) => {
              item.companyType = null;
            });
          }
        } else {
          config = { data: res.data || res.rows };
        }
        addFunc(config, component, mediumComponent, show);
        return config.iconType;
      });
    },

    labelsLayerMarksDeviceUserGoMap(httpFunc, component, show) {
      return httpFunc().then((res) => {
        const mapData = res.data[18];
        this.map.labelsLayerMarksDeviceUserGoMap(mapData, component, show);
      });
    },
    labelsLayerMarksVideoGoMap(httpFunc, component, show) {
      return httpFunc().then((res) => {
        const mapData = res;
        console.log("Video", mapData);
        this.map.labelsLayerMarksVideoGoMap(mapData, component, show);
      });
    },
    labelsLayerMarksCzGoMap(httpFunc, component, show) {
      return httpFunc().then((res) => {
        const mapData = res.data;
        console.log(
          "场站场站场站场站场站场站场站场站场站场站场站场站",
          mapData
        );
        this.map.labelsLayerMarksCzGoMap(mapData, component, show);
      });
    },
    labelsLayerMarksFmjGoMap(httpFunc, component, show) {
      return httpFunc().then((res) => {
        const mapData = res.data;
        console.log("阀门井", mapData);

        this.map.labelsLayerMarksFmjGoMap(mapData, component, show);
      });
    },
    labelsLayerMarksTysGoMap(httpFunc, component, show) {
      return httpFunc().then((res) => {
        const mapData = res.data;
        console.log("调压箱", mapData);
        this.map.labelsLayerMarksTysGoMap(mapData, component, show);
      });
    },
    labelsLayerMarksDetectorUserGoMap(httpFunc, component1, component2, show) {
      return httpFunc().then((res) => {
        const mapData = { 6: res.data[6], 61: res.data[61] };
        // const mapData =res.data
        console.log("用户用户用户用户用户", mapData);
        this.map.labelsLayerMarksDetectorUserList(
          mapData,
          component1,
          component2,
          show
        );
      });
    },
    goMap(httpFunc, addFunc, component, show) {
      return httpFunc().then((res) => {
        // 根据数据格式不同，赋值不同，如果是个数组，就用res，如果不是就用res.data
        let config = {};
        if (Array.isArray(res)) {
          config = { data: res };
          // 给视频设备的conpanyType变成null,因为视频不受企业控制
          if (res[0].iconType == 5) {
            res.forEach((item) => {
              item.companyType = null;
            });
          }
        } else {
          config = { data: res.data || res.rows };
        }

        addFunc(config, component, show);
        return config.iconType;
      });
    },
    userAlarm() {
      userAlarm().then((res) => {
        console.log("报警", res.data);
        if (res.data.length > 0) {
          // 报警
          res.data.forEach((item) => {
            this.map.deviceAlarm(item);
          });
          // 看看谁告消警
        }
        this.map.relieveAlarm(res.data);
      });
    },

    myCenterShow(boolean) {
      this.show = boolean;
    },
    // centerDataFunc(centerData) {
    //   this.centerData = centerData;
    //   console.log(centerData);
    //   this.show = true;
    // },
    // 更改下方列表
    listChange(arr) {
      console.log("listChange", arr, this.selarr1);
      // return;
      this.selarr = [...arr];
      this.map.allfilter(this.selarr, this.selarr1);
      this.LocalLine.allfilter(this.selarr, this.selarr1);

      this.map.infowindowClose();
      this.show = false;
      this.$refs.mychild2.choice(this.selarr);
      this.$refs.mychild.choice(this.selarr);
    },
    // 睇下列表更改
    // allCompany() {
    //   if (this.selarr.length == 2) {
    //     this.selarr = [];
    //   } else {
    //     this.selarr = this.company
    //       .filter((item) => item.conpanyId != 6 && item.conpanyId != 12)
    //       .map((item) => item.conpanyId);
    //   }

    //   // this.map.companyFilter(this.selarr);
    //   this.map.allfilter(this.selarr, this.selarr1);
    //   this.map.infowindowClose();
    //   this.show = false;
    //   this.$refs.mychild2.choice(this.selarr);
    //   this.$refs.mychild.choice(this.selarr);
    // },
    sel(index, item) {
      this.map.infowindowClose();
      this.show = false;
      const ind = this.selarr.indexOf(item.val);
      if (ind >= 0) {
        this.selarr.splice(ind, 1);
        if (item.val == 3) {
          // this.$refs.mychild.choice(1);
          // this.$refs.mychild2.choice(1);
        } else {
          // this.$refs.mychild.choice(item.val + 1);
          // this.$refs.mychild2.choice(item.val + 1);
        }
      } else {
        this.selarr.push(item.val);
        // this.$refs.mychild.choice(item.val);
        // this.$refs.mychild2.choice(item.val);
      }
      // this.map.companyFilter(this.selarr);
      this.map.allfilter(this.selarr, this.selarr1);
      this.LocalLine.allfilter(this.selarr, this.selarr1);

      this.$refs.mychild2.choice(this.selarr);
      this.$refs.mychild.choice(this.selarr);
    },

    sel1(selarr1) {
      // const ind = this.selarr1.indexOf(item.val);
      // if (ind >= 0) {
      //   this.selarr1.splice(ind, 1);
      // } else {
      //   this.selarr1.push(item.val);
      // }
      this.selarr1 = [...selarr1];
      console.log(this.selarr, this.selarr1);
      this.map.allfilter(this.selarr, this.selarr1);
      this.LocalLine.allfilter(this.selarr, this.selarr1);
    },
    //用户的设备center
    getDetectorInfoList(httpFunc, queryParams, title) {
      console.log(queryParams);
      return httpFunc(queryParams).then((res) => {
        if (res.code == 200) {
          this.detcetorList = res.rows;
          this.centerUserId = queryParams.userId;
          // 总数据
          this.centerTotal = res.total;
          // this.$refs.userCenter.fade = "fade";
          this.otherCenterShow = false;
          this.userCenterShow = true;
          this.centerTitle = title;
          // 传递回去
          return res.code;
        }
      });
    },
    // 调压箱，阀门，场站睇下的设备
    getTcqDevice(queryParams, title) {
      console.log(queryParams);
      return getTcqDevice(queryParams).then((res) => {
        this.detcetorList = res;
        this.centerUserId = queryParams.devId;
        // 总数据
        this.centerTotal = res.length;
        // this.$refs.userCenter.fade = "fade";
        this.userCenterShow = false;

        this.otherCenterShow = true;
        this.centerTitle = title;
        // 传递回去
        return res.code;
      });
    },
    currentTime() {
      setInterval(() => {
        this.formatDate();
      }, 1000);
    },
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowtime = `${hour}:${minute}:${second}`;
      this.nowweek = `${weekArr[week]}`;
      this.nowDate = `${year}年${month}月${day}`;
    },
  },
  // 销毁定时器
  beforeDestroy() {
    window.removeEventListener("resize", this.leftRightBarChange);
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
    }
    // 报警
    if (this.alarmTimer) {
      clearInterval(this.alarmTimer);
    }
  },
};
</script>
<style lang="scss" scoped>
.home {
  position: relative;
  height: 100vh;
}
.goSystem {
  position: absolute;
  z-index: 9999;
  top: -32px;
  right: 20px;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
  // background: #12268e33;
  background: url("~@/assets/firstimage/btm-item.png") no-repeat bottom center;
  width: 128px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  transition: all 0.2s linear;
  pointer-events: auto !important;

  &:hover {
    background: url("~@/assets/firstimage/btm-item-active.png") no-repeat bottom
      center;
    opacity: 0.7;
    pointer-events: auto !important;
  }
}
#map {
  position: absolute;
  top: 0px;
  bottom: 0;
  width: 100%;
}
.banner-test {
  width: 100%;
  height: 85px;
  font-family: "YouSheBiaoTiHei";
  font-size: 45px;
  font-weight: normal;
  line-height: normal;
  // letter-spacing: 0.08em;

  position: relative;
  color: #fff;
  line-height: 85px;
  top: -10px;
  z-index: 998;
  text-align: center;
  background: url("../../assets/firstimage/topbk.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  backdrop-filter: blur(4px);
}
.banner-test img {
  width: 450px;
  margin-top: 25px;
}

.leftbar {
  // width: 585px;
  // height: 93%;
  // height: 1010px;
  height: 970px;
  width: 482px;

  position: fixed;
  // top: 70px;
  top: 50%;
  margin-top: -450px;
  z-index: 999;
  background: url("../../assets/firstimage/le.png");
  background-size: 100% 100%;

  background-repeat: no-repeat;
  margin-left: 2px;
  pointer-events: none;
}
.rightbar {
  // width: 585px;
  // height: 1010px;
  // height: 933px;
  height: 970px;

  width: 482px;
  position: fixed;
  top: 50%;
  margin-top: -450px;
  z-index: 999;
  // right: 861px;
  margin-right: 4px;
  background: url("../../assets/firstimage/ri.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.home-div {
  width: 40%;
  height: 70px;
  position: fixed;
  bottom: 0;
  margin-left: 30%;
  // z-index: 1000;
  img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    bottom: -10px;
  }
}
.listingsSty {
  /* height: 25px; */
  // position: fixed;
  margin-left: 25%;
  width: 50%;
  display: flex;
  justify-content: space-between;
  padding-top: 25px;
  // font-family: 'arialbd';
}
.firsty {
  // width: 15%;
  min-width: 80px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  color: #fff;
  font-size: 16px;
  // float: left;
  // margin-left: 8%;
  cursor: pointer;
  // font-family: 'arialbd';
  -webkit-transition: all 1.5s ease;

  transition: all 1.5s ease;
}
.active {
  color: #00ffff;
  /* background: url(../../assets/mapinages/background.png); */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-shadow: 0 0 20px #00ffff, 0 0 35px #00ffff;
}

.weather-icon {
  float: left;
  width: 30px !important;
  height: 30px !important;
  margin-top: 10px !important;
  margin-left: 10px !important;
  padding-right: 5px;
}
.tttt {
  background-image: -webkit-linear-gradient(
    bottom,
    rgb(134, 185, 233),
    #ffffff
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
