智慧园区前端大屏
linwe
2024-11-19 940222bec16446d4b933fb7682ca4933fb520b4a
企业详情优化
6 files modified
264 ■■■■■ changed files
src/pages/layout/components/scomponents/layersControl.vue 2 ●●● patch | view | raw | blame | history
src/views/companyInfo/components/box/fireTrend.vue 68 ●●●●● patch | view | raw | blame | history
src/views/companyInfo/components/box/unitContent.vue 144 ●●●● patch | view | raw | blame | history
src/views/rt/components/box/dataContent.vue 7 ●●●●● patch | view | raw | blame | history
src/views/space/components/box/dataContent.vue 17 ●●●● 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
@@ -481,7 +481,7 @@
          item.source.features.forEach(i => {
            let polylineVolume = new DC.PolylineVolume(
              i.geometry.coordinates.map(d => [d[0], d[1], item.height].join(',')).join(';'),
              computeCircle(0.3)
              computeCircle(2)
            )
            polylineVolume.setStyle({
src/views/companyInfo/components/box/fireTrend.vue
@@ -101,6 +101,66 @@
      console.log(err)
    })
}
let addTileLayers = {}
// 行点击
function rowClick(row) {
  // window.$viewer.flyToPosition(new DC.Position(row.lng, row.lat, 600, 0, -90, 0))
  // return
  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 = `
    //             <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>${row.name}</div>
                </div>`
    }
    let divIcon = new DC.DivIcon(
      new DC.Position(row.lng, row.lat, 64),
      `<div class="public-map-popup ${'sk-box'}">
                    ${iconEl}
                  </div>`
    )
    // divIcon.attrParams = i
    let incident = () => { }
    // if (item.incident) incident = item.incident
    divIcon.on(DC.MouseEventType.CLICK, incident)
    addTileLayers[row.name].addOverlay(divIcon)
    // })
    // })
  }
}
onUnmounted(() => {
  console.log('销毁***************************')
  let arr = Object.keys(addTileLayers)
  arr.forEach(i => {
    addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
  })
})
</script>
<template>
@@ -117,9 +177,15 @@
    <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="名称" />
        <el-table-column prop="name" label="名称" width="160" />
        <el-table-column prop="numUnit" label="数量" />
        <el-table-column prop="personInCha" label="负责人" />
        <el-table-column fixed="right" label="操作" width="80">
          <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>
    </div>
  </div>
