代码优化

linwe

2024-11-22 ddb76492b96539151ab1947660b3bcbd9e20e302

代码优化

 src/pages/layout/components/scomponents/layersControl.vue

@@ -576,7 +576,6 @@
        } else {
          addTileLayers[item.layerName].forEach(i => i.show = true)
        }
        console.log(addTileLayers[item.layerName], "11111111111111111111111111111")
      } else if (item.subType == 'labelPoint') {
        if (!addTileLayers[item.layerName]) {
          addTileLayers[item.layerName] = new DC.HtmlLayer(item.layerName)
@@ -646,8 +645,9 @@
        } else {
          addTileLayers[item.layerName].show = true
        }
        // 飞到园区范围
        window.$viewer.flyTo(addTileLayers[item.layerName])
        console.log(addTileLayers[item.layerName], "22222222222222222222222222222222")
        // console.log('flyToyqfw********2222222222*******************************', addTileLayers[item.layerName])
      } else if (item.subType == 'geojsonPipe') {
        if (!addTileLayers[item.layerName]) {
          addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName)
@@ -743,8 +743,15 @@
  handleCheckChange([findObjectById(data, key)])
}

// 飞到园区范围
const flyToyqfw = () => {
  console.log('flyToyqfw***************************************', addTileLayers['yqfw'])
  window.$viewer.flyTo(addTileLayers['yqfw'])
}

EventBus.on('restHandleCheckChange', restHandleCheckChange)
EventBus.on('restHandleDelChange', restHandleDelChange)
EventBus.on('flyToyqfw', flyToyqfw)

onMounted(() => {
  handleCheckChange(data.filter(i => indexPoint.value.includes(i.id)))

 src/styles/base/dc-base.scss

@@ -116,8 +116,57 @@
  }

  .marsBlueGradientPnl img {
    vertical-align: middle;
    width: 160px;
    height: 160px;
  }
}

.public-map-popup-three {
  position: absolute;
  bottom: 160px;
  pointer-events: all;
  display: block;
  transform-origin: left bottom;
  transform: translate(-50%, 0px);
  border-radius: 5px;
  z-index: auto;

  &::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: calc(50% - 3px);
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #69a7e4; // 三角形的颜色
    transform: rotate(180deg);
    z-index: -1;
  }

  .marsBlueGradientPnl {
    padding: 2px 2px;
    // position: absolute;
    text-align: center;
    margin: 0;
    color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    line-height: 25px;
    width: 240px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    word-wrap: break-word;
    font-size: 14px;
    font-weight: bold;
    box-shadow: inset 0 0 40px #409eff;
    // background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
  }
}

@@ -128,6 +177,7 @@

  .map-name {
    color: rgba(255, 201, 0, 1);
    width: 240px;
  }

  .map-icon {
@@ -143,6 +193,7 @@

  .map-name {
    color: #ff3b3b;
    width: 240px;
  }

  .map-icon {

 src/views/companyInfo/components/box/fireTrend.vue

@@ -82,8 +82,6 @@
}
// 应急物资图片
let picList = ref([])
// 应急物资
let emergencySupplies = reactive({})

// 查询分页数据
function getLists(param = {}) {
@@ -95,11 +93,6 @@
    .then((res) => {
      const data = res.data.data
      tableData.value = data.dataList
      data.dataList.forEach(item => {
        if (item.lng && item.lat) {
          emergencySupplies = item
        }
      })
      picList.value = data.picList
      pages.total = data.total
      loading.value = false
@@ -110,9 +103,14 @@
    })
}
let addTileLayers = {}
// 行点击
function rowClick() {
let addPupoLayers = {}

// 行点击
function rowClick(row, column, event) {
  if (!row.lng || !row.lat) {
    return
  }
  // console.log('点击了', row, column, event)
  // 销毁之前的
  destroy()
  if (!addTileLayers[row.name]) {
@@ -130,10 +128,33 @@
                    ${iconEl}
                  </div>`
    )

    let incident = () => { }

    // if (item.incident) incident = item.incident
    divIcon.attrParams = row
    let incident = (e) => {
      // const { attrParams } = e.overlay
      // // 删除
      // destroyPupoLayers()
      // if (picList.value.length == 0) {
      //   return
      // }
      // console.log('点击了', picList.value.length)
      // addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
      // window.$viewer.addLayer(addPupoLayers[attrParams.name])
      // let iconEl = `<div class="marsBlueGradientPnl">
      //       <div>${attrParams.fullName}</div>
      //       <img src="${picList.value[0].link}" />
      //           </div>`
      // let divIcon = new DC.DivIcon(
      //   new DC.Position(attrParams.lng, attrParams.lat, 64),
      //   `<div class="public-map-popup-two">
      //               ${iconEl}
      //             </div>`
      // )
      // let incident = () => {
      //   destroyPupoLayers()
      // }
      // divIcon.on(DC.MouseEventType.CLICK, incident)
      // addPupoLayers[attrParams.name].addOverlay(divIcon)
    }

    divIcon.on(DC.MouseEventType.CLICK, incident)

@@ -151,7 +172,14 @@
  })
  addTileLayers = {}
}

