cropland/src/pages/plantGuard/page1.vue

<!--  -->
<template>
  <div class="inner">
    <div class="mapCover">
      <el-amap
        class="bm-view"
        vid="amapDemo"
        :center="center"
        :amap-manager="amapManager"
        :zoom="zoom"
        :plugin="plugin"
        :events="mapEvents"
      >
        <el-amap-marker vid="component-marker" v-if="componentMarker.position.length" :position="componentMarker.position"  ></el-amap-marker>
      </el-amap>
    </div>
    <div class="mapTypebox">
      <el-radio-group v-model="mapType" @change="changeMapType">
        <el-radio :label="0">标准图</el-radio>
        <el-radio :label="1">卫星图</el-radio>
      </el-radio-group>
    </div>
    <!-- tabs设备类型 -->
    <div class="equipTypebox">
      <div class="equipTypeBody">
        <div class="equipTypeList">
          <div v-for="(item,index) in equipType" @click="changeEquip(index,item)" @mouseover='mouseOve(index,item)' @mouseleave='mouseOut(index,item)' :key="item.type"  :class="[currSelectType==item.type?'active':'']" >{{item.name}}</div>
        </div>
        <div :style="'left:'+equipStyleLeft+'px'" class="equipHighLight"></div>
      </div>
    </div>
    <!-- 控制 -->
    <!-- <sidebar></sidebar> -->
    <components :is="sidebarComponents" @sidebarClear="sidebarClear()" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='queryInfo.type' :model="queryInfo.model"></components>
    <!-- 设备列表 -->
    <equip-list>
      <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
      <button @click="detailsShow == 3">ceshi</button>
    </equip-list>
    <!-- 杀虫灯数据框 -->
    <transition
        enter-active-class="animate__animated animate__zoomIn" 
        leave-active-class="animate__animated animate__rotateOut"
    >
      <dialog-box v-if="detailsShow==2" width='800'>
          <template v-slot:header>
            <span class="dialog-title">杀虫灯数据框</span>
            <button type="button" @click="detailsShow=''" class="dialog-headerbtn">
              <i class="el-icon el-icon-close"></i>
            </button>
          </template>
          <template v-slot:inner>
            <equip-info :equipId="queryInfo.equip_id" :equipType='detailsShow'>
              <template v-solt:equipStateInner></template>
            </equip-info>
            <div class="equipData">
              <div class="more" @click="lookmore()">查看更多</div>
              <template>
                <el-tabs v-model="activeName" @tab-click="tabshandleClick">
                  <el-tab-pane
                    v-for="(pages, index) in pages['2']"
                    v-bind:key="index"
                    :label="pages.label"
                    :name="pages.name"
                  > 
                    <!-- <keep-alive> -->
                      <components :is="pages.name" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' v-if="pages.name == nowPage"></components>
                    <!-- </keep-alive> -->
                  </el-tab-pane>
                </el-tabs>
              </template>
            </div>
          </template>
      </dialog-box>
    </transition>
    <!-- 测报灯数据框 -->
    <transition
        enter-active-class="animate__animated animate__zoomIn" 
        leave-active-class="animate__animated animate__rotateOut"
    >
      <dialog-box v-if="detailsShow==3" width='800'>
          <template v-slot:header>
            <span class="dialog-title">测报灯数据框</span>
            <button type="button" @click="detailsShow=''" class="dialog-headerbtn">
              <i class="el-icon el-icon-close"></i>
            </button>
          </template>
          <template v-slot:inner>
            <equip-info :equipId="queryInfo.equip_id" :equipType='detailsShow'>
              <template v-solt:equipStateInner></template>
            </equip-info>
            <div class="equipData">
              <div class="more" @click="lookmore()">查看更多</div>
              <template>
                <el-tabs v-model="activeName" @tab-click="tabshandleClick">
                  <el-tab-pane
                    v-for="(pages, index) in pages['3']"
                    v-bind:key="index"
                    :label="pages.label"
                    :name="pages.name"
                  > 
                    <keep-alive>
                      <components :is="pages.name" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' v-if="pages.name == nowPage"></components>
                    </keep-alive>
                  </el-tab-pane>
                </el-tabs>
              </template>
            </div>
          </template>
      </dialog-box>
    </transition>
    <!-- 性诱设备数据框 -->
    <transition
        enter-active-class="animate__animated animate__zoomIn" 
        leave-active-class="animate__animated animate__rotateOut"
    >
      <dialog-box v-if="detailsShow==4" width='800'>
          <template v-slot:header>
            <span class="dialog-title">性诱设备数据框</span>
            <button type="button" @click="detailsShow=''" class="dialog-headerbtn">
              <i class="el-icon el-icon-close"></i>
            </button>
          </template>
          <template v-slot:inner>
            <equip-info :equipId="queryInfo.equip_id" :equipType='detailsShow'>
              <template v-solt:equipStateInner></template>
            </equip-info>
            <div class="equipData">
              <div class="more" @click="lookmore()">查看更多</div>
              <template>
                <el-tabs v-model="activeName" @tab-click="tabshandleClick">
                  <el-tab-pane
                    v-for="(pages, index) in pages['4']"
                    v-bind:key="index"
                    :label="pages.label"
                    :name="pages.name"
                  > 
                    <keep-alive>
                      <components :is="pages.name" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' v-if="pages.name == nowPage"></components>
                    </keep-alive>
                  </el-tab-pane>
                </el-tabs>
              </template>
            </div>
          </template>
      </dialog-box>
    </transition>
    <!-- 气象站数据框 -->
    <transition
        enter-active-class="animate__animated animate__zoomIn" 
        leave-active-class="animate__animated animate__rotateOut"
    >
      <dialog-box v-if="detailsShow==5" width='800'>
          <template v-slot:header>
            <span class="dialog-title">气象站数据框</span>
            <button type="button" @click="detailsShow=''" class="dialog-headerbtn">
              <i class="el-icon el-icon-close"></i>
            </button>
          </template>
          <template v-slot:inner>
            <equip-info :equipId='queryInfo.equip_id' :equipType='detailsShow'>
              <template v-solt:equipStateInner></template>
            </equip-info>
            <div class="equipData">
              <div class="more" @click="lookmore()">查看更多</div>
              <template>
                <el-tabs v-model="activeName" @tab-click="tabshandleClick">
                  <el-tab-pane
                    v-for="(pages, index) in pages['5']"
                    v-bind:key="index"
                    :label="pages.label"
                    :name="pages.name"
                  > 
                    <keep-alive>
                      <components :is="pages.name" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' v-if="pages.name == nowPage"></components>
                    </keep-alive>
                  </el-tab-pane>
                </el-tabs>
              </template>
            </div>
          </template>
      </dialog-box>
    </transition>
    <!-- 孢子仪数据框 -->
    <transition
        enter-active-class="animate__animated animate__zoomIn" 
        leave-active-class="animate__animated animate__rotateOut"
    >
      <dialog-box v-if="detailsShow==7" width='800'>
          <template v-slot:header>
            <span class="dialog-title">孢子仪数据框</span>
            <button type="button" @click="detailsShow=''" class="dialog-headerbtn">
              <i class="el-icon el-icon-close"></i>
            </button>
          </template>
          <template v-slot:inner>
            <equip-info @child-event="setTimeDialogShow" :equipId='queryInfo.equip_id' :equipType='detailsShow'>
              <template v-solt:equipStateInner></template>
            </equip-info>
            <div class="equipData">
              <div class="more" @click="lookmore()">查看更多</div>
              <template>
                <el-tabs v-model="activeName" @tab-click="tabshandleClick">
                  <el-tab-pane
                    v-for="(pages, index) in pages['7']"
                    v-bind:key="index"
                    :label="pages.label"
                    :name="pages.name"
                  > 
                    <keep-alive>
                      <components :is="pages.name" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' v-if="pages.name == nowPage"></components>
                    </keep-alive>
                  </el-tab-pane>
                </el-tabs>
              </template>
            </div>
          </template>
      </dialog-box>
    </transition>
    <!-- 设置孢子仪载玻片、培养液更换时间配置弹框 -->
    <el-dialog
      title="配置（请及时填写）"
      :visible.sync="setTimeDialogVisible"
      width="420px"
    >
      <el-form ref="form" :model="time" label-width="130px">
        <el-form-item label="载玻片更换时间: ">
          <el-date-picker
            v-model="time.time01"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="培养液更换时间: ">
          <el-date-picker
            v-model="time.time02"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="grayInfo" @click="setTimeDialogVisible = false">取 消</el-button>
        <el-button type="blueInfo" @click="setTimeSubm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import VueAMap from "vue-amap";
