智慧园区前端大屏
shuishen
2024-11-22 8e72ebbb44dba3ec5cf6dd3cd2613e6e9aed31ef
Merge branch 'main' of http://139.196.74.78:10010/r/zhyq/bigScreen
10 files modified
209 ■■■■ changed files
src/pages/layout/components/scomponents/layersControl.vue 11 ●●●● patch | view | raw | blame | history
src/pages/layout/components/scomponents/popup/panorama.vue 6 ●●●● patch | view | raw | blame | history
src/styles/element/index.scss 4 ●●●● patch | view | raw | blame | history
src/views/companyInfo/components/box/dataContent.vue 3 ●●●● patch | view | raw | blame | history
src/views/companyInfo/components/box/fireTrend.vue 54 ●●●●● patch | view | raw | blame | history
src/views/companyInfo/components/box/unitContent.vue 88 ●●●●● patch | view | raw | blame | history
src/views/pac/components/box/dataContent.vue 11 ●●●● patch | view | raw | blame | history
src/views/rt/components/box/dataContent.vue 3 ●●●● patch | view | raw | blame | history
src/views/space/components/leftContainer.vue 3 ●●●● patch | view | raw | blame | history
src/views/supplies/components/box/dataContent.vue 26 ●●●● patch | view | raw | blame | history
src/pages/layout/components/scomponents/layersControl.vue
@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-31 10:47:29
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-22 14:52:56
 * @LastEditTime: 2024-11-22 15:37:11
 * @FilePath: \bigScreen\src\pages\layout\components\scomponents\layersControl.vue
 * @Description:
 *
@@ -74,7 +74,7 @@
const { VITE_APP_BASE } = import.meta.env
let indexPoint = ref(['1'])
let indexPoint = ref(['5', '7', '1'])
const treeRef = ref(null)
const Cesium = DC.getLib('Cesium')
@@ -169,7 +169,7 @@
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
            <div>${attrParams.fullName}</div>
            <div>${attrParams.fullName}</div>
            <img src="${attrParams.imageUrl}" />
                </div>`
          let divIcon = new DC.DivIcon(
@@ -598,7 +598,6 @@
        } else {
          window.addTileLayers[item.layerName].forEach(i => i.show = true)
        }
        // window.$viewer.flyTo(window.addTileLayers[item.layerName][0])
      } else if (item.subType == 'labelPoint') {
        if (!window.addTileLayers[item.layerName]) {
          window.addTileLayers[item.layerName] = new DC.HtmlLayer(item.layerName)
@@ -660,7 +659,7 @@
            wall.setStyle({
              material: new DC.WallTrailMaterialProperty({
                color: Cesium.Color.fromBytes(0, 123, 255, 180),
                speed: 10
                speed: 8
              })
            })
            window.addTileLayers[item.layerName].addOverlay(wall)
@@ -668,6 +667,8 @@
        } else {
          window.addTileLayers[item.layerName].show = true
        }
        window.$viewer.flyTo(addTileLayers[item.layerName])
        console.log(addTileLayers[item.layerName], "22222222222222222222222222222222")
      } else if (item.subType == 'geojsonPipe') {
        if (!window.addTileLayers[item.layerName]) {
          window.addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName)
src/pages/layout/components/scomponents/popup/panorama.vue
@@ -37,11 +37,11 @@
  bottom: 0;
  right: 0;
  z-index: 999;
  background: #00d2ff;
  background: transparent;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #3a7bd5, #00d2ff);
  // background: -webkit-linear-gradient(to right, #3a7bd5, #00d2ff);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #3a7bd5, #00d2ff);
  // background: linear-gradient(to right, #3a7bd5, #00d2ff);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  pointer-events: auto;
src/styles/element/index.scss
@@ -8,7 +8,7 @@
  // border: none;
  .el-table__header-wrapper {
    font-size: 18px;
    font-size: 14px;
    tr {
      height: 38px;
@@ -27,7 +27,7 @@
  }
  .el-table__body-wrapper {
    font-size: 16px;
    font-size: 14px;
    // table {
    //   border-collapse: separate !important;
src/views/companyInfo/components/box/dataContent.vue
@@ -155,7 +155,8 @@
            &.on {
                position: relative;
                color: #75b1ff;
                // color: #75b1ff;
                box-shadow: inset 0 0 100px #2a8ef1;
            }
        }
    }
src/views/companyInfo/components/box/fireTrend.vue
@@ -10,7 +10,7 @@
-->
<script setup>
import publicContent from "./publicContent.vue"
import { getList } from "@/api/emergencySupplies/emergencySupplies"
import { getList, getCompanyList } from "@/api/emergencySupplies/emergencySupplies"
import { reactive } from "vue"
const { VITE_APP_BASE } = import.meta.env
@@ -80,6 +80,10 @@
  pages.total = 0
  getLists(formInline)
}
// 应急物资图片
let picList = ref([])
// 应急物资
let emergencySupplies = reactive({})
// 查询分页数据
function getLists(param = {}) {
@@ -87,17 +91,16 @@
  param.size = pages.pageSize
  param.firmId = data.companyInfo.id
  loading.value = true
  getList(param)
  getCompanyList(param)
    .then((res) => {
      const data = res.data.data
      data.records.forEach((element) => {
        if (element.ownership == 1) {
          element.ownership = "园区"
        } else {
          element.ownership = "企业"
      tableData.value = data.dataList
      data.dataList.forEach(item => {
        if (item.lng && item.lat) {
          emergencySupplies = item
        }
      })
      tableData.value = data.records
      picList.value = data.picList
      pages.total = data.total
      loading.value = false
    })
@@ -108,43 +111,25 @@
}
let addTileLayers = {}
// 行点击
function rowClick(row) {
function rowClick() {
  // 销毁之前的
  destroy()
  if (!addTileLayers[row.name]) {
    addTileLayers[row.name] = new DC.HtmlLayer(row.name)
    window.$viewer.addLayer(addTileLayers[row.name])
    // item.method(item.params).then(res => {
    // let data = res.data.data.records
    // tableData.value.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
    let iconEl = ''
    // if ('showPanel' in item && item.showPanel == false) {
    //   if (item.backgroundIcon) {
    iconEl = `
    let iconEl = `
                <div class="map-name">${row.name}</div>
                <div class="map-icon">
                  <img src="${image.value}">
                </div>
                `
    //   }
    // } else
    // {
    //   iconEl = `<div class="marsBlueGradientPnl">
    //               <div>${row.name}</div>
    //             </div>`
    // }
    let divIcon = new DC.DivIcon(
      new DC.Position(row.lng, row.lat, 64),
      `<div class="public-map-popup ${'qyfb-box'}">
                    ${iconEl}
                  </div>`
    )
    // divIcon.attrParams = i
    let incident = () => { }
