lc_tunnel/web/src/view/screen/components/map.vue

<template>
  <tlbs-map
    ref="mapRef"
    api-key="3SVBZ-6MYYZ-Q75X5-7YN43-BMIBZ-YABND"
    :center="center"
    :zoom="zoom"
    :control="control"
    class="mapBox"
    :options="mapOption"
    @click="onClick"
    @map_inited="onMapInited"
  >
    <tlbs-multi-marker
      ref="markerRef"
      :geometries="geometries"
      :styles="styles"
      :options="options"
      @click="openInfo"
    />
  </tlbs-map>
  <el-dialog
    v-model="dialogVisible"
    width="350px"
    title="隧道信息"
    align-center
  >
    <el-form
      size="large"
      label-width="70px"
      label-position="left"
      label-suffix=""
    >
      <el-form-item label="名称：">
        <el-text size="large">{{ dialogData.name }}</el-text>
      </el-form-item>
      <el-form-item label="类型：">
        <el-text size="large">{{ dialogData.switchType }}</el-text>
      </el-form-item>
      <el-form-item label="灯控1：">
        <el-slider
          v-if="dialogData.switchType === '单灯控制器'"
          v-model="transparency"
          :step="50"
          show-stops
          :show-tooltip="false"
          @change="changeTransparency($event,'单灯','')"
        />
        <div
          v-if="dialogData.switchType === '四路控制器'"
          style="width: 100%;display: flex; justify-content: space-between"
        >
          <el-switch
            v-for="(item,index) in relayList[0].relay"
            :key="item.id"
            v-model="item.state"
            :disabled="index === 0"
            @change="changeTransparency($event,'四路',item)"
          />
        </div>
      </el-form-item>
      <el-form-item label="灯控2：">
        <el-slider
          v-if="dialogData.switchType === '单灯控制器'"
          v-model="transparencyTwo"
          :step="50"
          show-stops
          :show-tooltip="false"
          @change="changeTransparencyTwo($event,'单灯','')"
        />
        <div
          v-if="dialogData.switchType === '四路控制器'"
          style="width: 100%;display: flex; justify-content: space-between"
        >
          <el-switch
            v-for="(item,index) in relayList[1].relay"
            :key="item.id"
            v-model="item.state"
            :disabled="index === 0"
            @change="changeTransparencyTwo($event,'四路',item)"
          />
        </div>
      </el-form-item>
      <el-form-item
        v-if="dialogData.switchType === '单灯控制器'"
        label-width="0"
      >
        <el-button
          type="primary"
          style="width: 100%"
          @click="singleLamp"
        >
          设定
        </el-button>
      </el-form-item>
      <el-form-item label-width="0">
        <div style="width: 100%; display: flex; justify-content: space-between">
          <el-button
            type="primary"
            @click="callParentMethod"
          >查看数据</el-button>
          <el-button
            type="primary"
          >查看模型</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { defineComponent, ref, reactive, onMounted } from 'vue-demi'
