index.vue

<!--
 * @Author: your name
 * @Date: 2022-01-11 13:44:17
 * @LastEditTime: 2022-08-31 14:20:03
 * @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">
    <div class="goSystem" @click="$router.push('/index')">进入管理系统</div>
    <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"
    />
    <PipeColor />
    <!-- 底部按钮 -->
    <div class="home-div">
      <img src="@/assets/mapinages/bottombanner.png" alt="" style="" />
      <div class="listingsSty fangy">
        <div
          @click="allCompany"
          :class="selarr.length == companyLength ? 'active' : ''"
          class="firsty"
        >
          全部
        </div>
        <div
          class="firsty"
          :class="selarr.indexOf(item.val) >= 0 ? 'active' : ''"
          v-for="(item, index) in typeList"
          :key="item.val"
          @click="sel(index, item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>

    <!-- 设备按钮 -->
    <div
      :class="{
        'typelist-div': windowInnerWidth > 1300,
        'typelist-divZ': windowInnerWidth < 1300,
      }"
    >
      <div
        class="list"
        v-for="(item, index) in arr"
        :key="index"
        :class="selarr1.indexOf(item.val) >= 0 ? 'active' : ''"
        @click="sel1(index, item)"
      >
        <img
          :src="item.imgurl"
          style="margin-top: 2px; float: left; margin-right: 3px"
        />
        {{ item.name }}
      </div>
    </div>

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

    <!-- 头部 -->
    <div class="banner-test" :style="{height:windowInnerWidth>1300?'85px':'70px'}">
      <!-- <dv-decoration-5 style="width:100%;height:100%;" /> -->
      <img src="@/assets/mapinages/tb.png" alt="" />
    </div>

    <!-- 左边 -->
    <div
      class="leftbar"
      :style="{ width: windowInnerWidth > 1300 ? '470px' : '300px' }"
    >
      <leftBar v-if="windowInnerWidth > 1300" ref="mychild2"></leftBar>
      <leftBarZ v-else ref="mychild2"></leftBarZ>
    </div>
    <!-- 右边 -->
    <div
      class="rightbar"
      :style="{ width: windowInnerWidth > 1300 ? '470px' : '300px' }"
    >
      <rightBar v-if="windowInnerWidth > 1300" ref="mychild"></rightBar>
      <rightBarZ v-else ref="mychild"></rightBarZ>
    </div>

    <!-- 左上角天气 -->
    <div
      class="weather"
      style="
        position: fixed;
        top: 0;
        margin-top: 10px;
        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=339CC9"
        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: 10px;
        margin-right: 15px;
        right: 0;
        z-index: 999;
        width: 200px;
        height: 50px;
        color: #339cc9;
      "
    >
      <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 { mapGetters, mapActions } from "vuex";
