epmet-work-pc-chengyang/src/views/dataBoard/IoTPerception/index.vue

<template>
  <div>
    <div class="g-row">
      <div class="g-left" style="z-index: 10;">
        <div class="m-box">
          <!-- <title-box text="视频监控" /> -->
          <Title  text="视频监控" >
            <div class="more" @click="getMore('Video')" >
              更多 <i class="el-icon-arrow-right"></i></div>
          </Title>
          <jdjs   :currentLevelData="currentLevelData"></jdjs>
        </div>
        <div class="m-box1">
          <title-box text="设备数量统计" />
          <RequirementList :currentLevelData="currentLevelData" />
        </div>
        <div class="m-box2">
          <!-- <title-box text="设备列表" /> -->
          <Title  text="设备列表" >
            <div class="more" @click="getMorequipment()" >
              更多 <i class="el-icon-arrow-right"></i></div>
          </Title>
          <!-- <RequirementList :currentLevelData="currentLevelData"/> -->
          <equipmentList :currentLevelData="currentLevelData" />
        </div>
      </div>
      <div class="g-center">
        <div class="m-per">
          <div class="item" v-for="(item,index) in list" :key="index" @click="jumpPath('normal', 'aged', '老年人')">
            <div class="item-info">
              <div>
                <img :src="require(`./image/icon/${index+1}.png`)" />{{item.tittle}}
              </div>
              <div>
                <b>{{item.numStr}}</b>
              </div>
            </div>
          </div>
        </div>
        <div class="map-legend" style="z-index: 100;">
          <img :class="isShow ? '' : 'close'" alt="" class="map-right-icon"
            src="@/assets/images/renfang/map-right-open.png" @click="isShow = !isShow">
          <div v-if="isShow" style="width: 134px;color: #ffff;">
            <div class="legend-title">
              物联一张图
            </div>
            <div class="legend-list">
              <div class="legend-item ">
                未完成需求
              </div>
              <div class="legend-item ">
                难解决问题
              </div>
              <div class="legend-item ">
                可调配资源
              </div>
              <div class="legend-item ">
                不满意问题
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="g-right" style="z-index: 10;">
        <div class="m-box3">
          <title-box text="基础设施覆盖率" />
          <InfrastructureRate :currentLevelData="currentLevelData" />
        </div>
        <div class="m-box2">
          <title-box text="设备报警" textSon="事件预警" />
          <equipmentWarning :currentLevelData="currentLevelData" />
        </div>
        <div class="m-box1">
          <title-box text="事件统计" textSon="事件预警" />
          <eventWarningStatistics :currentLevelData="currentLevelData" />
        </div>

      </div>
      <div :class="listShow ? 'm-map' : 'g-center-open'" style="overflow: hidden;position: fixed;">
        <grid-map ref="map" :level="currentLevel" :peopleType="peopleType" :srcGridData="orgData"
          @clickAgency="clickAgencyItem" @clickDotBtn="handleClickDotBtn" @resourcesPointClick="resourcesPointClick"
          @showMapDialog="showMapDialog" />

      </div>
    </div>
    <!--
        -- MapDialog
        -- type必填
        -- njjwtqk = 难解决问题情况
        -- bmysxqk = 不满意事项情况
        -- xqwwcqk = 需求未完成情况
      -->
    <MapDialog v-if="isShowMapDialog" ref="MapDialog" :currentLevelData="currentLevelData" :type="mapType"
      @close="isShowMapDialog = false" />
    <cpt-loading v-show="false" />
    <MapResourceInfo ref="MapResourceInfo" :currentLevelData="currentLevelData" />
    <more :showDialog="showDialog" :type="type"   @close="close"></more>
    <equipmentListMore :showequipmentListMore="showequipmentListMore"   @close="close1"></equipmentListMore>
  </div>