@@ -187,17 +172,18 @@
    </el-form>
    <!-- <global-search :options="options" @searchBtn="searchBtn" @resetBtn="resetBtn" ref="SeachBarCondition"></global-search> -->
    <div class="table-box">
      <el-table :data="tableData" 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="200" />
      <el-table :data="tableData" @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" />
        <el-table-column prop="numUnit" label="数量" />
        <el-table-column prop="personInCha" label="负责人" />
        <el-table-column label="操作">
        <!-- <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" :disabled="scope.row.lng == ''"
              @click="rowClick(scope.row)">定位</el-button>
          </template>
        </el-table-column>
        </el-table-column> -->
      </el-table>
    </div>
  </div>
src/views/companyInfo/components/box/unitContent.vue
@@ -27,6 +27,7 @@
const curSelect = ref('')
let addTileLayers = {}
let addPupoLayers = {}
onMounted(() => {
    handleCheckChange()
})
@@ -44,29 +45,42 @@
        }).then(res => {
            let data = res.data.data.records
            data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
                let iconEl = ''
                // {
                //     iconEl = `<div class="marsBlueGradientPnl">
                //   <div>${i.name}</div>
                // </div>`
                // }
                let img = image.value.filter(l => i.name.includes(l.label))
                img = img.length > 0 ? img : image
                iconEl = `<div class="map-name">${i.name}</div>
                            <div class="map-icon">
                            <img src="${img[0].value}">
                            </div>`
                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, 0),
                    `<div class="public-map-popup  ${'yjc-box'}">
                    ${iconEl}
                    </div>`
                    new DC.Position(i.lng, i.lat, 64),
                    `<div class="public-map-popup  ${'yjc-box'}"> ${iconEl}  </div>`
                )
                divIcon.attrParams = i
                let incident = () => { }
                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">
                    ${iconEl}
                  </div>`
                    )
                    let incident = () => {
                        destroy()
                    }
                    divIcon.on(DC.MouseEventType.CLICK, incident)
                    addPupoLayers[attrParams.name].addOverlay(divIcon)
                }
                // if (item.incident) incident = item.incident
@@ -85,45 +99,21 @@
    // }
    // })
}
// 获取下拉字典
// const getDictData = (code) => {
//     const param = {
//         code: code,
//     }
//     getDictionary(param).then((res) => {
//         resData.data = res.data.data.map(item => {
//             return {
//                 type: item.sort,
//                 label: item.dictValue,
//                 value: item.dictKey
//             }
//         })
//         tabClick(resData.data[0])
//     })
// }
// const tabClick = (item) => {
//     handleCheckChange(item)
//     // curSelect.value = item.value
// }
// const showOn = computed(() => (item) => {
//     if (curSelect.value == item.value) {
//         return true
//     }
//     return false
// })
// getDictData("emergency_space_type")
// 销毁
function destroy() {
    let arr = Object.keys(addPupoLayers)
    arr.filter(i => i != 'hgyq').forEach(i => {
        addPupoLayers[i] && window.$viewer.removeLayer(addPupoLayers[i])
    })
    addPupoLayers = {}
}
onUnmounted(() => {
    console.log('leftContainer unmounted***********************')
    let arr = Object.keys(addTileLayers)
    arr.forEach(i => {
        addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
    })
    destroy()
})
</script>
src/views/pac/components/box/dataContent.vue
@@ -84,9 +84,7 @@
          let data = res.data.data.records
          data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
            let iconEl = ''
            let flag = typeList.find(l => l.type == i.type)
            if (flag) {
              if (flag.backgroundIcon) {
                iconEl = `