import { listDetectorInfo } from "@/api/detector/detectorInfo";
import { detectorUserList } 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,
} 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 markerInfoWindow from './components/markerInfoWindow.vue'
import leftBar from "@/components/bigWindow/leftBar.vue";
import leftBarZ from "@/components/bigWindow/leftBarZ.vue";
import rightBar from "@/components/bigWindow/rightBar.vue";
import rightBarZ from "@/components/bigWindow/rightBarZ.vue";
export default {
  name: "Home",
  components: {
    leftBar,
    leftBarZ,
    rightBar,
    rightBarZ,
    // Center,
    UserCenter,
    OtherCenter,
    PipeColor,
  },
  data() {
    return {
      map: null,
      show: false,
      // centerData: null,
      selarr: [1, 2, 3],
      weather: "",
      lower: "",
      higher: "",
      nowDate: "",
      nowweek: "",
      nowtime: "", // 当前日期

      typeList: [
        {
          val: 1,
          name: "中燃翔科",
        },
        {
          val: 2,
          name: "中诚然气",
        },
        {
          val: 3,
          name: "中燃韵科",
        },
      ],
      //      2:"调压箱",
      // 3:"阀门",
      // 4:"厂站",
      // 5:"监控",
      // 6:"用户",
      arr: [
        {
          val: 2,
          ischeck: false,
          imgurl: require("@/assets/image/tyxsub.svg"),
          name: "调压箱",
        },
        {
          val: 3,
          ischeck: false,
          imgurl: require("@/assets/image/fmjsub.svg"),
          name: "阀门井",
        },
        {
          val: 4,
          ischeck: false,
          imgurl: require("@/assets/image/czsub.svg"),
          name: "场 站",
        },
        {
          val: 6,
          ischeck: false,
          imgurl: require("@/assets/image/usersub.svg"),
          name: "用 户",
        },
        {
          val: 5,
          ischeck: false,
          imgurl: require("@/assets/image/jksub.svg"),
          name: "监 控",
        },
      ],
      selarr1: [],
      // 用户的center数据
      detcetorList: [],
      centerUserId: null,
      centerTotal: null,
      userCenterShow: false,
      centerTitle: "",

      // 其他设备的center数据
      // 除了这个值，用来显示隐藏，其他值与user共用
      otherCenterShow: false,

      // 报警轮询timer
      alarmTimer: null,
      windowInnerWidth: 0,
    };
  },

  computed: {
    ...mapGetters(["company", "systemSetting"]),
    companyLength() {
      return this.typeList.length;
    },
  },
  watch: {
    selarr(newValue) {
      if (newValue.length == this.companyLength) {
        // this.$refs.mychild.choice(0);
        // this.$refs.mychild2.choice(0);
      }
    },
  },
  created() {
    this.windowInnerWidth = window.innerWidth;
  },
  async mounted() {
    // 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/f71d3a3d73e14f5b2bf5508bf1411758",
        zoom: 14.5,
      },
      this
    );
    // 这是测试，用本地数据
    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();
      this.typeList = this.company.map((item) => ({
        val: item.conpanyId,
        name: item.companyName,
      }));
      this.selarr = this.company.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);
      this.goMap(getPipe, this.addPipeLine, Line);
      this.goMap(getTyx, this.addDevice, Device);
      this.goMap(getFm, this.addDevice, Device);
      this.goMap(getCz, this.addDevice, Cz);
      this.goMap(getVideo, this.addDevice, VideoView);

      // 用户要等一下 因为有报警数据
      this.goMap(detectorUserList, this.addDevice, User).then((res) => {
        // 先查一下，然后开启定时器
        this.userAlarm();
        this.alarmTimer = setInterval(() => {
          this.userAlarm();
          // console.log("查询报警");
        }, alarmtime);
      });
    }
    this.currentTime();
    this.$refs.mychild.choice(this.selarr);
    this.$refs.mychild2.choice(this.selarr);
  },
  methods: {
    ...mapActions({
      GetCompany: "bigWindowCompany/GetCompany",
    }),
    // 管道上图
    addPipeLine(data, component) {
      console.log("zzzzzzsssssxxxxzxzxzxzxzxzxz");

      for (let comp in data) {
        data[comp].forEach((pipe) => {
          console.log(pipe);
          this.map.addPipeLine(pipe, component);
        });
      }
    },
    // 设备上图
    addDevice(data, component) {
      for (let comp in data) {
        data[comp].forEach((pipe) => {
          this.map.addDevice(pipe, component);
        });
      }
    },
    goMap(httpFunc, addFunc, component) {
      return httpFunc().then((res) => {
        // 给用户加icontype
        if (res.data && !res.data[0].iconType) {
          res.data.forEach((item) => {
            item.iconType = 6;
          });
        }
        // 根据数据格式不同，赋值不同，如果是个数组，就用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 };
        }
        console.log("reresresresresresresresresress", config);

        addFunc(config, component);
        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;
    // },

    allCompany() {
      if (this.selarr.length == this.companyLength) {
        this.selarr = [];
      } else {
        this.selarr = this.company.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.$refs.mychild2.choice(this.selarr);
      this.$refs.mychild.choice(this.selarr);
    },

    sel1(index, item) {
      const ind = this.selarr1.indexOf(item.val);
      if (ind >= 0) {
        this.selarr1.splice(ind, 1);
      } else {
        this.selarr1.push(item.val);
      }
      this.map.allfilter(this.selarr, this.selarr1);
    },
    //用户的设备center
    getDetectorInfoList(httpFunc, queryParams, title) {
      console.log(queryParams);
      return httpFunc(queryParams).then((res) => {
        // console.log("queryParams", 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) => {
        // console.log("queryParams", res);
        console.log("resresresresreszzzzzzzzzzzzzzz", 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() {
    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: fixed;
  z-index: 9999;
  top: 50px;
  right: 20px;
  font-size: 14px;
  color: #18baff;
  cursor: pointer;
  padding: 3px 5px;
  border: 1px solid #339cc9;
  color: #339cc9;
  &:hover {
    background-color: #053b6a;
    color: #2cd5db;
  }
}
#map {
  position: absolute;
  top: 0px;
  bottom: 0;
  width: 100%;
}
.banner-test {
  width: 100%;
  height: 85px;
  position: relative;
  top: 0;
  z-index: 999;
}
.banner-test img {
  width: 100%;
  height: 100%;
}

.leftbar {
  width: 300px;
  overflow: hidden;
  height: calc(100vh - 85px);
  position: fixed;
  top: 85px;
  left: 0;
  background: #112238;
}
.rightbar {
  width: 470px;
  height: calc(100vh - 85px);

  position: fixed;
  top: 85px;

  right: 0;
  background: #112238;
}
.home-div {
  width: 50%;
  height: 70px;
  position: fixed;
  bottom: 0;
  margin-left: 25%;
  // z-index: 1000;
  img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
  }
}
.listingsSty {
  /* height: 25px; */
  // position: fixed;
  /* border: 1px solid #fff; */
  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;
  /* border: 1px solid #fff; */
  color: #fff;
  font-size: 16px;
  // float: left;
  // margin-left: 8%;
  cursor: pointer;
  // font-family: 'arialbd';
}
.active {
  color: #2ee7e7;
  background: url(../../assets/mapinages/background.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 18px;

  /*position:relative;*/
  /*&::after{
    width: 80px;
    height: 50px;
    z-index: -1;
    content: " ";
    position: absolute;
    top: -7px;
    left: 50%;
    margin-left:-40px;
    background: url(/img/bac1.0ec28f27.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    color: aquamarine;
  }*/
}
.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;
}
.typelist-div {
  width: 465px;
  height: 50px;
  z-index: 9999;
  position: fixed;
  top: 0;
  margin-top: 120px;
  right: 470px;
  .list {
    z-index: 9999;
    float: left;
    margin-left: 15px;
    color: #fff;
    line-height: auto;
    text-align: center;
    background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
    box-shadow: inset 0px 1px 2px 1px #125c9b;
    font-size: 15px;
    padding: 5px 7px;
    cursor: pointer;
    line-height: 26px;
  }
  .list.active {
    background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
    box-shadow: inset 0px 1px 2px 1px #125c9b;
    font-size: 14px;
  }
  .list img {
    width: 22px;
  }
}
.typelist-divZ {
  width: 400px;
  // height: 30px;
  z-index: 9998;
  position: fixed;
  top: 85px;
  left: 50%;
  margin-left: -200px;
  .list {
    float: left;
    margin-left: 15px;
    color: #fff;
    line-height: auto;
    text-align: center;
    background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
    box-shadow: inset 0px 1px 2px 1px #125c9b;
    font-size: 10px;
    padding: 5px 7px;
    cursor: pointer;
    margin-bottom: 5px;
    // line-height: 30px;
  }
  .list.active {
    background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
    box-shadow: inset 0px 1px 2px 1px #125c9b;
    font-size: 10px;
  }
  .list img {
    width: 15px;
  }
}
</style>