<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2025-12-20 09:20:39
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2026-04-07 10:25:15
 * @FilePath: /test-ranqi/src/views/Index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="ind3">
    <div id="gao-map-index"></div>
    <!-- <Left /> -->
    <!-- <Right /> -->
    <div  @click="$emit('imgClick', 'index')" class="backindex">返回首页概览</div>

    <div class="mapChange">
      <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
      <div :class="{ active: !mapStyle }" @click="mapChange(1)">三维地图</div>
    </div>
    <Bottom @change="change"/>
  </div>
</template>

<script>
import Left from "./components/Left.vue";
import Right from "./components/Right.vue";
import Bottom from "./components/Bottom.vue";
import { EditorMap } from "@/utils/mapClass/newMap";
import { deviceInfoList } from "@/api/baseinfo/deviceInfo";
import DeviceInfo from "./components/DeviceInfo"
import StationInfo from ".//components/StationInfo";
import GyInfo from ".//components/GyInfo";
import { stationInfoList } from "@/api/baseinfo/stationInfo.js";
import { listIndustry} from "@/api/baseinfo/industry";
import { pipeInfoList,pointList } from "@/api/baseinfo/pipeInfo";
import PipeInfo from "./components/PipeInfo";
import {
  deviceType,
  deviceIcon,
  pipeColor,
} from "@/utils/mapClass/deviceIconTypeConfig";
import axios from "axios";