@@ -129,9 +127,11 @@
  })
  if (row.type == 2) {
    EventBus.emit('restHandleCheckChange', `3-3`)
    EventBus.emit('restHandleCheckChange', `3-3-2`)
    EventBus.emit('restHandleCheckChange', `3-3-4`)
  } else {
    EventBus.emit('restHandleDelChange', `3-3`)
    EventBus.emit('restHandleDelChange', `3-3-2`)
    EventBus.emit('restHandleDelChange', `3-3-4`)
  }
}
@@ -200,7 +200,8 @@
      &.on {
        position: relative;
        color: #75b1ff;
        // color: #75b1ff;
        box-shadow: inset 0 0 100px #2a8ef1;
      }
    }
  }
src/views/rt/components/box/dataContent.vue
@@ -181,7 +181,8 @@
}
.list_box li.active {
  color: #409eff;
  // color: #409eff;
  box-shadow: inset 0 0 100px #2a8ef1;
}
.page_box {
src/views/space/components/leftContainer.vue
@@ -98,7 +98,8 @@
      &.on {
        position: relative;
        color: #75b1ff;
        // color: #75b1ff;
        box-shadow: inset 0 0 100px #2a8ef1;
      }
      .label-box {
src/views/supplies/components/box/dataContent.vue
@@ -3,7 +3,9 @@
    <template #content>
      <div class="content_box">
        <div class="list_box">
          <span class="content_span" @click="scrollLeft">《</span>
          <span class="content_span" @click="scrollLeft">
            <img src="@/assets/images/left.png" alt="">
          </span>
          <el-scrollbar ref="scrollbarRef" @scroll="scroll">
            <div class="scrollbar-flex-content">
              <p v-for="(item, index) in tilteList" @click="handleClick(item, index)" :key="index"
@@ -12,7 +14,9 @@
              </p>
            </div>
          </el-scrollbar>
          <span class="content_span" @click="scrollRight">》</span>
          <span class="content_span" @click="scrollRight">
            <img src="@/assets/images/right.png" alt="">
          </span>
        </div>
        <div class="page_box">
@@ -248,6 +252,18 @@
  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 {
@@ -257,8 +273,8 @@
}
.active {
  // background-color: rgba(255, 255, 255, 0.3);
  color: #409eff;
  border-radius: 10px;
  // color: #409eff;
  // border-radius: 10px;
  box-shadow: inset 0 0 100px #2a8ef1;
}
</style>