智慧园区前端大屏
shuishen
2024-12-03 86b380cf4f5bc6d210c89c7c02d9ba27c80f9ccb
Merge branch 'main' of http://139.196.74.78:10010/r/zhyq/bigScreen
8 files modified
1 files added
261 ■■■■■ changed files
public/img/mapicon/wstsb.png patch | view | raw | blame | history
src/pages/map/components/scomponents/layersControl.vue 122 ●●●● patch | view | raw | blame | history
src/styles/base/dc-base.scss 70 ●●●● patch | view | raw | blame | history
src/views/companyInfo/components/box/dataContent.vue 10 ●●●●● patch | view | raw | blame | history
src/views/companyInfo/components/box/unitContent.vue 3 ●●●● patch | view | raw | blame | history
src/views/pac/components/box/dataContent.vue 11 ●●●● patch | view | raw | blame | history
src/views/rs/components/box/dataContent.vue 9 ●●●●● patch | view | raw | blame | history
src/views/space/components/box/dataContent.vue 5 ●●●●● patch | view | raw | blame | history
src/views/space/components/leftContainer.vue 31 ●●●●● patch | view | raw | blame | history
public/img/mapicon/wstsb.png
src/pages/map/components/scomponents/layersControl.vue
@@ -50,7 +50,7 @@
</template>
<script setup>
let addPupoLayers = {}
let addPopLayers = {}
let addTileLayers = {}
let tileLayers = new DC.TilesetLayer('tileLayers')
window.$viewer.addLayer(tileLayers)
@@ -168,14 +168,14 @@
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          // if (!attrParams.imageUrl) {
          //   return
          // }
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          destroyPop()
          if (!attrParams.firmName) {
            return
          }
          addPopLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPopLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
            <div>${attrParams.fullName}</div>
            <div>${attrParams.firmName}</div>
                </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
@@ -184,10 +184,10 @@
                  </div>`
          )
          let incident = () => {
            destroy()
            destroyPop()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
          addPopLayers[attrParams.name].addOverlay(divIcon)
        }
      },
      {
@@ -207,15 +207,14 @@
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          if (!attrParams.imageUrl) {
          destroyPop()
          if (!attrParams.firmName) {
            return
          }
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          addPopLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPopLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
                  <div>${attrParams.fullName}</div>
                  <img src="${attrParams.imageUrl}" width="160" height="160" />
                  <div>${attrParams.firmName}</div>
                </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
@@ -224,10 +223,10 @@
                  </div>`
          )
          let incident = () => {
            destroy()
            destroyPop()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
          addPopLayers[attrParams.name].addOverlay(divIcon)
        }
      },
@@ -285,20 +284,25 @@
        type: 'layer',
        subType: 'labelPoint',
        method: getList,
        // className: 'sk-box',
        // showPanel: false,
        params: {
          type: 4,
          size: 1000
        },
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/wstsb.png',
        className: 'yjc-box',
        showPanel: false,
        layerName: 'wstsbz',
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          destroyPop()
          if (!attrParams.imageUrl) {
            return
          }
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          addPopLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPopLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
                  <div>${attrParams.fullName}</div>
                  <img src="${attrParams.imageUrl}" width="160" height="160" />
@@ -310,10 +314,10 @@
                  </div>`
          )
          let incident = () => {
            destroy()
            destroyPop()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
          addPopLayers[attrParams.name].addOverlay(divIcon)
        }
      },
@@ -334,14 +338,14 @@
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          destroyPop()
          if (!attrParams.imageUrl) {
            return
          }
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          addPopLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPopLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
                   <div>${attrParams.fullName}</div>
                   <div>${attrParams.firmName}</div>
                  <img src="${attrParams.imageUrl}" width="160" height="160" />
                </div>`
          let divIcon = new DC.DivIcon(
@@ -351,10 +355,10 @@
                  </div>`
          )
          let incident = () => {
            destroy()
            destroyPop()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
          addPopLayers[attrParams.name].addOverlay(divIcon)
        }
      },
@@ -375,15 +379,14 @@
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          if (!attrParams.imageUrl) {
          destroyPop()
          if (!attrParams.firmName) {
            return
          }
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          addPopLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPopLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
                  <div>${attrParams.fullName}</div>
                  <img src="${attrParams.imageUrl}" width="160" height="160" />
                  <div>${attrParams.firmName}</div>
                </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
@@ -392,10 +395,10 @@
                  </div>`
          )
          let incident = () => {
            destroy()
            destroyPop()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
          addPopLayers[attrParams.name].addOverlay(divIcon)
        }
      },
@@ -485,11 +488,13 @@
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          destroyPop()
          addPopLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPopLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
            <li>${attrParams.firmName || ''}</li>
            <li>${attrParams.name || ''}</li>
            <li>${attrParams.riskLevelName || ''}</li>
            </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