// 销毁
function destroyPupoLayers() {
  let arr = Object.keys(addPupoLayers)
  arr.filter(i => i != 'hgyq').forEach(i => {
    addPupoLayers[i] && window.$viewer.removeLayer(addPupoLayers[i])
  })
  addPupoLayers = {}
}
onUnmounted(() => {
  console.log('销毁***************************')
  destroy()
@@ -172,7 +200,7 @@
    </el-form>
    <!-- <global-search :options="options" @searchBtn="searchBtn" @resetBtn="resetBtn" ref="SeachBarCondition"></global-search> -->
    <div class="table-box">
      <el-table :data="tableData" @click="rowClick()" empty-text="" style="width: 100%"
      <el-table :data="tableData" @row-click="rowClick" empty-text="" style="width: 100%"
        :header-cell-style="headerCellStyle" :cell-style="tableCellStyle"
        element-loading-background="rgba(122, 122, 122, 0.1)">
        <el-table-column prop="name" label="名称" width="240" />

 src/views/companyInfo/components/box/unitContent.vue

@@ -10,6 +10,7 @@
-->
<script setup>
import EventBus from 'utils/bus'
import { nextTick } from 'vue'

import { getDictionary } from "@/api/dict/dict"
import { onUnmounted, reactive } from 'vue'
@@ -53,9 +54,7 @@
                    new DC.Position(i.lng, i.lat, 64),
                    `<div class="public-map-popup  ${'yjc-box'}"> ${iconEl}  </div>`
                )

                divIcon.attrParams = i

                let incident = (e) => {
                    const { attrParams } = e.overlay
                    // 删除
@@ -107,6 +106,10 @@
    })
    addPupoLayers = {}
}
nextTick(() => {
    EventBus.emit('restHandleCheckChange', `3-3-2`)
    EventBus.emit('restHandleCheckChange', `3-3-4`)
})
onUnmounted(() => {
    console.log('leftContainer unmounted***********************')
    let arr = Object.keys(addTileLayers)
@@ -114,6 +117,8 @@
        addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
    })
    destroy()
    EventBus.emit('restHandleDelChange', `3-3-2`)
    EventBus.emit('restHandleDelChange', `3-3-4`)
})
</script>


 src/views/pac/components/box/dataContent.vue

@@ -153,7 +153,7 @@
  curSelect.value = '1'
  pointStore.updateSharedData(1)
  tabClick(resData.data[0])

  EventBus.emit('flyToyqfw', 'flyToyqfw')
})

onUnmounted(() => {
@@ -161,6 +161,9 @@
  arr.forEach(i => {
    addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i])
  })

  EventBus.emit('restHandleDelChange', `3-3-2`)
  EventBus.emit('restHandleDelChange', `3-3-4`)
})
</script>


 src/views/rs/components/box/dataContent.vue

@@ -35,6 +35,20 @@
  ]
})

const resData = reactive({
  data: [
    {
      label: '一般',
      value: 1
    },
    {
      label: '较大',
      value: 2
    }
  ]
})

const curSelect = ref('')
const tableData = ref([])
const pages = {
  page: 1,
@@ -74,6 +88,7 @@

onMounted(() => {
  curTableHeight.value = TableContent.value.offsetHeight
  EventBus.emit('flyToyqfw', 'flyToyqfw')
})

// 分页改变
@@ -106,10 +121,32 @@
let state = reactive({
  layer: {}
})

let addPupoLayers = {}
// 行点击
function rowClick(row) {
  window.$viewer.flyToPosition(new DC.Position(row.lng, row.lat, 600, 0, -90, 0))
function rowClick(row, column, event) {
  if (row.lng && row.lat) {
    window.$viewer.flyToPosition(new DC.Position(row.lng, row.lat, 600, 0, -90, 0))
    // 显示企业信息
    // 删除
    destroyPupoLayers()
    addPupoLayers[row.firmName] = new DC.HtmlLayer(row.firmName)
    window.$viewer.addLayer(addPupoLayers[row.firmName])
    let iconEl = `<div class="marsBlueGradientPnl">
            <li>${row.firmName || ''}</li>
            <li>${row.riskLevelName || ''}</li>
            </div>`
    let divIcon = new DC.DivIcon(
      new DC.Position(row.lng, row.lat, 64),
      `<div class="public-map-popup-three">
                    ${iconEl}
                  </div>`
    )
    let incident = () => {
      destroyPupoLayers()
    }
    divIcon.on(DC.MouseEventType.CLICK, incident)
    addPupoLayers[row.firmName].addOverlay(divIcon)
  }
}


@@ -147,38 +184,76 @@
  })
}