src/views/companyInfo/components/box/unitContent.vue
@@ -20,99 +20,93 @@
const curSelect = ref('')
let addTileLayers = {}
const handleCheckChange = (row) => {
onMounted(() => {
    handleCheckChange()
})
const handleCheckChange = () => {
    let companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
    resData.data.forEach(item => {
        if (row.value == item.value) {
            if (!addTileLayers[item.label]) {
                addTileLayers[item.label] = new DC.HtmlLayer(item.label)
                window.$viewer.addLayer(addTileLayers[item.label])
                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 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>
                  `
                            }
                        } else {
                            iconEl = `<div class="marsBlueGradientPnl">
    // 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 iconEl = ''
                {
                    iconEl = `<div class="marsBlueGradientPnl">
                  <div>${i.name}</div>
                </div>`
                        }
                }
                        let divIcon = new DC.DivIcon(
                            new DC.Position(i.lng, i.lat, 0),
                            `<div class="public-map-popup">
                let divIcon = new DC.DivIcon(
                    new DC.Position(i.lng, i.lat, 0),
                    `<div class="public-map-popup">
                    ${iconEl}
                  </div>`
                        )
                )
                        divIcon.attrParams = i
                divIcon.attrParams = i
                        let incident = () => { }
                let incident = () => { }
                        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[item.label].addOverlay(divIcon)
                    })
                })
            } else {
                addTileLayers[item.label].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
    //     }
    // }
    // })
}
// 获取下拉字典
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
            }
        })
// 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])
    })
}
//         tabClick(resData.data[0])
//     })
// }
const tabClick = (item) => {
    handleCheckChange(item)
    curSelect.value = item.value
}
// const tabClick = (item) => {
//     handleCheckChange(item)
//     // curSelect.value = item.value
// }
const showOn = computed(() => (item) => {
    if (curSelect.value == item.value) {
        return true
    }
    return false
})
// const showOn = computed(() => (item) => {
//     if (curSelect.value == item.value) {
//         return true
//     }
//     return false
// })
getDictData("emergency_space_type")
// getDictData("emergency_space_type")
onUnmounted(() => {
    console.log('leftContainer unmounted***********************')
    let arr = Object.keys(addTileLayers)
    arr.forEach(i => {
        addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
@@ -122,14 +116,14 @@
<template>
    <div class="left-container cur-container">
        <div class="tablist h100">
        <!-- <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">
                    {{ item.label }}
                </div>
            </div>
        </div>
        </div> -->
    </div>
</template>
src/views/rt/components/box/dataContent.vue
@@ -164,7 +164,6 @@
.list_box ul {
  display: flex;
  /* 使用 Flexbox 布局 */
  padding: 0;
  margin: 0;
  list-style: none;
@@ -174,11 +173,13 @@
  padding: 10px;
  margin-right: 10px;
  cursor: pointer;
  box-shadow: inset 0 0 40px #409eff;
  border-radius: 10px;
  margin-bottom: 5px;
}
.list_box li.active {
  background-color: rgba(117, 116, 116, 0.3);
  color: white;
  color: #409eff;
}
.page_box {
src/views/space/components/box/dataContent.vue
@@ -45,7 +45,7 @@
  total: 0,
}
function positionColor () {
function positionColor() {
  return (row) => {
    if (
      (row.X && row.X != 0) ||
@@ -60,7 +60,7 @@
  }
}
function positionDisabled () {
function positionDisabled() {
  return (row) => {
    if (
      (row.X && row.X != 0) ||
@@ -112,7 +112,7 @@
// 行点击
function rowClick (row) {
function rowClick(row) {
  // if (state.layer) {
  //   window.$viewer.removeLayer(state.layer)
@@ -139,7 +139,7 @@
// 查看详情
function goDetail (row) { }
function goDetail(row) { }
const searchBtn = (params) => {
  resetPage()
@@ -181,15 +181,14 @@
<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">
      <el-table border :data="tableData" :height="curTableHeight" style="width: 100%" v-loading="loading">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="emergencySpaceType" label="类型" width="70" />
        <el-table-column prop="mainFuncName" label="作用" width="60" />
        <el-table-column width="60" label="操作" align="center">
        <el-table-column prop="emergencySpaceType" label="类型" width="130" />
        <el-table-column prop="mainFuncName" label="作用" width="70" />
        <el-table-column width="70" label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" :disabled="scope.row.lng == ''" @click="rowClick(scope.row)">
              定位
src/views/supplies/components/box/dataContent.vue
@@ -26,12 +26,9 @@
            </el-table>
            <el-table border empty-text="" v-else :data="tableData">
              <!-- <el-table-column prop="firmName" label="企业名称" /> -->
              <el-table-column prop="name" label="物资名称" />
              <!-- <el-table-column prop="personInCha" label="负责人" /> -->
              <!-- <el-table-column prop="personInChaPhone" label="负责人电话" /> -->
              <el-table-column prop="stoLoc" label="物资地址" />
              <el-table-column prop="num" label="数量" />
              <el-table-column prop="numUnit" label="数量" />
            </el-table>
          </div>
        </div>
@@ -93,7 +90,7 @@
  ownership: 1,
})
function getCompanyPages (param = {}) {
function getCompanyPages(param = {}) {
  param.current = pages.page
  param.size = pages.pageSize
  getPage(param).then(res => {
@@ -109,7 +106,7 @@
  })
}
function handleClick (item, index) {
function handleClick(item, index) {
  currentIndex.value = index
  pages.page = 1
  pages.pageSize = 1000
@@ -161,7 +158,7 @@
// }
// 查询分页数据
function getLists (param = {}) {
function getLists(param = {}) {
  param.current = pages.page
  param.size = pages.pageSize
  loading.value = true
@@ -180,7 +177,7 @@
// 查询分页数据
function getComLists (param = {}) {
function getComLists(param = {}) {
  param.current = pages.page
  param.size = pages.pageSize
  loading.value = true
@@ -240,16 +237,15 @@
  margin: 10px;
  padding: 0 5px;
  text-align: center;
  border-radius: 4px;
  // background: var(--el-color-danger-light-9);
  background-color: rgba(117, 116, 116, 0.3);
  // color: var(--el-color-danger);
  // color: #000;
  border-radius: 10px;
  box-shadow: inset 0 0 40px #409eff;
  cursor: pointer;
}
.content_box .content_span {
  line-height: 70px;
  margin: 0 15px;
  cursor: pointer;
}
.page_box .el-table {
@@ -259,8 +255,8 @@
}
.active {
  background-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  // background-color: rgba(255, 255, 255, 0.3);
  color: #409eff;
  border-radius: 10px;
}
</style>