@@ -498,10 +503,10 @@
                  </div>`
          )
          let incident = () => {
            destroy()
            destroyPop()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
          addPopLayers[attrParams.name].addOverlay(divIcon)
        }
      },
      {
@@ -522,11 +527,13 @@
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          destroyPop()
          addPopLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPopLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl"> 
            <li>${attrParams.firmName || ''}</li>
            <li>${attrParams.name || ''}</li>
            <li>${attrParams.riskLevelName || ''}</li>
            </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
@@ -535,10 +542,10 @@
                  </div>`
          )
          let incident = () => {
            destroy()
            destroyPop()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
          addPopLayers[attrParams.name].addOverlay(divIcon)
        }
      }
    ]
@@ -925,6 +932,7 @@
EventBus.on('restHandleCheckChange', restHandleCheckChange)
EventBus.on('restHandleDelChange', restHandleDelChange)
EventBus.on('flyToyqfw', flyToyqfw)
EventBus.on('destroyPop', destroyPop)
onMounted(() => {
  handleCheckChange(data.filter(i => indexPoint.value.includes(i.id)))
@@ -950,12 +958,12 @@
  EventBus.emit('restHandleDelChange', `3-6`)
  EventBus.emit('restHandleDelChange', `3-7`)
  EventBus.emit('restHandleDelChange', `3-8`)
  EventBus.emit('restHandleDelChange', `3-9`)
  // EventBus.emit('restHandleDelChange', `3-9`)
  EventBus.emit('restHandleDelChange', `4`)
  EventBus.emit('restHandleDelChange', `4-1`)
  EventBus.emit('restHandleDelChange', `4-2`)
  EventBus.emit('restHandleDelChange', `8`)
  destroy()
  destroyPop()
}
// const sharedData = computed(() => pointStore.sharedData);
@@ -971,14 +979,14 @@
)
// 销毁
function destroy () {
  let arr = Object.keys(addPupoLayers)
function destroyPop () {
  let arr = Object.keys(addPopLayers)
  arr.filter(i => i != 'hgyq').forEach(i => {
    addPupoLayers[i] && window.$viewer && window.$viewer.removeLayer(addPupoLayers[i])
    addPupoLayers[i] = null
    delete addPupoLayers[i]
    addPopLayers[i] && window.$viewer && window.$viewer.removeLayer(addPopLayers[i])
    addPopLayers[i] = null
    delete addPopLayers[i]
  })
  addPupoLayers = {}
  addPopLayers = {}
}
onUnmounted(() => {
@@ -1003,8 +1011,8 @@
    tileLayers = null
  }
  // 弹窗销毁
  destroy()
  addPupoLayers = null
  destroyPop()
  addPopLayers = null
  EventBus.off('restHandleCheckChange', restHandleCheckChange)
  EventBus.off('restHandleDelChange', restHandleDelChange)
src/styles/base/dc-base.scss
@@ -85,20 +85,20 @@
  &::after {
    content: "";
    position: absolute;
    bottom: -5px;
    bottom: -10px;
    left: calc(50% - 3px);
    display: block;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    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;
    // background-color: #3b96ff;
    box-shadow: inset 0 0 40px #409eff;
    // background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
  }
  .marsBlueGradientPnl {
    // padding: 2px 2px;
    padding: 2px 2px;
    text-align: center;
    margin: 0;
    color: #fff;
@@ -106,7 +106,7 @@
    -moz-border-radius: 5px;
    border-radius: 5px;
    // line-height: 32px;
    width: 360px;
    width: 112px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
@@ -172,6 +172,58 @@
  }
}
.public-map-popup-qy {
  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;
    text-align: center;
    margin: 0;
    color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    // line-height: 32px;
    width: 360px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    word-wrap: break-word;
    font-size: 14px;
    box-shadow: inset 0 0 40px #409eff;
    // background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
  }
  .marsBlueGradientPnl img {
    vertical-align: middle;
    width: 360px;
    height: 360px;
  }
}
.yjwz-height-box {
  bottom: 120px;
src/views/companyInfo/components/box/dataContent.vue
@@ -57,12 +57,10 @@
            let iconEl = ''
            if ('showPanel' in item && item.showPanel == false) {
              if (item.backgroundIcon) {
                iconEl = `
                                <div class="map-name">${i[item.showParams] || i.name}</div>
                                <div class="map-icon">
                                <img src="${item.backgroundIcon}">
                                </div>
                                `
                iconEl = `<div class="map-name">${i[item.showParams] || i.name}</div>
                          <div class="map-icon">
                          <img src="${item.backgroundIcon}">
                          </div>`
              }
            } else {
              iconEl = `<div class="marsBlueGradientPnl"> <div>${i.name}</div>  </div>`
src/views/companyInfo/components/box/unitContent.vue
@@ -65,12 +65,11 @@
          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="${attrParams.imageUrl}" />
                </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
            `<div class="public-map-popup-two">
            `<div class="public-map-popup-qy">
                    ${iconEl}
                  </div>`
          )
src/views/pac/components/box/dataContent.vue
@@ -43,6 +43,7 @@
const curSelect = ref('1')
let addTileLayers = {}
const handleCheckChange = (row) => {
  EventBus.emit('flyToyqfw', 'flyToyqfw')
  resData.data.forEach(item => {
    if (row.value === item.value) {
      if (!addTileLayers[item.label]) {
@@ -104,7 +105,6 @@
          data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
            let iconEl = ''
            let divclassName = ''
            let flag = typeList.find(l => l.type == i.type)
            if (flag) {
              divclassName = flag.className
@@ -116,12 +116,6 @@
                  </div>
                  `
              }
            } else {
              iconEl = `<div class="marsBlueGradientPnl">
                  <div>${i[i.showParams] || i.name}</div>
                </div>`
            }
            let divIcon = new DC.DivIcon(
              new DC.Position(i.lng, i.lat, i.ele || 64),
              `<div class="public-map-popup ${divclassName}">
@@ -132,10 +126,9 @@
            let incident = () => { }
            if (item.incident) incident = item.incident
            divIcon.on(DC.MouseEventType.CLICK, incident)
            addTileLayers[item.label].addOverlay(divIcon)
            }
          })
        })
      } else {
src/views/rs/components/box/dataContent.vue
@@ -89,6 +89,7 @@
onMounted(() => {
  curTableHeight.value = TableContent.value.offsetHeight
  EventBus.emit('flyToyqfw', 'flyToyqfw')
  EventBus.emit('destroyPop', 'destroyPop')
})
// 分页改变
@@ -109,6 +110,11 @@
  })
    .then((res) => {
      const data = res.data.data
      data.records.forEach(item => {
        if(!item.riskLevelName){
          item.riskLevelName = '暂定'
        }
      })
      tableData.value = data.records
      pages.total = data.total
      loading.value = false
@@ -125,6 +131,7 @@
let addPupoLayers = {}
// 行点击
function rowClick (row, column, event) {
  EventBus.emit('destroyPop', 'destroyPop')
  if (row.lng && row.lat) {
    window.$viewer.flyToPosition(new DC.Position(row.lng, row.lat, 600, 0, -90, 0))
    // 显示企业信息
@@ -133,7 +140,9 @@
    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.name || ''}</li>
            <li>${row.riskLevelName || ''}</li>
            </div>`
    let divIcon = new DC.DivIcon(
      new DC.Position(row.lng, row.lat, row.ele || 64),
src/views/space/components/box/dataContent.vue
@@ -96,6 +96,11 @@
  })
    .then((res) => {
      const data = res.data.data
      data.records.forEach(item => {
        if(!item.firmName){
          item.firmName = '吉水化工园区'
        }
      })
      tableData.value = data.records
      pages.total = data.total
      loading.value = false
src/views/space/components/leftContainer.vue
@@ -19,6 +19,16 @@
const gawList = ref([
  {
    label: '污水管网',
    value: "3-3-2",
    select: true
  },
  {
    label: '雨水管网',
    value: "3-3-4",
    select: false
  },
  {
    label: '给水管网',
    value: "3-3-1",
    select: false
@@ -28,16 +38,7 @@
    value: "3-3-3",
    select: false
  },
  {
    label: '污水管网',
    value: "3-3-2",
    select: true
  },
  {
    label: '雨水管网',
    value: "3-3-4",
    select: true
  },
])
const curSelect = ref('')
@@ -59,20 +60,28 @@
}
const tabClick = (item) => {
  EventBus.emit('destroyPop', 'destroyPop')
  if (curSelect.value) {
    if (curSelect.value == '3') {
      EventBus.emit('restHandleDelChange', `3-3`)
      EventBus.emit('restHandleDelChange', `3-3-1`)
      EventBus.emit('restHandleDelChange', `3-3-2`)
      EventBus.emit('restHandleDelChange', `3-3-3`)
      EventBus.emit('restHandleDelChange', `3-3-4`)
    } else {
      gawList.value.forEach(element => {
        if (element.value == `3-3-2`) {
          element.select = true
        } else {
          element.select = false
        }
      });
      EventBus.emit('restHandleDelChange', `3-${curSelect.value}`)
    }
  }
  curSelect.value = item.value
  if (item.value == '3') {
    EventBus.emit('restHandleCheckChange', `3-3-2`)
    EventBus.emit('restHandleCheckChange', `3-3-4`)
  } else {
    EventBus.emit('restHandleCheckChange', `3-${item.value}`)
  }