const tabClick = (item) => {
  console.log(item, 12312)
  if (curSelect.value) EventBus.emit('restHandleDelChange', `4-${curSelect.value}`)
  curSelect.value = item.value
  EventBus.emit('restHandleCheckChange', `4-${item.value}`)
  EventBus.emit('rsTabChange', item.value)
}

nextTick(() => {
  tabClick(resData.data[0])
})

const showOn = computed(() => (item) => {
  if (curSelect.value == item.value) {
    return true
  }

  return false
})

EventBus.on('rsTabChange', spaceTabChange)

onUnmounted(() => {
  EventBus.off('rsTabChange', spaceTabChange)
  if (curSelect.value) EventBus.emit('restHandleDelChange', `4-${curSelect.value}`)
  destroyPupoLayers()
})

// 销毁
function destroyPupoLayers() {
  let arr = Object.keys(addPupoLayers)
  arr.forEach(i => {
    addPupoLayers[i] && window.$viewer.removeLayer(addPupoLayers[i])
  })
  addPupoLayers = {}
}
</script>

<template>
  <div class="w100 h0 flex-1 flex f-d-c">
    <global-search :options="options" @searchBtn="searchBtn" @resetBtn="resetBtn" ref="SeachBarCondition"></global-search>

    <div class="cur-container">
      <div class="tablist">
        <div class="cursor-p" :class="{ on: showOn(item) }" v-for="item, index in resData.data" :key="index"
          @click="tabClick(item)">
          <div class="label-box">
            {{ item.label }}
          </div>
        </div>
      </div>
    </div>
    <div class="h0 flex-1 table-content" ref="TableContent" v-loading="loading"
      element-loading-background="rgba(46, 81, 136, 0.9)">
      <el-table border :data="tableData" :height="curTableHeight" style="width: 100%">
        <el-table-column align="center" label="序号" width="62" prop="rank">
      <el-table @row-click="rowClick" border :data="tableData" :height="curTableHeight" style="width: 100%">
        <el-table-column align="center" label="ID" width="42" prop="rank">
          <template #default="{ $index, row }">
            {{ (pages.page - 1) * pages.pageSize + $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="firmName" label="企业名称" />
        <el-table-column align="center" show-overflow-tooltip prop="name" label="名称" />
        <el-table-column align="center" show-overflow-tooltip prop="category" label="类别" width="92" />
        <el-table-column align="center" show-overflow-tooltip prop="mainProduct" label="主要产品" width="112" />
        <el-table-column align="center" width="62" label="操作">
        <!-- <el-table-column align="center" show-overflow-tooltip prop="category" label="类别" width="92" /> -->
        <!-- <el-table-column align="center" show-overflow-tooltip prop="mainProduct" label="主要产品" width="112" /> -->
        <!-- <el-table-column align="center" width="62" label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" :disabled="scope.row.lng == ''" @click="rowClick(scope.row)">
              定位
            </el-button>
            <!-- <el-button link type="primary" size="small" @click="goDetail">
                <i class="el-icon-document" style="color: #66b1ff"></i>详情
              </el-button> -->
          </template>
        </el-table-column>
        </el-table-column> -->
      </el-table>
    </div>

@@ -198,4 +273,44 @@
  flex-basis: auto;
  height: calc(100% - 40px);
}

.cur-container {
  background: transparent;
  pointer-events: none;


  .tablist {
    pointer-events: all;
    display: flex;
    // align-items: center;
    justify-content: space-around;

    &>div {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 5px 0;
      padding: 5px;
      width: 34px;
      height: 24px;

      border-radius: 30%;
      box-shadow: inset 0 0 40px #65aef8;
      color: #fff;
      box-sizing: content-box;

      &.on {
        position: relative;
        // color: #75b1ff;
        box-shadow: inset 0 0 40px #0976e4;
      }

      .label-box {
        line-height: 14px;
        font-size: 14px;
        text-align: center;
      }
    }
  }
}
</style>

 src/views/rs/index.vue

@@ -15,7 +15,7 @@

<template>
  <div class="container page-container">
    <left-container></left-container>
    <!-- <left-container></left-container> -->
    <right-container></right-container>
  </div>
</template>

 src/views/space/components/box/dataContent.vue

@@ -44,7 +44,7 @@
  total: 0,
}

