地图销毁相关处理

shuishen

2024-11-27 00468a057ca642bc535dfdf80c7c1c7716eea4f0

地图销毁相关处理

 src/pages/layout/components/mainSearch.vue

@@ -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,8 +2,8 @@
 * @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. 
@@ -57,7 +57,7 @@
}

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

const components = [

 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:
 *
@@ -102,7 +102,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 = {}
}
@@ -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])
    })
    destroy()
    EventBus.emit('restHandleDelChange', `3-3-2`)

 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

@@ -216,7 +216,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 = {}
}
@@ -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,22 +2,21 @@
 * @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="data box w100 h100">
      <data-content></data-content>
    </div>
    </div>
</template>

@@ -26,5 +25,7 @@
    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,22 +2,22 @@
 * @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="data box w100 h100">
      <data-content>
      </data-content>
    </div>
    </div>
</template>

@@ -26,5 +26,7 @@
    position: absolute;
    width: 100%;
    height: 100%;
  pointer-events: auto;
  background: rgba(28, 115, 195, 0.2);
}
</style>