</template>
  <script>
  import gridMap from "@/views/dataBoard/cpts/sjkb-map/index";
  import cptBread from "@/views/dataBoard/renfang/cpts/bread";
  import cptLoading from "@/views/dataBoard/cpts/loading";
  import titleBox from "@/views/dataBoard/satisfactionEval/components/Title";
  import jdjs from "@/views/dataBoard/IoTPerception/Videosurveillance/index.vue";

  import equipmentListMore from "@/views/dataBoard/IoTPerception/more/equipmentListMore.vue";
  import more from "@/views/dataBoard/IoTPerception/more/index.vue";
  import equipmentList from "@/views/dataBoard/IoTPerception/equipmentList/index.vue";
  import eventWarningStatistics from "@/views/dataBoard/IoTPerception/eventWarningStatistics/index.vue";
  import equipmentWarning from "@/views/dataBoard/IoTPerception/equipmentWarning/index.vue";
  import InfrastructureRate from "@/views/dataBoard/IoTPerception/InfrastructureRate/index.vue";
  import jdtphx from "@/views/dataBoard/overview/components/jdtphx.vue";
  import mapTop from "@/views/dataBoard/overview/components/map-top.vue";
  import jdwgy from "@/views/dataBoard/overview/components/jdwgy.vue";
  import rfsjtj from "@/views/dataBoard/overview/components/rfsjtj.vue";
  import sqrfph from "@/views/dataBoard/overview/components/sqrfph.vue";
  import sq12345 from "@/views/dataBoard/overview/components/sq12345.vue";
  import RequirementList from "@/views/dataBoard/IoTPerception/devicesNumber/index.vue";
  import DynamicHumanRoomData from "@/views/dataBoard/overview/components/DynamicHumanRoomData.vue";
  import GridUpdateRanking from "@/views/dataBoard/overview/components/GridUpdateRanking.vue";
  import CommunityResult from "@/views/dataBoard/overview/components/CommunityResult.vue";
  import EventAndFollowUp from "@/views/dataBoard/overview/components/EventAndFollowUp.vue";
  import wtqd from "@/views/dataBoard/overview/components/wtqd.vue";
  import MapDialog from "@/views/dataBoard/overview/components/MapDialog/index.vue";
  import RankingGridData from "@/views/dataBoard/overview/components/RankingGridData.vue";
  import FollowUp from "@/views/dataBoard/overview/components/FollowUp.vue";
  import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
  import {requestPostBi} from "@/js/dai/request-bipass";
  import Title from "@/views/dataBoard/satisfactionEval/components/Title/index.vue";
  import {requestPost} from "@/js/dai/request";
  import {spliceIntoChunks} from "@/utils/index";
  import MapResourceInfo from "@/views/dataBoard/overview/components/MapResourceInfo.vue";
  
  export default {
    name: "overview",
    components: {
      equipmentListMore,
      more,
      Title,
      eventWarningStatistics,
      equipmentWarning,
      InfrastructureRate,
      equipmentList,
      gridMap,
      cptLoading,
      cptBread,
      titleBox,
      jdjs,
      jdtphx,
      mapTop,
      jdwgy,
      rfsjtj,
      sqrfph,
      sq12345,
      DynamicHumanRoomData,
      CommunityResult,
      EventAndFollowUp,
      RankingGridData,
      GridUpdateRanking,
      FollowUp,
      Tabs,
      wtqd,
      RequirementList,
      MapDialog,
      MapResourceInfo
    },
  
    data() {
      return {
        showequipmentListMore:false,
        type:"",
        showDialog:false,
        loading: false,
        orgData: {
          children: [],
        }, //当前组织对象
        showMap: false,
        isShowMapDialog: false,
        orgId: "",
        isShow:false,
        orgLevel: "",
        currentLevel: "",//地图对应level
        currentLevelData: {
          orgId: this.$store.state.chooseArea.chooseName.orgId,
          orgLevel: this.$store.state.chooseArea.chooseName.level,
          meta: {title: "人房总览"},
        },
        breadList: [
          {
            orgId: "",
            orgLevel: "",
            id: "",
            level: "",
            meta: {title: "人房总览"},
          },
        ],
        peopleList: {
          staffGrid: "网格员",
          staffDepartment: "单位/组织",
          staffAgency: "社区工作者",
          chief: "楼长/单元长",
          publicWelfareNum: "公益岗",
          volunteer: "志愿者",
          unit: "微网格",
          building: "楼栋",
        },
        displayedResiId: "",
        displayedHouseId: "",
        dynamicType: 1,
        dynamicTypeList: [
          {
            value: 1,
            label: "更新动态",
          },
          {
            value: 2,
            label: "网格更新排行",
          },
        ],
        eventType: 1,
        eventTypeList: [
          {
            value: 1,
            label: "12345事件",
          },
          {
            value: 2,
            label: "事件回访",
          },
        ],
        list:[],
        customerName: "",
        peopleType: "staffAgency",
        listShow: true,
        mapType: ''
      };
    },
  
    mounted() {
      // const queryOrgId = getQueryPara("orgId");
      // const queryOrgLevel = getQueryPara("orgLevel");
      // this.init(queryOrgId, queryOrgLevel);
      this.getList()
      this.changeCustomerName();
      this.getMapData();
      // this.$refs.map.setNumpoint()
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        // 设置 showMap 为 true，表示要显示地图
        vm.showMap = true;
      });
    },
  
    beforeRouteLeave(to, from, next) {
      // 离开当前路由时，重置 showMap 为 false，表示要隐藏地图
      // this.showMap = false;
      next();
    },
    watch: {
      "$store.state.chooseArea.chooseName"(val) {
        if (val.orgId) {
          this.currentLevelData = {
            ...this.currentLevelData,
            ...val,
            orgLevel: val.level,
          };
          // this.getMapData();
        }
      },
    },
  
    methods: {
      async getList(){
        let url = '/actual/base/fakeDataShow/list'
        let {data,code,msg} = await requestPost(url,{type:'equipmentStatusStatic',agencyId:this.$store.state.user.agencyId})
        if(code === 0){
          console.log(data);
          this.list  = data
        }
      },
      getMorequipment(){
        console.log(this.showequipmentListMore,"sdklkdsf111");
        this.showequipmentListMore=true
      },
      close(){this.showDialog=false},
      close1(){this.showequipmentListMore=false},
      getMore(){
          this.showDialog=true
        }
      },

      changeCustomerName() {
        this.customerName = localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
      },
      changeType(e) {
        this.peopleType = e;
      },
      dynamicTypeChange(val) {
        this.dynamicType = val;
      },
      eventTypeChange(val) {
        this.eventType = val;
      },
      async init(queryOrgId, queryOrgLevel) {
        if (queryOrgId) {
          this.orgId = queryOrgId;
          this.orgLevel = queryOrgLevel || "agency";
        } else {
          this.orgId = this.$store.state.user.agencyId;
          this.orgLevel = "agency";
        }
  
        //加载组织数据
        this.loading = false;
        await this.getMapData();
        // await this.getSubMapData();
  
        this.loading = true;
      },
 
      handleClickDotBtn(type, info) {
        if (type == "watch-resi") {
          this.displayedResiId = info.user_id;
        } else if (type == "watch-house") {
          this.displayedHouseId = info.house_id;
        }
      },
  
      clickBreadItem({item}) {
        this.toBread(item);
      },
  
      clickAgencyItem(item) {
        this.$refs.map.clearMarkert();
        if (item.id) {
          if (item.level == "grid") {
            this.customerName = item.parentName + "-" + item.name;
          } else {
            this.customerName = item.name || item.meta.title;
          }
          this.currentLevelData = {
            orgId: item.id,
            level: item.level,
            orgLevel: item.level,
          };
        } else {
          this.customerName = localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
          this.currentLevelData = {
            ...this.$store.state.chooseArea.chooseName,
            orgLevel: this.$store.state.chooseArea.chooseName.level,
          };
        }
        this.toBread({
          orgId: item.id,
          orgLevel: item.level,
          meta: {title: item.name},
          name: item.name,
          parentName: item.parentName,
        });
      },
      goBackMap() {
        const item = this.breadList[this.breadList.length - 2];
        this.clickAgencyItem(item);
      },
      toBread(item) {
        const {orgId} = item;
        const {breadList} = this;
        let index = breadList.findIndex((val) => val.orgId === orgId);
        if (index >= 0) {
          this.breadList = breadList.slice(0, index + 1);
        } else {
          breadList.push({...item, id: item.orgId, level: item.orgLevel});
          this.breadList = breadList;
        }
        this.getMapData(item.orgId, item.orgLevel);
      },
      getCenterPoint(geoCoordinateList) {
        const geoCoordinateListFlat = geoCoordinateList.reduce((s, v) => {
          return (s = s.concat(v))
        }, [])
        const total = geoCoordinateListFlat.length
        let X = 0
        let Y = 0
        let Z = 0
        for (const g of geoCoordinateListFlat) {
          const lat = g.lat * Math.PI / 180
          const lon = g.lng * Math.PI / 180
          const x = Math.cos(lat) * Math.cos(lon)
          const y = Math.cos(lat) * Math.sin(lon)
          const z = Math.sin(lat)
          X += x
          Y += y
          Z += z
        }
  
        X = X / total
        Y = Y / total
        Z = Z / total
        const Lon = Math.atan2(Y, X)
        const Hyp = Math.sqrt(X * X + Y * Y)
        const Lat = Math.atan2(Z, Hyp)
  
        return {lng: Lon * 180 / Math.PI, lat: Lat * 180 / Math.PI}
      },
      // 点击搜索结果条目，在地图上显示点和详情弹窗
      handleClickSearchItem(item) {
        if (!item.longitude) {
          return this.$message.error("请先设置坐标");
        }
        this.$refs.map.setDotMarker(item, [parseFloat(item.longitude), parseFloat(item.latitude)]);
      },
      setNum(data) {
        // data
        let params = [];
        let org = this.orgData.children;
        org.forEach((item) => {
          data.forEach((item2) => {
            let coordinates = spliceIntoChunks(item.coordinates.split(",").map((item) => parseFloat(item)), 2)
            let coordinates2 = coordinates.map(item3 => {
              return [{
                lat: item3[1],
                lng: item3[0]
              }]
            })
            let index = parseInt(coordinates.length / 2)
            let centerLngLat = this.getCenterPoint(coordinates2)
            // spliceIntoChunks
            if (item2.orgId === item.id && item.coordinates) {
              params.push({
                ...item2,
                peopleType: this.peopleList[this.peopleType],
                latitude: centerLngLat.lat,
                longitude: centerLngLat.lng,
                coordinates
              });
            }
          });
        });
        // if (params.length) {
        this.$refs.map.setNum(params);
        // }
      },
      upDownShow() {
        this.listShow = !this.listShow;
      },
      setPoint(data) {
        // if (data) {
        this.$refs.map.setPoint(data, this.currentLevel, this.peopleType);
        // }
      },
      //获取地图上显示的组织数据
      async getMapData(orgId = this.$store.state.chooseArea.chooseName.orgId, level = this.$store.state.chooseArea.chooseName.level) {
        const url = "org_map";
        this.$http.post(`/gov/org/agency/maporg`, {orgId, level}).then(({data: {data}}) => {
          this.orgData = data;
          this.orgId = this.orgData.id;
          this.orgLevel = this.orgData.level;
          this.currentLevel = this.orgData.agencyLevel;
          this.peopleType = this.currentLevel === "grid" ? "unit" : "staffAgency";
          this.$refs.map.removeResourcesPoint();
          if (this.currentLevel !== 'street') {
            this.setResourcesPoint({agencyId: this.orgId})
          }
          this.getMapCount()
        });
      },
      showMapDialog(data) {
        if (data.type === "resources" || this.currentLevel === 'street') {
          this.clickAgencyItem(data)
        } else {
          // -- njjwtqk = 难解决问题情况
          // -- bmysxqk = 不满意事项情况
          // -- xqwwcqk = 需求未完成情况
          switch (data.type) {
            case 'events':
              this.mapType = "bmysxqk";
              break;
            case 'services':
              this.mapType = "xqwwcqk";
              break;
            case 'problems':
              this.mapType = "njjwtqk";
              break;
          }
          this.isShowMapDialog = true
          this.$nextTick(() => {
            this.$refs.MapDialog.open({
              orgId: data.agencyId,
              orgLevel: data.level
            }, this.mapType)
          })
        }
      },
      resourcesPointClick(data) {
        this.$refs.MapResourceInfo.open(data.id, data.dataClass)
      },
      search(data) {
        data = data.filter(item => item.latitude && item.longitude)
        data = data.map(item => {
          return {
            ...item,
            latitude: item.latitude * 1,
            longitude: item.longitude * 1
          }
        })
        this.$refs.map.setResourcesPoint(data)
      },
      setResourcesPoint({agencyId}) {
        this.$http.get('/actual/base/dataBoard/resource/search?keyword=&agencyId=' + agencyId).then(res => {
          let data = res.data.data;
          data = data.filter(item => item.latitude && item.longitude)
          data = data.map(item => {
            return {
              ...item,
              latitude: item.latitude * 1,
              longitude: item.longitude * 1
            }
          })
          this.$refs.map.setResourcesPoint(data)
        })
      },
      getMapCount() {
        this.$http.get('/governance/icEvent/statOrgResourceAndEventCount?agencyId=' + this.orgId).then(res => {
          let countData = res.data.data
          let orgDataids = this.orgData.children.map(item => item.id)
          countData.forEach(item => {
            let orgDataIndex = orgDataids.indexOf(item.agencyId)
            if (orgDataIndex > -1) {
              let curOrgData = this.orgData.children[orgDataIndex];
              item.data = item.data.map(item2 => {
                return {
                  ...curOrgData,
                  ...item2,
                  agencyId: item.agencyId
                }
              })
              item.data.forEach(item3 => {
                let coordinates = spliceIntoChunks(item3.coordinates.split(",").map((coordinatesItem) => parseFloat(coordinatesItem)), 2)
                let coordinates2 = coordinates.map(item4 => {
                  return [{
                    lat: item4[1],
                    lng: item4[0]
                  }]
                })
                let centerLngLat = this.getCenterPoint(coordinates2)
                if (item3.hasOwnProperty("services")) {
                  item3.type = 'services'
                  item3.num = item3.services;
                  item3.offsets = [50, 50];
                  item3.latitude = centerLngLat.lat
                  item3.longitude = centerLngLat.lng
                }
                if (item3.hasOwnProperty("resources")) {
                  item3.type = 'resources'
                  item3.num = item3.resources;
                  item3.offsets = [-50, 50];
                  item3.latitude = centerLngLat.lat + 0.002
                  item3.longitude = centerLngLat.lng
                }
                if (item3.hasOwnProperty("problems")) {
                  item3.type = 'problems'
                  item3.num = item3.problems;
                  item3.offsets = [50, -50];
                  item3.latitude = centerLngLat.lat
                  item3.longitude = centerLngLat.lng + .002
                }
                if (item3.hasOwnProperty("events")) {
                  item3.type = 'events'
                  item3.num = item3.events;
                  item3.offsets = [-50, -50];
                  item3.latitude = centerLngLat.lat + .002
                  item3.longitude = centerLngLat.lng + .002
                }
                item3.latitude = parseFloat(item3.lat)
                item3.longitude = parseFloat(item3.lon)
  
              })
            }
          })
          this.$refs.map.setNumpoint(countData)
  
  
        })
      },
  
      //获取地图上显示的组织数据
      async getSubMapData() {
        const url = "sub_org_map";
  
        const {data, code, msg} = await requestPostBi(
            url,
            {
              queryParam: {
                org_id: this.orgId,
              },
            },
            {
              // mockId: 61831860,
            }
        );
  
        if (code === 0) {
          const {orgData} = this;
          orgData.children = data.map((item) => {
            return {
              ...item,
              id: item.org_id,
              name: item.org_name,
              latitude: parseFloat(item.latitude),
              longitude: parseFloat(item.longitude),
              coordinates: item.coordinates || "",
            };
          });
          this.orgData = {...orgData};
        } else {
          this.$message.error(msg);
        }
      },
  
      //加载组织数据
      async loadOrgData() {
        const url = "/gov/org/agency/maporg";
        let params = {
          orgId: this.orgId,
          level: this.orgLevel,
        };
  
        const {data, code, msg} = await requestPost(url, params);
        if (code === 0) {
          this.orgData = data;
          this.orgId = this.orgId;
          this.orgLevel = this.orgData.level;
        } else {
          this.$message.error(msg);
        }
      },
      handelClickRkfxPei(val) {
      },
    
  };
  </script>
  <style lang="scss" scoped>
  .g-center {
    width: 930px !important;
  }
  
  .up-style {
    width: 51%;
  
    img {
      width: 12px;
      height: 12px;
    }
  
    img:hover {
      cursor: pointer;
    }
  }
  
  .go-back {
    position: absolute;
    z-index: 100;
    top: 24px;
    right: 0;
    left: 16px;
    width: 64px;
  
    img {
      width: 36px;
      height: 36px;
    }
  
    img:hover {
      cursor: pointer;
    }
  }
  
  .date-current-weiyi {
    background: #000;
  }
  </style>
  <style lang="scss" scoped src="@/assets/scss/dataBoard/IoTPerception/index.scss"></style>
  <style lang="scss" scoped>
  .tabs {
    padding: 10px 11px 0px;
  }

  .sjkb-map {
    width: 930px;
  }

  .map-legend {
    position: absolute;
    //top: calc(50% - 184px);
    bottom: 0;
    right: 20px;
    display: flex;
    align-items: center;
    .map-right-icon {
    transform: rotate(180deg);
    &.close {
      transform: rotate(0deg);
    }
    
  }
  &.hidden {
      width: 0;
      border-width: 0px;
    }
    .legend-title {
      font-size: 16px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 32px;
      // margin-bottom: 4px;
      background: url("@/assets/images/renfang/map-right-title.png");
    }

    .legend-list {
      box-sizing: border-box;
      width: 134x;
      margin: 0 auto;
      height: 336px;
      padding: 19px 12px;
      border: 1px solid #488CC5;
      background: rgba(#0A2351, 0.66);
      overflow-y: auto;

      .legend-item {
        line-height: 42px;
        overflow: hidden;
        height: 42px;
        padding-left: 24px;
        text-overflow: ellipsis;
        border-bottom: 1px solid;
        border-image: linear-gradient(to right, #000 0%, #4eafd5 50%, #000 100%);
        border-image-slice: 1;

        &:hover {
          color: #72F7FF;
          background: url("@/assets/images/renfang/map-right-cur.png");
        }
      }

    }

  }

  .m-map {
    height: 970px;
  }
  .more {
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  color: #a0cdff;
}
</style>