let amapManager = new VueAMap.AMapManager();
import sidebar from "@/components/highStand/sidebar"
import equipList from "@/components/highStand/equipList"
import { bd09togcj02,gcj02tobd09,wgs84togcj02,gcj02towgs84 } from "@/components/home/coordtransform_utils.js";  //纠偏方法
import dialogBox from './dialogHollow' //地图镂空弹框 
import equipState from './equipState' //设备状态
import qxzEquipState from './equipStateQxz' //气象站设备状态
import equipInfo from './equipInfo' //设备基础信息
import equipHistoryDate from './equipHistoryDate' //设备历史数据
import qxzEquipHistoryDate from './equipHistoryDateQxz' //气象站设备历史数据
import twentyFourHistoryDate from './twentyFourHistoryDate' //气象站24小时数据
import cbdPhoto from './cbdPhoto/cbdPhoto' //测报灯图片
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
      sidebar,
      equipList,
      dialogBox,
      equipState,
      qxzEquipState,
      equipInfo,
      equipHistoryDate,
      qxzEquipHistoryDate,
      twentyFourHistoryDate,
      cbdPhoto,
  },
  data() {
    //这里存放数据
    return {
      sidebarComponents:'',
      amapManager,
      center: [120.298433, 31.680335],
      zoom: 6,
      mapType: 1,
      plugin: [
        // {
        //   pName: "ToolBar",
        //   events: {
        //     init(instance) {
        //       console.log(instance);
        //     }
        //   }
        // },
        {
          pName: "Scale",
          events: {
            init(instance) {
              console.log(instance);
            }
          }
        }
        // {
        //     pName: 'MapType',
        //     defaultType: 0,
        //     events: {
        //       init(instance) {
        //         console.log(instance);
        //       }
        //     }
        //   }
      ],
      componentMarker: {
        position: []
      },
      infoWindow: null,
      xyzTileLayer: null,
      xyzTileLayer2: null,
      mapEvents: {
        init: o => {
          this.xyzTileLayer = new AMap.TileLayer({
            // 图块取图地址
            getTileUrl:
              "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=img_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
            zIndex: 100
          });
          this.xyzTileLayer2 = new AMap.TileLayer({
            // 图块取图地址
            getTileUrl:
              "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=cta_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
            zIndex: 101
          });
          o.add(this.xyzTileLayer);
          o.add(this.xyzTileLayer2);
        }
      },
      // tabs导航
      equipType:[
        {
          type:'',
          name:"全部",
        },
        {
          type:7,
          name:"孢子仪",
        },
        {
          type:6,
          name:"监控",
        },
        {
          type:5,
          name:"环境监测",
        },
        {
          type:4,
          name:"性诱设备",
        },
        {
          type:3,
          name:"虫情测报",
        },
        {
          type:2,
          name:"杀虫灯"
        },
      ],
      currSelectType:0,
      currSelectSite:0,
      equipStyleLeft:0,
      // 海量点样式表
      equipPoints:[],
      massMarks:null,
      geocoder:null,
      equipStyleObject:[
        {
          url: require("@/assets/images/home/mapView/scd.png"), // 设别类型0
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/scd.png"), // 设别类型1
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/scd.png"), // 设别类型2
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/cbd.png"), // 设别类型3
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/xyq.png"), // 设别类型4
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/qxz.png"), // 设别类型5
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/jk.png"), // 设别类型6
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/bzy.png"), // 设别类型7
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/bzy.png"), // 设别类型8
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/tccb.png"), // 设别类型9
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
      ],
      queryInfo:{
        equip_id:"",
        d_id:"",
        type:"",
        model:""
      },
      // 信息弹框
      detailsShow:false,
      // 孢子仪弹框
      setTimeDialogVisible:false,
      time:{
        time01:"",
        time02:"",
      },
      // 孢子仪配置载玻片时间did
      currbzyGlass:"",
      // 设备tabs标签
      activeName: "equipState",
      nowPage: "equipState",
      pages:{
        "2":[{
          name:"equipState",
          label:"实时状态",
        },{
          name:"equipHistoryDate",
          label:"历史数据",
        }],
        "3":[{
          name:"equipState",
          label:"实时状态",
        },
        {
          name:"cbdPhoto",
          label:"查看图片",
        },
        {
          name:"equipHistoryDate",
          label:"历史数据",
        },
        // {
        //   name:"equipState",
        //   label:"害虫统计",
        // }
        ],
        "4":[{
          name:"equipState",
          label:"实时状态",
        },{
          name:"equipHistoryDate",
          label:"历史数据",
        }],
        "5":[{
          name:"qxzEquipState",
          label:"实时状态",
        },{
          name:"twentyFourHistoryDate",
          label:"24小时数据",
        },{
          name:"qxzEquipHistoryDate",
          label:"历史数据",
        }],
        "7":[{
          name:"equipState",
          label:"实时状态",
        },{
          name:"equipHistoryDate",
          label:"历史数据",
        }],
      },
      // 右侧控制
      sidebarState:false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeMapType(val){
      let o = amapManager.getMap();
      if(val==0){
        this.xyzTileLayer.hide()
        this.xyzTileLayer2.hide()
      }else{
        this.xyzTileLayer.show()
        this.xyzTileLayer2.show()
      }
    },
    changeEquip(index,item){
      this.currSelectType = item.type;
      this.currSelectSite = index;
      this.detailsShow = ''
      this.getEquipList(item.type)
      console.log(item.type);
      
      this.activeName = this.pages[item.type][0].name
      this.nowPage = this.pages[item.type][0].name
    },
    mouseOve(index,item){
      this.equipStyleLeft = 80*index
    },
    mouseOut(index,item){
      if(item.type!=this.currSelectType){
        this.equipStyleLeft = 80*this.currSelectSite
      }
    },
    iconFormat(equip_ip, item) {
      switch (equip_ip + "") {
        case "2":
          item.icon = require("@/assets/images/home/mapView/scd.png");
          break;
        case "3":
          item.icon = require("@/assets/images/home/mapView/cbd.png");
          break;
        case "4":
          item.icon = require("@/assets/images/home/mapView/xyq.png");
          break;
        case "5":
          item.icon = require("@/assets/images/home/mapView/qxz.png");
          break;
        case "6":
          item.icon = require("@/assets/images/home/mapView/jk.png");
          break;
        case "7":
          item.icon = require("@/assets/images/home/mapView/bzy.png");
          break;
        case "9":
          item.icon = require("@/assets/images/home/mapView/tccb.png");
          break;
      }
    },
    getEquipList(type) {
      this.componentMarker.position = []
      if(this.infoWindow){
        this.infoWindow.close()
      }
      let o = amapManager.getMap();
      o.setZoom(4);
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=home.homes.equip_map_location",
        data: this.qs.stringify({
          equip_type: type,
        })
      }).then(res => {
        if (res.data.message == "") {
          let data = res.data.data;
          this.equipShow = false;
          this.equips = data.map(item => {
            this.iconFormat(item.device_type_id, item);
            item.style = item.device_type_id
            if(item.gps_type == 1){ //GPS
              console.log(wgs84togcj02)
              item.lnglat = wgs84togcj02(item.lng,item.lat)
            }else{
              // this.lnglatFormat(item);
            }
            return item;
          });
          if(this.massMarks){
            this.massMarks.clear()
          }
          console.log(this.equips)
          this.massMarks = new AMap.MassMarks(this.equips, {
            zIndex: 199, // 海量点图层叠加的顺序
            zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
            style: this.equipStyleObject // 设置样式对象
          });
          this.massMarks.setMap(o)
          var _this = this
          this.massMarks.on('click',e =>{
            this.equipMarkerClick(e.data)
            // this.openInfo(e.data)
            console.log(e.data)
          })

          // this.equipPoints = []
          // this.equips.forEach((item) =>{
          //   this.equipPoints.push(new AMap.Marker({
          //     position: item.lnglat
          //   }))
          // }) 
          // this.$nextTick(()=>{
          //   o.setFitView(this.equipPoints)
          // })
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    equipMarkerClick(item) {
      this.equipShow = true; //图标上设备信息框
      this.equipsVisible = true; //右侧设备弹框
      this.detailsShow = item.device_type_id; //右侧弹框根据不同设备类型,显示设备信息
      this.currEquip = item;
      this.queryInfo.equip_id = item.device_id
      this.queryInfo.d_id = item.d_id
      this.queryInfo.type = item.device_type_id
      this.queryInfo.model = item.device_model
      this.sidebarComponents = "" //siderbar为空
    },
     //载玻片、培养液更换时间展示
    setTimeDialogShow(data){
      this.setTimeDialogVisible = true;
      this.time.time01 = data.glass
      this.time.time02 = data.cultivate
      this.currbzyGlass = data.d_id
    },
    //载玻片、培养液更换时间配置提交
    setTimeSubm() {
      let glass_slide_time = parseInt(
        new Date(this.time.time01).getTime() / 1000
      );
      let cultivate_time = parseInt(
        new Date(this.time.time02).getTime() / 1000
      );
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=device.device_manage.updata_spore_time",
        data: this.qs.stringify({
          device_type_id: 7,
          d_id: this.currbzyGlass,
          glass_slide_time,
          cultivate_time,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.$message.success("修改成功!");
        } else {
          this.$message.error(res.data.message);
        }
        this.setTimeDialogVisible = false;
      });
    },
    //tabs每次切换只渲染一个界面
    tabshandleClick(tab) {
      this.nowPage = tab.name;
     
    },
    // 查看更多控制
    lookmore(){
      this.sidebarComponents = 'sidebar'
      this.detailsShow=""
    },
    // 注销控制组件
    sidebarClear(val){
      this.sidebarComponents = ''
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.getEquipList('')
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.inner{
    height: 100%;
    position: relative;
    .mapCover{
        height: 100%;
    }
    .mapTypebox{
        position: absolute;
        right: 20px;
        top:30px;
        background: #fff;
        padding: 5px;
        border-radius: 5px;
    }
}
// tabs设备类型
.equipTypebox{
  position: absolute;
  left: 20px;
  top:30px;
  // background: #fff;
  line-height: 32px;
  border-radius: 20px;
  .equipTypeBody{
    position: relative;
    z-index: 10;
    background: #262a31;
    border-radius: 43px;
    color: #fff;
    .equipTypeList{
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      >div{
        width: 80px;
        text-align: center;
        border-radius: 20px;
        cursor: pointer;
      }
      >div.active{
        // background: #0195ff;
        // color:#eee;
      }
      >div:hover{
        // color: #eee;
      }
    }
    .equipHighLight{
      position: absolute;
      top: 0;
      height: 32px;
      width: 80px;
      border-radius: 20px;
      background: #0195ff;
      z-index: 0;
      transition: all 1s;
    }
  }
  
}

// 设备数据样式
.equipData{
  padding-top: 10px;
  position: relative;
  .more{
    position: absolute;
    right: 5px;
    top: 20px;
    z-index: 9999;
    cursor: pointer;
  }
  .more:hover{
    color: #0195ff;
  }
}
// 弹框tabs样式覆盖
/deep/.el-tabs__active-bar{
  background-color: #0295ff;
}

</style>