import { useScreenStore } from '@/pinia/modules/screen'
import { updateTunnelLamp } from '@/api/tunnel'
import { ElMessage } from 'element-plus'
import { deviceSwitch } from '@/api/device'
const useScreen = useScreenStore()
export default defineComponent({
  name: 'MarkerDemo',
  setup() {
    const mapRef = ref(null)
    const markerRef = ref(null)
    const center = ref({ lat: 28.7052848, lng: 113.5759597 })
    const zoom = ref(10)
    const geometries = ref(useScreen.placeList)
    const dialogVisible = ref(false)
    const dialogData = ref({})
    const mapOption = ref({
      mapStyleId: 'style1'
    })
    const onClick = (e) => {
      console.log(e.latLng)
    }

    const onMapInited = () => {
      // 地图加载完成后，可以获取地图实例、点标记实例，调用地图实例、点标记实例方法
      // console.log(mapRef.value.map)
      // console.log(markerRef.value.marker)
    }

    const getLayerInstance = () => {
      // 可以获取点标记实例，调用点标记实例方法
      console.log(markerRef.value.marker)
    }
    const openInfo = (e) => {
      dialogVisible.value = true
      const id = e.geometry.styleId
      const list = useScreen.tunnelList
      list.forEach(item => {
        if (item.ID === id) {
          dialogData.value = item
          brightness(item)
        }
      })
    }
    const callParentMethod = () => {
      useScreen.setCurrentTunnel(dialogData.value)
      dialogVisible.value = false
    }
    // 亮度调节
    const transparency = ref(0)
    const transparencyTwo = ref(0)
    const materialOne = reactive({})
    const materialTwo = reactive({})
    const relayList = reactive([])
    const lampData = reactive({})
    const brightness = (item) => {
      Object.assign(lampData, item)
      if (item.switchType === '单灯控制器') {
        const val1 = item.lampValue1
        const val2 = item.lampValue2
        const judge = {
          0: [0.8, 0],
          33: [0.8, 0],
          66: [0.5, 50],
          100: [0.2, 100],
        }
        transparency.value = judge[val1][1]
        transparencyTwo.value = judge[val2][1]
        materialOne.opacity = judge[val1][0]
        materialTwo.opacity = judge[val2][0]
      } else if (item.switchType === '四路控制器') {
        relayList.length = 0
        item.devices.forEach(option => {
          if (option.genre === 6) {
            relayList.push({ radarId: option.radarId, relay: option.deviceRelays })
          }
        })
      }
    }
    const changeTransparency = (e, type, data) => {
      // materialOne.opacity = option[e][0]
      if (type === '单灯') {
        transparency.value = e
      } else {
        deviceSwitch({
          tunnelSn: lampData.tunnelSn,
          radarId: relayList[0].radarId,
          relayId: data.relayId,
          state: e
        }).then(res => {
          if (res.code === 0) {
            console.log('发送成功')
          }
        })
      }
    }
    const changeTransparencyTwo = (e, type, data) => {
      // materialOne.opacity = option[e][0]
      if (type === '单灯') {
        transparencyTwo.value = e
      } else {
        deviceSwitch({
          tunnelSn: lampData.tunnelSn,
          radarId: relayList[1].radarId,
          relayId: data.relayId,
          state: e
        }).then(res => {
          if (res.code === 0) {
            console.log('发送成功')
          }
        })
      }
    }
    const singleLamp = () => {
      const option = {
        0: [0.8, 33, 1],
        50: [0.5, 66, 2],
        100: [0.2, 100, 3]
      }
      const lamp1 = option[transparency.value][1]
      const lamp2 = option[transparencyTwo.value][1]
      updateTunnelLamp({
        id: lampData.ID,
        tunnelSn: lampData.tunnelSn,
        lampValue1: lamp1,
        lampValue2: lamp2
      }).then(res => {
        if (res.code === 0) {
          ElMessage.success('已发送')
        }
      })
    }
    onMounted(() => {
      setTimeout(function() {
        center.value = useScreen.placeList[0].position
      }, 500)
    })
    return {
      center,
      zoom,
      onClick,
      onMapInited,
      getLayerInstance,
      control: {
        scale: {},
        zoom: {
          position: 'topRight',
        },
      },
      mapRef,
      markerRef,
      geometries,
      styles: {
        marker: {
          width: 20,
          height: 30,
          anchor: { x: 10, y: 30 },
        },
      },
      options: {
        minZoom: 5,
        maxZoom: 15,
      },
      openInfo,
      dialogVisible,
      dialogData,
      callParentMethod,
      mapOption,
      // 亮度调节
      transparency,
      transparencyTwo,
      materialOne,
      materialTwo,
      brightness,
      changeTransparency,
      changeTransparencyTwo,
      relayList,
      singleLamp
    }
  },
})
</script>

<style scoped lang="less">
.mapBox{
  width: 1200px;
  height: 600px;
}

.infoDialog{
  width: 300px;
  height: 100px;
}
</style>