export default {
  name: "",
  components: {
    Left,
    Right,
    Bottom,
    DeviceInfo,
    StationInfo,
    GyInfo,
    PipeInfo
  },
  data() {
    return {
      pipeArr:[0,1,2],
      mapStyle: true,
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // const path = eval(this.systemSetting.map_center);

      this.gaoMap = new EditorMap(
        "gao-map-index",
        {
          center: [118.071425,39.780639],
          // mapStyle: "amap://styles/806fa63f07c70b043867bd1f9a600981",
          mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
          zoom: 10.5,
          devicePicData: deviceIcon,
          pipeColor: pipeColor,
        },
        this
      );
      this.initMapDeviceInfo();
    },
    //设备上图
    initMapDeviceInfo() {
      //调压箱
      this.getDeviceInfo();
      //场站
      this.getStationInfo();
      //工业用户
      this.getList();
      this.getpipe();
      this.getPointList();

      setInterval(() => {
        this.gaoMap.pipeArrold = this.gaoMap.pipeArr2;
        this.gaoMap.pipeArr2 = [];
        console.log(this.gaoMap.pipeArrold)
        this.getPointList();
        setTimeout(() =>{this.gaoMap.clearPipe()},1000)
      }, 60000)
    },

    getpipe(){
      pipeInfoList().then((res) => {
          if (res.code == 200 && res.data) {
          res.data.forEach((item) => {
            item.path = eval(item.coordinates);
          item.pipePressure = item.pipeType;
          item.strokeWeight = 4;
          this.gaoMap.addPipeLine(item, PipeInfo);
        });
        }
      });
      //加载本地管线
      this.getLocationPipe();
    },

    getPointList(){
      pointList().then((res) => {
        if (res.code == 200 && res.data) {
          res.data.forEach((item) => {
            item.path = item.coordinates;
            item.pipePressure = 5;
            item.strokeWeight = 2;
            if(this.pipeArr.includes(item.pipeType-1)){
              item.ishidden = 0
            }else{
              item.ishidden = 1
            }
            this.gaoMap.addPipeLine(item, PipeInfo);
          });
        }
      });
    },
    /** 查询工业用户列表 */
    getList() {
      listIndustry({pageNum:1,pageSize:1000}).then(response => {
        //this.industryList = response.rows;
        this.gaoMap.labelsLayerMarksDetectorUserList(response.rows, GyInfo, false);
    });
    },
    //调压箱
    getDeviceInfo() {
      deviceInfoList().then((res) => {
        if (res.code && res.data) {
        let typeA = [];
        let typeB = [];
        res.data.forEach((item) => {
          item.iconType = item.deviceType;
          if (item.deviceType === '1') {
            typeA.push(item);
          } else if (item.deviceType === '2') {
            typeB.push(item);
          }
          //this.gaoMap.addDevice(item, DeviceInfo, false);
        });

        this.gaoMap.labelsLayerMarksFmjGoMap(typeB, DeviceInfo, false);
        this.gaoMap.labelsLayerMarksTysGoMap(typeA, DeviceInfo, false);
      }
    });
    },
    //场站
    getStationInfo() {
      stationInfoList().then((res) => {
        if (res.code && res.data) {
        console.log(deviceType.station)
        res.data.forEach((item) => {
          item.iconType = deviceType.station;
        this.gaoMap.addDevice(item, StationInfo, false);
      });
      }
    });
    },
    showMarker(val) {
      let markerList = this.gaoMap.allDevice[val];
      if (markerList) {
        markerList.forEach((marker) => {
          marker.show();
      });
      }
    },
    hideMarker(val) {
      let markerList = this.gaoMap.allDevice[val];
      if (markerList) {
        markerList.forEach((marker) => {
          marker.hide();
      });
      }
    },
    mapChange(num) {
      if (num == 1) {
        this.mapStyle = false;
        this.gaoMap.changeMap(this.mapStyle)
      } else {
        this.mapStyle = true;
        this.gaoMap.changeMap(this.mapStyle)
      }
    },
    // sel1(index, item) {
    //   console.log(index, "=====fdsfdsf=====", item);
    //   const ind = this.selarr.indexOf(item.val);
    //   if (ind >= 0) {
    //     this.selarr.splice(ind, 1);
    //     this.hideMarker(item.val);
    //   } else {
    //     this.selarr.push(item.val);
    //     this.showMarker(item.val);
    //   }
    // },
    change(ind,val,arr){
      this.pipeArr = arr;
      if(val<3){
        this.gaoMap.pipefilter(ind,val);
      }
      if(ind>=0){
        if(val==3){
          this.gaoMap.tyxlabelsLayer.hide();
        }else if(val==4){
          this.gaoMap.fmjlabelLayer.hide();
        }else if(val==5){
          this.hideMarker(3);
        }else if(val==6){
          this.gaoMap.businessDetectorUserlabelsLayer.hide();
        }
      }else {
        if(val==3){
          this.gaoMap.tyxlabelsLayer.show();
        }else if(val==4){
          this.gaoMap.fmjlabelLayer.show();
        }else if(val==5){
          //this.map.czlabelLayer.show();
          this.showMarker(3);
        }else if(val==6){
          this.gaoMap.businessDetectorUserlabelsLayer.show();
        }
      }
    },
    getLocationPipe(){
      axios.get("../geo_json/pipe.json").then((res) => {
        if(res.data){
          //let lines = res.data.split(/\r?\n|\r/);
          res.data.forEach((line, index) => {
            let locations = line.coordinates.split(";");
            let pipe = [];
            locations.forEach(location => {
                pipe.push(location.split(","));
            })
            line.path = eval(pipe);
            line.pipeLength = parseFloat(line.pipeLength).toFixed(2);
            line.pipePressure = 3;
            line.strokeWeight = 4;
            this.gaoMap.addPipeLine(line, PipeInfo);
          });
        }
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.ind3 {
  height: 100vh;
  width: 100%;
  #gao-map-index {
    width: 100%;
    height: 100%;
  }
}
.backindex {
  width: 218px;
  height: 50px;
  font-size: 20px;
  box-sizing: border-box;
  padding-left: 58px;
  color: #fff;
  position: fixed;
  right: 548px;
  top: 144px;
  background: url("~@/assets/bigwindowImg/index/backIndex.png") no-repeat center center;
  line-height: 48px;
  z-index: 999;
  cursor: pointer;
}
.mapChange {
  left: 60px;
  top: 60px;
  color: #fff;
  padding: 5px;
  position: absolute;
  display: flex;
  z-index: 9999;
  div {
    border: 1px solid #339cc9;
    padding: 3px 6px;
    margin-left: 8px;
    color: #339cc9;
    cursor: pointer;
    font-size: 14px;
    &.active,
    &:hover {
      background-color: #053b6a;
      color: #2cd5db;
    }
  }
}
</style>
