ykzz-app/pages/zhjs/subnvue/index.nvue

<template>
  <view class="zhjs-container">
    <u-navbar title="综合监视" :autoBack="true" :titleStyle="{
				fontSize:'18px'
			}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
    </u-navbar>
    <map :style="{
    		height: windowHeight + 'px',
    		top: '-' + statusBarHeight + 'px'
    	}" id="map" ref="map" :latitude="latitude" :longitude="longitude" :markers="marker" :show-location="true"
      :scale="scale" :enable-satellite="enableSatellite" theme="satellite" @markertap="markertap">
      <cover-image src="/static/tabs/dingwei.png" class="location" @click="onControlTap"></cover-image>
      <view class="tc-style">
        <cover-image src="/static/tabs/tc.png" style="width: 55rpx;height: 55rpx;"
          @click="onTcControlTap"></cover-image>
        <text style="font-size:12px;">图层</text>
      </view>
    </map>
    <u-popup :show="popupOpen" mode="right" @close="popupOpen=false">
      <view style="padding: 30px 10px 10px 10px; width: 300px;">
        <view>
          <text style="font-size: 16px;">底图类型</text>
          <view style="display: flex;
                          flex-direction: row; padding:10px;">
            <view style="display: flex; align-items: center; margin-right: 20px;">
              <cover-image src="/static/tabs/weix.png" style="width: 100rpx;height: 100rpx;"
                @click="onMode(1)"></cover-image>
              <text :style="typeChecked == 1 ? {color:'#227eff',fontSize:14} :{color:'#000',fontSize:14}">影像图</text>
            </view>
            <view style="display: flex; align-items: center;">
              <cover-image src="/static/tabs/slt.jpg" style="width: 100rpx;height: 100rpx;"
                @click="onMode(2)"></cover-image>
              <text :style="typeChecked == 2 ? {color:'#227eff',fontSize:14} :{color:'#000',fontSize:14}">矢量图</text>
            </view>
          </view>
        </view>

        <view style="margin-top: 30px;">
          <text style="font-size: 16px;">监视对象</text>
          <view style="display: flex;flex-direction: row; padding:10px;">
            <view v-for="item in watchObj" :key="item.id"
              style="display: flex; align-items: center; margin-right: 10px;">
              <cover-image :src="item.showIcon" style="width: 50rpx;height: 50rpx;"
                @click="toggleIcon(item)"></cover-image>
              <text :style="{color: item.textColor,fontSize:14}">{{item.name}}</text>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
  import moment from 'moment';
  const iconObj = {
    "溢洪道":{
      1: '/static/tabs/yhd1.png',
      2: "/static/tabs/yhd2.png"
    },
    "溢洪道位移":{
      1: '/static/tabs/zweiyi1.png',
      2: "/static/tabs/zweiyi2.png"
    },
    "渗流": {
      1: '/static/tabs/shenliu1.png',
      2: "/static/tabs/shenliu2.png"
    },
    "雨量": {
      1: '/static/tabs/sl1.png',
      2: "/static/tabs/sl2.png"
    },
    "水量": {
      1: '/static/tabs/yl1.png',
      2: "/static/tabs/yl2.png"
    },
    "主坝": {
      1: '/static/tabs/zhuba1.png',
      2: "/static/tabs/zhuba2.png"
    },
    "主坝位移": {
      1: '/static/tabs/zweiyi1.png',
      2: "/static/tabs/zweiyi2.png"
    },
    "主坝渗压": {
      1: '/static/tabs/zshenya1.png',
      2: "/static/tabs/zshenya2.png"
    },
    "视频监控": {
      1: '/static/tabs/sxt1.png',
      2: "/static/tabs/sxt2.png"
    },
    "发电洞": {
      1: '/static/tabs/fdt1.png',
      2: "/static/tabs/fdt2.png"
    },
    "发电洞渗压": {
      1: '/static/tabs/zshenya1.png',
      2: "/static/tabs/zshenya2.png"
    },  
    "发电洞位移": {
      1: '/static/tabs/zweiyi1.png',
      2: "/static/tabs/zweiyi2.png"
    },
    "副坝": {
      1: '/static/tabs/zhuba1.png',
      2: "/static/tabs/zhuba2.png"
    },
    "副坝位移": {
      1: '/static/tabs/zweiyi1.png',
      2: "/static/tabs/zweiyi2.png"
    },
  }
  export default {
    data() {
      return {
        latitude: 31.495,
        longitude: 114.767,
        enableSatellite: false,
        scale:16.5,
        popupOpen: false,
        typeChecked: 2,
        markers: [
          {
            latitude: 31.4962,
            longitude: 114.7691,
            iconPath: '/static/tabs/yhd1.png',
            width: 15,
            height: 15,
            id: 99,
            title: "溢洪道",
            pointType: "溢洪道",
            name: "水库工程"
          },
          {
            latitude: 31.4954,
            longitude: 114.7707,
            iconPath: '/static/tabs/zweiyi1.png',
            width: 15,
            height: 15,
            id: 98,
            title: "溢洪道位移监测",
            pointType: "溢洪道位移",
            name: "安全监测"
          },
          {
          latitude: 31.4956,
          longitude: 114.7691,
          iconPath: '/static/tabs/shenliu1.png',
          width: 15,
          height: 15,
          id: 100,
          title: "渗流监测",
          pointType: "渗流",
          name: "安全监测"
        },
        {
          latitude: 31.4933000,
          longitude: 114.7686000,
          iconPath: '/static/tabs/zweiyi1.png',
          width: 15,
          height: 15,
          id: 101,
          title: "主坝位移监测",
          pointType: "主坝位移",
          name: "安全监测"
        },
        {
          latitude: 31.4917000,
          longitude: 114.7686000,
          iconPath: '/static/tabs/zshenya1.png',
          width: 15,
          height: 15,
          id: 102,
          title: "主坝渗压监测",
          pointType: "主坝渗压",
          name: "安全监测"
        },
        {
          latitude: 31.492300,
          longitude: 114.7686000,
          iconPath: '/static/tabs/zhuba1.png',
          width: 15,
          height: 15,
          id: 103,
          title: "主坝",
          pointType: "主坝",
          name: "水库工程"
        },
        {
          latitude: 31.490900,
          longitude: 114.7666000,
          iconPath: '/static/tabs/fdt1.png',
          width: 15,
          height: 15,
          id: 104,
          title: "灌溉发电洞",
          pointType: "发电洞",
          name: "水库工程"
        },
        {
          latitude: 31.490500,
          longitude: 114.7664000,
          iconPath: '/static/tabs/zshenya1.png',
          width: 15,
          height: 15,
          id: 105,
          title: "灌溉发电洞渗压监测",
          pointType: "发电洞渗压",
          name: "安全监测"
        },
        {
          latitude: 31.490200,
          longitude: 114.7667000,
          iconPath: '/static/tabs/zweiyi1.png',
          width: 15,
          height: 15,
          id: 106,
          title: "灌溉发电洞变型监测",
          pointType: "发电洞位移",
          name: "安全监测"
        },
        {
          latitude: 31.491300,
          longitude: 114.7642000,
          iconPath: '/static/tabs/zhuba1.png',
          width: 15,
          height: 15,
          id: 107,
          title: "副坝",
          pointType: "副坝",
          name: "水库工程"
        },
        {
          latitude: 31.491200,
          longitude: 114.7636000,
          iconPath: '/static/tabs/zweiyi1.png',
          width: 15,
          height: 15,
          id: 108,
          title: "副坝位移监测",
          pointType: "副坝位移",
          name: "安全监测"
        },
        ],
        map: null,
        windowHeight: 0,
        windowHeight: 0,
        watchObj: [{
            icon1: "/static/tabs/shuiku1.png",
            icon2: "/static/tabs/shuiku2.png",
            name: "水库工程",
            id: 1,
            showIcon: "/static/tabs/shuiku2.png",
            textColor: "#02a7f0",
            isSelected1: true
          },
          {
            icon1: "/static/tabs/anquan1.png",
            icon2: "/static/tabs/anquan2.png",
            name: "安全监测",
            id: 2,
            showIcon: "/static/tabs/anquan2.png",
            textColor: "#02a7f0",
            isSelected2: true,
          },
          {
            icon1: "/static/tabs/shuiyu1.png",
            icon2: "/static/tabs/shuiyu2.png",
            name: "水雨情监测",
            id: 3,
            showIcon: "/static/tabs/shuiyu2.png",
            textColor: "#02a7f0",
            isSelected3: true,

          },
          {
            icon1: "/static/tabs/sxt1.png",
            icon2: "/static/tabs/sxt2.png",
            name: "视频监控",
            id: 4,
            showIcon: "/static/tabs/sxt2.png",
            textColor: "#02a7f0",
            isSelected4: true,
          }
        ]
      }
    },
    created() {
      let that = this;
      uni.getSystemInfo({
        success(res) {
          that.windowHeight = res.windowHeight;
          that.windowHeight = res.windowHeight + res.statusBarHeight;
          that.statusBarHeight = res.statusBarHeight;
          that.navTop = res.statusBarHeight + 10;
        }
      })
    },
    onReady() {
      this.map = uni.createMapContext("map")
    },
    methods: {
      onControlTap() {
        this.$refs.map.moveToLocation({
          latitude: 31.495,
          longitude: 114.767
        })
      },
      onTcControlTap() {
        this.popupOpen = true;
      },
      // 跳转详细信息
      jumpDeatails(type, data) {
        let url;
        if (type == "视频监控") {
          url=`/pages/spjk/spbf/index?info=${encodeURIComponent(JSON.stringify(data))}`
        }else if( type == '雨量'){
          url=`/pages/ylzList/detail/index?stnm=${data.stnm}&stcd=${data.stcd}`
        }else if( type == '水量'){
          url=`/pages/sws/detail/index?stnm=${data.stnm}&stcd=${data.stcd}`
        }else if( type == '渗流'){
          url=`/pages/sjc/index?name=渗流监测`
        }else if(type == "主坝位移"){
          url=`/pages/sjc/index?name=主坝位移监测`
        }else if(type == "主坝渗压"){
          url=`/pages/sjc/index?name=主坝渗压监测`
        }else if(type == "主坝"){
          url='/pages/skInfo/detail/index?value=2&key=1'
        }else if(type == "溢洪道位移"){
          url=`/pages/sjc/index?name=溢洪道位移监测`
        }else if(type == "溢洪道"){
          url='/pages/skInfo/detail/index?value=2&key=3'
        }else if(type == "发电洞"){
          url='/pages/skInfo/detail/index?value=2&key=4'
        }else if(type == "发电洞渗压"){
          url=`/pages/sjc/index?name=灌溉发电洞渗压监测`
        }else if(type == "发电洞位移"){
          url=`/pages/sjc/index?name=灌溉发电洞变型监测`
        }else if(type == "副坝"){
          url='/pages/skInfo/detail/index?value=2&key=2'
        }else if(type == "副坝位移"){
          url=`/pages/sjc/index?name=副坝位移监测`
        }
        uni.navigateTo({url})
      },
      markertap(e) {
        const newMarker = this.markers
        newMarker.forEach(((item, i) => {
          const type = item.pointType
          if (item.id == e.detail.markerId) {
            if (item.width == 25) {
              this.jumpDeatails(type, item)
              return;
            }
            item.height = 25;
            item.width = 25;
            item.iconPath = iconObj[type][2];
          } else {
            item.height = 15;
            item.width = 15;
            item.iconPath = iconObj[type][1];
          }
        }));
        this.markers = [...newMarker];
      },
      // 模式切换
      onMode(type) {
        this.typeChecked = type
        if (type == 1) {
          this.enableSatellite = true
          this.scale=15.5

        } else {
          this.enableSatellite = false
          this.scale = 16.5
        }
      },
      toggleIcon(item) {
        this.watchObj.forEach(i => {
          if (i.id === item.id) {
            i.showIcon = i["isSelected" + item.id] ? i.icon1 : i.icon2;;
            i.textColor = i["isSelected" + item.id] ? "black" : "#02a7f0";
            i["isSelected" + item.id] = !i["isSelected" + item.id];
          }
        });
      },
      // 获取视频点
      async getVideoList() {
        try {
          const {
            data
          } = await uni.$http.post("/gunshiApp/ykz/attCctvBase/list")
          if (data.code == 200) {
            const videoList = data.data.map(item => ({
              ...item,
              latitude: item.lttd - 0,
              longitude: item.lgtd - 0,
              iconPath: '/static/tabs/sxt1.png',
              width: 15,
              height: 15,
              title: item.name,
              id: item.id,
              pointType: "视频监控",
              name: "视频监控"
            }))
            this.markers = [...this.markers, ...videoList]
          }
        } catch (error) {
          uni.$showMsg();
        }
      },
      // 获取雨情点
      async getRainList() {
        try {
          const {
            data
          } = await uni.$http.post("/gunshiApp/ykz/real/rain/list", {
            stm: moment().add(-1, 'days').format('YYYY-MM-DD 08:00:00'),
            etm: moment(moment().format('YYYY-MM-DD 08:00:00'))
          })
          if (data.code == 200) {
            const rainList = data.data.map(item => ({
              ...item,
              latitude: item.lttd - 0,
              longitude: item.lgtd - 0,
              iconPath: '/static/tabs/sl1.png',
              width: 15,
              height: 15,
              title: item.stnm,
              id: item.stcd,
              pointType: "雨量",
              name: "水雨情监测",
               // joinCluster:true
            }))
            this.markers = [...this.markers, ...rainList]
          }
        } catch (error) {
          uni.$showMsg();
        }
      },
      // 获取水量点
      async getWaterList() {
        try {
          const {
            data
          } = await uni.$http.post("/gunshiApp/ykz/reservoir/water/list", )
          if (data.code == 200) {
            const waterList = data.data.map(item => ({
              ...item,
              latitude: item.lttd - 0.0001,
              longitude: item.lgtd - 0.0001,
              iconPath: '/static/tabs/yl1.png',
              width: 15,
              height: 15,
              title: item.stnm,
              id: item.stcd + '0',
              pointType: "水量",
              name: "水雨情监测",
              // joinCluster:true
            }))
            this.markers = [...this.markers, ...waterList]
          }
        } catch (error) {
          uni.$showMsg();
        }
      },
    },
    computed: {
      marker() {
        const filterCat = this.watchObj.filter((item, i) => item['isSelected' + (i + 1)])
        const res = this.markers.filter(item => {
          return filterCat.some((o => o.name == item.name))
        })
        return res.slice(0)
      }
    },
    mounted() {
      this.getVideoList();
      this.getRainList();
      this.getWaterList();
    }
  }
</script>

<style lang="scss">
  .location {
    position: absolute;
    width: 35px;
    height: 35px;
    bottom: 50px;
    left: 10px;
    background-color: #fff;
    padding: 5px;
  }

  .tc-style {
    display: flex;
    align-items: center;
    position: absolute;
    font-size: 12px;
    padding: 5px;
    top: 200px;
    right: 10px;
    background-color: #fff;

    // padding: 5px;
  }
</style>