地图销毁相关处理

shuishen

2024-11-27 00468a057ca642bc535dfdf80c7c1c7716eea4f0

地图销毁相关处理

 src/pages/layout/components/mainSearch.vue

@@ -49,7 +49,7 @@
  }
}

function getFuzzyQuery() {
function getFuzzyQuery () {
  fuzzyQuery({
    name: searchVal.value
  }).then(res => {
@@ -119,7 +119,7 @@
}


function clearPoint() {
function clearPoint () {
  let arr = Object.keys(addTileLayers)
  arr.forEach(i => {
    addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
@@ -129,7 +129,7 @@
onUnmounted(() => {
  let arr = Object.keys(addTileLayers)
  arr.forEach(i => {
    addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
    addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i])
  })
})
</script>

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

@@ -882,7 +882,7 @@
          addTileLayers[item.layerName].forEach(m => m.show = false)
        } else {
          addTileLayers[item.layerName].clear()
          window.$viewer.removeLayer(addTileLayers[item.layerName])
          window.$viewer && window.$viewer.removeLayer(addTileLayers[item.layerName])

          delete addTileLayers[item.layerName]
        }
@@ -967,7 +967,7 @@
function destroy () {
  let arr = Object.keys(addPupoLayers)
  arr.filter(i => i != 'hgyq').forEach(i => {
    addPupoLayers[i] && window.$viewer.removeLayer(addPupoLayers[i])
    addPupoLayers[i] && window.$viewer && window.$viewer.removeLayer(addPupoLayers[i])
  })
  addPupoLayers = {}
}
@@ -975,13 +975,13 @@
onUnmounted(() => {
  if (tileLayers) {
    tileLayers.clear()
    window.$viewer.removeLayer(tileLayers)
    window.$viewer && window.$viewer.removeLayer(tileLayers)
    tileLayers = null
  }

  let arr = Object.keys(addTileLayers)
  arr.filter(i => i != 'hgyq').forEach(i => {
    addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
    addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i])
  })
  // 弹窗销毁
  destroy()

 src/pages/layout/components/scomponents/tool/curtain.vue

@@ -2,25 +2,25 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-29 15:48:36
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-29 19:53:49
 * @FilePath: \bigScreen\src\views\layout\components\scomponents\tool\location.vue
 * @LastEditTime: 2024-11-27 19:17:04
 * @FilePath: \bigScreen\src\pages\layout\components\scomponents\tool\curtain.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<template>
    <public-box style="z-index: 100;">
        <template #name>
            <div class="name"><i class="fa fa-map-pin"></i>&nbsp;卷帘对比 &nbsp;</div>
        </template>
  <public-box style="z-index: 100;">
    <template #name>
      <div class="name"><i class="fa fa-map-pin"></i>&nbsp;卷帘对比 &nbsp;</div>
    </template>

        <template #close>
            <div class="close cursor-p" @click="$emit('closeChild')"><i class="fa fa-close"></i></div>
        </template>
    <template #close>
      <div class="close cursor-p" @click="$emit('closeChild')"><i class="fa fa-close"></i></div>
    </template>

        <template #content>
            <div class="cur-btn">
                <!-- <div class="m-4">
    <template #content>
      <div class="cur-btn">
        <!-- <div class="m-4">
                    <p>左侧图层</p>
                    <el-select class="transparent-bg" v-model="value1" placeholder="天地图">
                        <el-option v-for="item in components" :key="item.value" :label="item.label" :value="item.value" />
@@ -32,11 +32,11 @@
                        <el-option v-for="item in components" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div> -->
            </div>
        </template>
    </public-box>
      </div>
    </template>
  </public-box>
</template>
  

<script setup>
const value1 = ref([])
const value2 = ref([])
@@ -44,65 +44,65 @@


onMounted(() => {
    window.$viewer.sceneSplit.enable = true
  window.$viewer.sceneSplit.enable = true
})

// 关闭
const close = () => {
    window.$viewer.sceneSplit.enable = false
  window.$viewer.sceneSplit.enable = false
}

const flyTo = () => {
    // window.$viewer.flyToPosition(new DC.Position(longitude.value, latitude.value, height.value, 0, -90, 0), () => { }, 3)
  // window.$viewer.flyToPosition(new DC.Position(longitude.value, latitude.value, height.value, 0, -90, 0), () => { }, 3)
}

onUnmounted(() => {
    window.$viewer.sceneSplit.enable = false
  window.$viewer && (window.$viewer.sceneSplit.enable = false)
})

const components = [
    { label: '天地图', value: '1' },
    { label: '谷歌影像', value: '2' },
    { label: '谷歌矢量', value: '3' },
    { label: '高德影像', value: '4' },
  { label: '天地图', value: '1' },
  { label: '谷歌影像', value: '2' },
  { label: '谷歌矢量', value: '3' },
  { label: '高德影像', value: '4' },
]
</script>
  
<style lang="scss" scoped >

<style lang="scss" scoped>
.cur-btn {
    margin: 10px 0;
    display: flex;
  margin: 10px 0;
  display: flex;

    // justify-content: center;
    // align-items: center;
  // justify-content: center;
  // align-items: center;

    // &.el-select {
    //     width: 50px;
    // }
  // &.el-select {
  //     width: 50px;
  // }
}

.m-4 {
    text-align: center;
    width: 200px;
  text-align: center;
  width: 200px;
}

.transparent-bg {
    background: transparent;
  background: transparent;

}

// 重新el——select样式
::v-deep .el-select__wrapper {
    background: transparent;
  background: transparent;

}

::v-deep .el-select-dropdown {
    // background: transparent;
    background-color: aqua;
  // background: transparent;
  background-color: aqua;
}

::v-deep .el-select .el-select__placeholder {
    color: #fff;
  color: #fff;
}
</style>

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

@@ -113,7 +113,7 @@
onUnmounted(() => {
  let arr = Object.keys(addTileLayers)
  arr.forEach(i => {
    addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
    addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i])
  })
})
</script>

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

@@ -166,7 +166,7 @@
function destroy () {
  let arr = Object.keys(addTileLayers)
  arr.forEach(i => {
    addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
    addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i])
  })
  addTileLayers = {}
}
@@ -174,7 +174,7 @@
function destroyPupoLayers () {
  let arr = Object.keys(addPupoLayers)
  arr.filter(i => i != 'hgyq').forEach(i => {
    addPupoLayers[i] && window.$viewer.removeLayer(addPupoLayers[i])
    addPupoLayers[i] && window.$viewer && window.$viewer.removeLayer(addPupoLayers[i])
  })
  addPupoLayers = {}
}

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

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-10 15:27:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-27 16:14:10
 * @LastEditTime: 2024-11-27 19:15:59
 * @FilePath: \bigScreen\src\views\companyInfo\components\box\unitContent.vue
 * @Description:
 *