function positionColor () {
function positionColor() {
  return (row) => {
    if (
      (row.X && row.X != 0) ||
@@ -59,7 +59,7 @@
  }
}

function positionDisabled () {
function positionDisabled() {
  return (row) => {
    if (
      (row.X && row.X != 0) ||
@@ -109,36 +109,39 @@
  layer: {}
})


let addPupoLayers = {}
// 行点击
function rowClick (row) {

  // if (state.layer) {
  //   window.$viewer.removeLayer(state.layer)
  // }
  // let layer = new DC.HtmlLayer(`${row.id}`)
  // state.layer = layer
  // window.$viewer.addLayer(layer)
  // let iconEl = `<div class="marsBlueGradientPnl">
  //                 <div>${row.name}</div>
  //               </div>`
  // let divIcon = new DC.DivIcon(
  //   new DC.Position(row.lng, row.lat, 0),
  //   `<div class="public-map-popup">
  //                   ${iconEl}
  //                 </div>`
  // )
  // let incident = () => { }
  // divIcon.on(DC.MouseEventType.CLICK, incident)
  // layer.addOverlay(divIcon)

  window.$viewer.flyToPosition(new DC.Position(row.lng, row.lat, 600, 0, -90, 0))

function rowClick(row, column, event) {
  if (row.lng && row.lat) {
    window.$viewer.flyToPosition(new DC.Position(row.lng, row.lat, 600, 0, -90, 0))
    if (!row.imageUrl) {
      return
    }
    // 删除
    destroyPupoLayers()
    addPupoLayers[row.name] = new DC.HtmlLayer(row.name)
    window.$viewer.addLayer(addPupoLayers[row.name])
    let iconEl = `<div class="marsBlueGradientPnl">
            <div>${row.fullName}</div>
            <img src="${row.imageUrl}" />
                </div>`
    let divIcon = new DC.DivIcon(
      new DC.Position(row.lng, row.lat, 64),
      `<div class="public-map-popup-two">
                    ${iconEl}
                  </div>`
    )
    let incident = () => {
      destroyPupoLayers()
    }
    divIcon.on(DC.MouseEventType.CLICK, incident)
    addPupoLayers[row.name].addOverlay(divIcon)
  }
}


// 查看详情
function goDetail (row) { }
function goDetail(row) { }

const searchBtn = (params) => {
  resetPage()
@@ -165,7 +168,6 @@

const spaceTabChange = (type) => {
  curSelectTabType.value = type

  nextTick(() => {
    searchBtn(SeachBarCondition.value.getSeachCondition())
  })
@@ -175,18 +177,27 @@

onUnmounted(() => {
  EventBus.off('spaceTabChange', spaceTabChange)
  destroyPupoLayers()
})

// 销毁
function destroyPupoLayers() {
  let arr = Object.keys(addPupoLayers)
  arr.forEach(i => {
    addPupoLayers[i] && window.$viewer.removeLayer(addPupoLayers[i])
  })
  addPupoLayers = {}
}
</script>

<template>
  <div class="w100 h0 flex-1 flex f-d-c">
    <global-search :options="options" @searchBtn="searchBtn" @resetBtn="resetBtn"
      ref="SeachBarCondition"></global-search>
    <global-search :options="options" @searchBtn="searchBtn" @resetBtn="resetBtn" ref="SeachBarCondition"></global-search>

    <div class="h0 flex-1 table-content" ref="TableContent" v-loading="loading"
      element-loading-background="rgba(46, 81, 136, 0.9)">
      <el-table border :data="tableData" :height="curTableHeight" style="width: 100%">
        <el-table-column align="center" label="序号" width="62" prop="rank">
      <el-table @row-click="rowClick" border :data="tableData" :height="curTableHeight" style="width: 100%">
        <el-table-column align="center" label="ID" width="42" prop="rank">
          <template #default="{ $index, row }">
            {{ (pages.page - 1) * pages.pageSize + $index + 1 }}
          </template>
@@ -194,16 +205,13 @@
        <el-table-column align="center" show-overflow-tooltip prop="firmName" label="企业名称" />
        <el-table-column align="center" show-overflow-tooltip prop="name" label="名称" />
        <el-table-column align="center" prop="mainFuncName" label="作用" width="62" />
        <el-table-column align="center" width="62" label="操作">
        <!-- <el-table-column align="center" width="62" label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" :disabled="scope.row.lng == ''" @click="rowClick(scope.row)">
              定位
            </el-button>
            <!-- <el-button link type="primary" size="small" @click="goDetail">
                <i class="el-icon-document" style="color: #66b1ff"></i>详情
              </el-button> -->
          </template>
        </el-table-column>
        </el-table-column> -->
      </el-table>
    </div>


 src/views/space/components/leftContainer.vue

@@ -40,6 +40,7 @@
  curSelect.value = item.value
  EventBus.emit('restHandleCheckChange', `3-${item.value}`)
  EventBus.emit('spaceTabChange', item.value)
  EventBus.emit('flyToyqfw', 'flyToyqfw')
}

const showOn = computed(() => (item) => {