@@ -17,113 +17,113 @@
import { getList } from "@/api/space/space"
const { VITE_APP_BASE } = import.meta.env
let image = ref(
    [{ label: '阀', value: VITE_APP_BASE + 'img/mapicon/ysf.png' }
        , { label: '池', value: VITE_APP_BASE + 'img/mapicon/yjc.png' }
        , { label: '泵', value: VITE_APP_BASE + 'img/mapicon/yjb.png' }]
  [{ label: '阀', value: VITE_APP_BASE + 'img/mapicon/ysf.png' }
    , { label: '池', value: VITE_APP_BASE + 'img/mapicon/yjc.png' }
    , { label: '泵', value: VITE_APP_BASE + 'img/mapicon/yjb.png' }]
)

const resData = reactive({
    data: []
  data: []
})
const curSelect = ref('')

let addTileLayers = {}
let addPupoLayers = {}
onMounted(() => {
    handleCheckChange()
  handleCheckChange()
})
const handleCheckChange = () => {
    let companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
    // resData.data.forEach(item => {
    // if (row.value == item.value) {
    if (!addTileLayers[companyInfo.name]) {
        addTileLayers[companyInfo.name] = new DC.HtmlLayer(companyInfo.name)
        window.$viewer.addLayer(addTileLayers[companyInfo.name])
        getList({
            firmId: companyInfo.id,
            size: 1000,
            // type: item.type,
        }).then(res => {
            let data = res.data.data.records
            data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
                let img = image.value.filter(l => i.name.includes(l.label))
                img = img.length > 0 ? img : image.value
                let iconEl = `<div class="map-name">${i.name}</div>
  let companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
  // resData.data.forEach(item => {
  // if (row.value == item.value) {
  if (!addTileLayers[companyInfo.name]) {
    addTileLayers[companyInfo.name] = new DC.HtmlLayer(companyInfo.name)
    window.$viewer.addLayer(addTileLayers[companyInfo.name])
    getList({
      firmId: companyInfo.id,
      size: 1000,
      // type: item.type,
    }).then(res => {
      let data = res.data.data.records
      data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
        let img = image.value.filter(l => i.name.includes(l.label))
        img = img.length > 0 ? img : image.value
        let iconEl = `<div class="map-name">${i.name}</div>
                            <div class="map-icon"> <img src="${img[0].value}"> </div>`
                let divIcon = new DC.DivIcon(
                    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
                    // 删除
                    destroy()
                    if (!attrParams.imageUrl) {
                        return
                    }
                    addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
                    window.$viewer.addLayer(addPupoLayers[attrParams.name])
                    let iconEl = `<div class="marsBlueGradientPnl">
        let divIcon = new DC.DivIcon(
          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
          // 删除
          destroy()
          if (!attrParams.imageUrl) {
            return
          }
          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, 64),
                        `<div class="public-map-popup-two">
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, 64),
            `<div class="public-map-popup-two">
                    ${iconEl}
                  </div>`
                    )
                    let incident = () => {
                        destroy()
                    }
                    divIcon.on(DC.MouseEventType.CLICK, incident)
                    addPupoLayers[attrParams.name].addOverlay(divIcon)
                }
          )
          let incident = () => {
            destroy()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
        }

                // if (item.incident) incident = item.incident
        // if (item.incident) incident = item.incident

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

                addTileLayers[companyInfo.name].addOverlay(divIcon)
            })
        })
    } else {
        addTileLayers[companyInfo.name].show = true
    }
    // } else {
    //     if (addTileLayers[item.label]) {
    //         addTileLayers[item.label].show = false
    //     }
    // }
    // })
        addTileLayers[companyInfo.name].addOverlay(divIcon)
      })
    })
  } else {
    addTileLayers[companyInfo.name].show = true
  }
  // } else {
  //     if (addTileLayers[item.label]) {
  //         addTileLayers[item.label].show = false
  //     }
  // }
  // })
}
// 销毁
function destroy() {
    let arr = Object.keys(addPupoLayers)
    arr.filter(i => i != 'hgyq').forEach(i => {
        addPupoLayers[i] && window.$viewer.removeLayer(addPupoLayers[i])
    })
    addPupoLayers = {}
function destroy () {
  let arr = Object.keys(addPupoLayers)
  arr.filter(i => i != 'hgyq').forEach(i => {
    addPupoLayers[i] && window.$viewer && window.$viewer.removeLayer(addPupoLayers[i])
  })
  addPupoLayers = {}
}
nextTick(() => {
    EventBus.emit('restHandleCheckChange', `3-3-2`)
    EventBus.emit('restHandleCheckChange', `3-3-4`)
  EventBus.emit('restHandleCheckChange', `3-3-2`)
  EventBus.emit('restHandleCheckChange', `3-3-4`)
})
onUnmounted(() => {
    let arr = Object.keys(addTileLayers)
    arr.forEach(i => {
        addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
    })
    destroy()
    EventBus.emit('restHandleDelChange', `3-3-2`)
    EventBus.emit('restHandleDelChange', `3-3-4`)
  let arr = Object.keys(addTileLayers)
  arr.forEach(i => {
    addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i])
  })
  destroy()
  EventBus.emit('restHandleDelChange', `3-3-2`)
  EventBus.emit('restHandleDelChange', `3-3-4`)
})
</script>

<template>
    <div class="left-container cur-container">
        <!-- <div class="tablist h100">
  <div class="left-container cur-container">
    <!-- <div class="tablist h100">
            <div class="cursor-p" :class="{ on: showOn(item) }" v-for="item, index in resData.data" :key="index"
                @click="tabClick(item)">
                <div class="nowrap-ellipsis-hidden">
@@ -131,34 +131,34 @@
                </div>
            </div>
        </div> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.cur-container {
    background: transparent;
    pointer-events: none;
  background: transparent;
  pointer-events: none;

    .tablist {
        pointer-events: all;
  .tablist {
    pointer-events: all;

        &>div {
            margin-top: 16px;
            padding: 10px;
            width: 64px;
            height: 64px;
            line-height: 64px;
            text-align: center;
            border-radius: 50%;
            box-shadow: inset 0 0 40px #409eff;
            color: #fff;
            box-sizing: content-box;
    &>div {
      margin-top: 16px;
      padding: 10px;
      width: 64px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      border-radius: 50%;
      box-shadow: inset 0 0 40px #409eff;
      color: #fff;
      box-sizing: content-box;

            &.on {
                position: relative;
                color: #75b1ff;
            }
        }
      &.on {
        position: relative;
        color: #75b1ff;
      }
    }
  }
}
</style>

 src/views/companyInfo/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-11-08 11:00:30
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-25 16:45:39
 * @LastEditTime: 2024-11-27 19:16:37
 * @FilePath: \bigScreen\src\views\companyInfo\index.vue
 * @Description:
 *
@@ -41,11 +41,11 @@
curCompanyWall.addOverlay(wall)

onMounted(() => {
  window.$viewer.flyTo(curCompanyWall)
  window.$viewer && window.$viewer.flyTo(curCompanyWall)
})

onUnmounted(() => {
  window.$viewer.removeLayer(curCompanyWall)
  window.$viewer && window.$viewer.removeLayer(curCompanyWall)
})

const handleChildEvent = (data) => {

 src/views/pd/components/dynamicPanel.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-11-09 15:41:35
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-27 15:19:10
 * @LastEditTime: 2024-11-27 19:15:35
 * @FilePath: \bigScreen\src\views\pd\components\dynamicPanel.vue
 * @Description: 
 * 
@@ -430,9 +430,9 @@
  clearAll()

  tc.clear()
  dynamicVectorLayer && window.$viewer.removeLayer(dynamicVectorLayer)
  dynamicHtmlLayer && window.$viewer.removeLayer(dynamicHtmlLayer)
  dynamicLineVectorLayer && window.$viewer.removeLayer(dynamicLineVectorLayer)
  dynamicVectorLayer && window.$viewer && window.$viewer.removeLayer(dynamicVectorLayer)
  dynamicHtmlLayer && window.$viewer && window.$viewer.removeLayer(dynamicHtmlLayer)
  dynamicLineVectorLayer && window.$viewer && window.$viewer.removeLayer(dynamicLineVectorLayer)
})
</script>


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

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

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

function positionDisabled() {
function positionDisabled () {
  return (row) => {
    if (
      (row.X && row.X != 0) ||
@@ -124,7 +124,7 @@
})
let addPupoLayers = {}
// 行点击
function rowClick(row, column, event) {
function rowClick (row, column, event) {
  if (row.lng && row.lat) {
    window.$viewer.flyToPosition(new DC.Position(row.lng, row.lat, 600, 0, -90, 0))
    // 显示企业信息
@@ -152,7 +152,7 @@


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

const searchBtn = (params) => {
  resetPage()
@@ -213,10 +213,10 @@
})

// 销毁
function destroyPupoLayers() {
function destroyPupoLayers () {
  let arr = Object.keys(addPupoLayers)
  arr.forEach(i => {
    addPupoLayers[i] && window.$viewer.removeLayer(addPupoLayers[i])
    addPupoLayers[i] && window.$viewer && window.$viewer.removeLayer(addPupoLayers[i])
  })
  addPupoLayers = {}
}
@@ -224,7 +224,8 @@

<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="cur-container">
      <div class="tablist">
        <div class="cursor-p" :class="{ on: showOn(item) }" v-for="item, index in resData.data" :key="index"
@@ -237,7 +238,8 @@
    </div> -->
    <div class="h0 flex-1 table-content" ref="TableContent" v-loading="loading"
      element-loading-background="rgba(46, 81, 136, 0.9)">
      <el-table empty-text="暂无数据"  @row-click="rowClick" border :data="tableData" :height="curTableHeight" style="width: 100%">
      <el-table empty-text="暂无数据" @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 }}

 src/views/rt/components/dataContent.vue

New file
@@ -0,0 +1,197 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-13 14:54:26
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-27 19:28:29
 * @FilePath: \bigScreen\src\views\rt\components\dataContent.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup>
import { getList } from "@/api/rescueTeam/rescueTeam"
import { getPage } from '@/api/indParkInfo'
import { reactive } from "vue"

const loading = ref(false)

const tableData = ref([])

let currentIndex = ref(0)
// 园区 企业
const tilteList = ref([
  { label: "园区救援队伍", value: "0", id: "1" },
  { label: "企业救援队伍", value: "0", id: "2" }

])
const pages = {
  page: 1,
  pageSize: 100,
  total: 0,
}

onMounted(() => {
  getLists(formInline)
})


function handleClick (item, index) {
  currentIndex.value = index
  pages.page = 1
  pages.pageSize = 1000
  pages.total = 0
  if (item.id == 1) {
    formInline.type = 1
  } else {
    formInline.type = 2
  }
  getLists(formInline)
}
// 表格样式
const tableCellStyle = ({ row, column }) => {
  return { background: "#152851", color: "#fff" }
}
// 表格表头样式
const headerCellStyle = ({ }) => {
  return {
    background: "#152851",
    color: "#fff",
  }
}
// 搜索条件
const formInline = reactive({
  perInCha: "",
  type: '1'
})

// 提交查询
const onSubmit = () => {
  pages.page = 1
  pages.pageSize = 13
  pages.total = 0
  getLists(formInline)
}

// 分页树改变
const handleSizeChange = (val) => {
  pages.pageSize = val
  getLists(formInline)
}
// 分页改变
const handleCurrentChange = (val) => {
  pages.page = val
  getLists(formInline)
}
// 重置条件
const clearBtn = () => {
  formInline.perInCha = ''
  formInline.type = ''
  pages.page = 1
  pages.pageSize = 13
  pages.total = 0
  getLists(formInline)
}

// 查询分页数据
function getLists (param = {}) {
  tableData.value = []
  param.current = pages.page
  param.size = pages.pageSize
  loading.value = true
  getList(param)
    .then((res) => {
      const data = res.data.data
      tableData.value = data.records
    })
    .catch((err) => {
      loading.value = false
      console.log(err)
    })
}
</script>

<template>
  <public-content>
    <template #content>
      <div class="content_box">

        <div class="list_box">
          <ul>
            <li v-for="( item, index ) in tilteList " :key="index" :class="[currentIndex === index ? 'active' : '']"
              @click="handleClick(item, index)">
              {{ item.label }}
            </li>
          </ul>
        </div>

        <div class="page_box">

          <el-table empty-text="暂无数据" border v-if="formInline.type == 1" :data="tableData" style="width: 100%"
            :header-cell-style="headerCellStyle" :cell-style="tableCellStyle">
            <el-table-column prop="teamName" label="救援队伍组名称" />
            <el-table-column prop="teamJob" label="救援队伍组职务" />
            <el-table-column prop="perInCha" label="责任人姓名" />
            <el-table-column prop="job" label="园区职务" />
            <el-table-column prop="perInChaPho" label="联系电话" />
          </el-table>

          <el-table empty-text="暂无数据" border v-else :data="tableData" style="width: 100%"
            :header-cell-style="headerCellStyle" :cell-style="tableCellStyle">
            <el-table-column prop="firmName" label="企业名称" />
            <el-table-column prop="perInCha" label="责任人姓名" />
            <el-table-column prop="perInChaPho" label="联系电话" />
            <el-table-column prop="perInChaTwo" label="责任人姓名" />
            <el-table-column prop="perInChaPhoTwo" label="联系电话" />
          </el-table>

        </div>

      </div>
    </template>
  </public-content>
</template>

<style lang="scss" scoped>
.content_box {
  color: #fff;
}

.list_box {
  overflow-x: auto;
  white-space: nowrap;
  // scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.list_box ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.list_box li {
  padding: 10px;
  margin-right: 10px;
  cursor: pointer;
  box-shadow: inset 0 0 40px #409eff;
  border-radius: 10px;
  margin-bottom: 5px;
}

.list_box li.active {
  // color: #409eff;
  box-shadow: inset 0 0 100px #2a8ef1;
}

.page_box {
  // overflow: scroll;
}


.page_box .el-table {
  width: 100%;
  height: 700px;
  background-color: rgba(117, 116, 116, 0.3);
}
</style>

 src/views/rt/index.vue

@@ -2,29 +2,30 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-10 15:27:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-13 16:02:07
 * @FilePath: \forest-fire\src\views\statistics\index.vue
 * @LastEditTime: 2024-11-27 19:28:17
 * @FilePath: \bigScreen\src\views\rt\index.vue
 * @Description: 综合设计
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup>
import leftContainer from './components/leftContainer.vue'
import rightContainer from './components/rightContainer.vue'
import dataContent from './components/dataContent.vue'
</script>

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

        <!-- <right-container></right-container> -->
  <div class="container page-container">
    <div class="data box w100 h100">
      <data-content></data-content>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
    position: absolute;
    width: 100%;
    height: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  background: rgba(28, 115, 195, 0.2);
}
</style>

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

@@ -185,7 +185,7 @@
function destroyPupoLayers () {
  let arr = Object.keys(addPupoLayers)
  arr.forEach(i => {
    addPupoLayers[i] && window.$viewer.removeLayer(addPupoLayers[i])
    addPupoLayers[i] && window.$viewer && window.$viewer.removeLayer(addPupoLayers[i])
  })
  addPupoLayers = {}
}

 src/views/supplies/components/dataContent.vue

New file
@@ -0,0 +1,279 @@
<template>
  <public-content>
    <template #content>
      <div class="content_box">
        <div class="list_box">
          <span class="content_span" @click="scrollLeft">
            <img src="@/assets/images/left.png" alt="">
          </span>
          <el-scrollbar ref="scrollbarRef">
            <div class="scrollbar-flex-content">
              <p v-for="(item, index) in tilteList" @click="handleClick(item, index)" :key="index"
                class="scrollbar-demo-item" :class="{ active: index === currentIndex }">
                {{ item.label }}
              </p>
            </div>
          </el-scrollbar>
          <span class="content_span" @click="scrollRight">
            <img src="@/assets/images/right.png" alt="">
          </span>
        </div>

        <div class="page_box">
          <div>
            <el-table empty-text="暂无数据" border v-if="formInline.ownership == 1" :data="tableData">
              <el-table-column prop="name" label="物资名称" />
              <el-table-column prop="personInCha" label="负责人" width="150" />
              <el-table-column prop="personInChaPhone" label="负责人电话" width="250" />
              <el-table-column prop="stoLoc" label="物资地址" />
              <el-table-column prop="numUnit" label="数量" width="150" />
            </el-table>

            <el-table empty-text="暂无数据" border v-else :data="tableData">
              <el-table-column prop="name" label="物资名称" />
              <el-table-column prop="personInCha" label="负责人" width="150" />
              <el-table-column prop="personInChaPhone" label="负责人电话" width="250" />
              <el-table-column prop="stoLoc" label="物资地址" />
              <el-table-column prop="numUnit" label="数量" />
            </el-table>
          </div>
        </div>
      </div>
    </template>
  </public-content>
</template>

<script setup>
import { getList, getCompanyList } from "@/api/emergencySupplies/emergencySupplies"
import { getPage } from '@/api/indParkInfo'
import { reactive, ref, onMounted } from "vue"
import { ElScrollbar } from 'element-plus'

const loading = ref(false)

const tableData = ref([])
const pages = {
  page: 1,
  pageSize: 1000,
  total: 0,
}

let currentIndex = ref(0)

// 园区 企业
const tilteList = ref([
  { label: "吉水化工园区", value: "0", id: "1" }
])

onMounted(() => {
  getLists(formInline)
  getCompanyPages()
})

// const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
//   if (columnIndex === 0) {
//     if (rowIndex % 2 === 0) {
//       return {
//         rowspan: 2,
//         colspan: 1
//       }
//     } else {
//       return {
//         rowspan: 0,
//         colspan: 0
//       }
//     }
//   }
// }

const scrollbarRef = ref(null)


// 搜索条件
const formInline = reactive({
  firmId: '',
  ownership: 1,
})

function getCompanyPages (param = {}) {
  param.current = pages.page
  param.size = pages.pageSize
  getPage(param).then(res => {
    let companyList = res.data.data.records
    companyList.forEach(item => {
      tilteList.value.push({
        label: item.name,
        value: item.id,
        id: item.id
      })
    })
  }).catch(err => {
  })
}

function handleClick (item, index) {
  currentIndex.value = index
  pages.page = 1
  pages.pageSize = 1000
  pages.total = 0
  if (item.id == 1) {
    formInline.firmId = ''
    formInline.ownership = 1
    getLists(formInline)
  } else {
    formInline.firmId = item.id
    formInline.ownership = 2
    getComLists(formInline)
  }
}

// 表格样式
// const tableCellStyle = ({ row, column }) => {
//   return { background: "#152851", color: "#fff" };
// };

// 表格表头样式
// const headerCellStyle = ({ }) => {
//   return {
//     background: "#152851",
//     color: "#fff",
//   };
// };

// 分页树改变
// const handleSizeChange = (val) => {
//   pages.pageSize = val;
//   getLists(formInline);
// }

// 分页改变
// const handleCurrentChange = (val) => {
//   pages.page = val;
//   getLists(formInline);
// }

// 重置条件
// const clearBtn = () => {
//   formInline.name = ''
//   formInline.ownership = ''
//   pages.page = 1
//   pages.pageSize = 1000
//   pages.total = 0
//   getLists(formInline);
// }

// 查询分页数据
function getLists (param = {}) {
  param.current = pages.page
  param.size = pages.pageSize
  loading.value = true
  getList(param)
    .then((res) => {
      const data = res.data.data
      tableData.value = data.records
      pages.total = data.total
      loading.value = false
    })
    .catch((err) => {
      loading.value = false
      console.log(err)
    })
}


// 查询分页数据
function getComLists (param = {}) {
  param.current = pages.page
  param.size = pages.pageSize
  loading.value = true
  getCompanyList(param)
    .then((res) => {
      const data = res.data.data
      tableData.value = data.dataList
      pages.total = data.total
      loading.value = false
    })
    .catch((err) => {
      loading.value = false
      console.log(err)
    })
}

// 滚动到左边
const scrollLeft = () => {
  if (scrollbarRef.value) {
    const currentScrollLeft = scrollbarRef.value.wrapRef.scrollLeft
    const step = 500 // 每次滚动的距离
    scrollbarRef.value.wrapRef.scrollLeft = currentScrollLeft - step
  }
}

// 滚动到右边
const scrollRight = () => {
  if (scrollbarRef.value) {
    const currentScrollLeft = scrollbarRef.value.wrapRef.scrollLeft
    const step = 500 // 每次滚动的距离
    scrollbarRef.value.wrapRef.scrollLeft = currentScrollLeft + step
  }
}
</script>


<style lang="scss" scoped>
.content_box {
  color: #fff;
}

.content_box .list_box {
  display: flex;
  text-align: center;
}

.scrollbar-flex-content {
  display: flex;
}

.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  padding: 0 5px;
  text-align: center;
  border-radius: 10px;
  box-shadow: inset 0 0 40px #409eff;
  cursor: pointer;
}

.content_box .content_span {
  line-height: 70px;
  margin: 0 15px;
  cursor: pointer;

  & img {
    // 图片上下居中
    vertical-align: middle;
    width: 30px;
    height: 30px;
  }

  & img:hover {
    box-shadow: inset 0 0 40px #fff;
    border-radius: 10px;
  }
}

.page_box .el-table {
  width: 100%;
  height: 680px;
  // background-color: rgba(117, 116, 116, 0.3);
}

.active {
  // color: #409eff;
  // border-radius: 10px;
  box-shadow: inset 0 0 100px #2a8ef1;
}
</style>

 src/views/supplies/index.vue

@@ -2,29 +2,31 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-10 15:27:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-13 16:02:07
 * @FilePath: \forest-fire\src\views\statistics\index.vue
 * @LastEditTime: 2024-11-27 19:26:43
 * @FilePath: \bigScreen\src\views\supplies\index.vue
 * @Description: 综合设计
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup>
import leftContainer from './components/leftContainer.vue'
import rightContainer from './components/rightContainer.vue'
import dataContent from "./components/dataContent.vue"
</script>

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

        <!-- <right-container></right-container> -->
  <div class="container page-container">
    <div class="data box w100 h100">
      <data-content>
      </data-content>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
    position: absolute;
    width: 100%;
    height: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  background: rgba(28, 115, 195, 0.2);
}
</style>