智慧园区前端大屏
shuishen
2024-11-20 77ec0dab0654302923bd76ccb6106dd708c56f6f
Merge branch 'main' of http://139.196.74.78:10010/r/zhyq/bigScreen
6 files modified
2 files added
188 ■■■■ changed files
public/img/mapicon/wy.png patch | view | raw | blame | history
public/img/mapicon/yjwz.png patch | view | raw | blame | history
src/components/global/GlobalSearch.vue 37 ●●●● patch | view | raw | blame | history
src/views/companyInfo/components/box/dataContent.vue 31 ●●●● patch | view | raw | blame | history
src/views/companyInfo/components/box/fireTrend.vue 47 ●●●●● patch | view | raw | blame | history
src/views/companyInfo/components/box/unitContent.vue 27 ●●●● patch | view | raw | blame | history
src/views/rs/components/box/dataContent.vue 35 ●●●● patch | view | raw | blame | history
src/views/space/components/box/dataContent.vue 11 ●●●● patch | view | raw | blame | history
public/img/mapicon/wy.png
public/img/mapicon/yjwz.png
src/components/global/GlobalSearch.vue
@@ -7,8 +7,7 @@
        <el-select :teleported="false" :size="item.size || ''" v-model="params[item.props]"
          :clearable="item.clearable || false" :multiple="item.multiple || false" collapse-tags
          :placeholder="item.placeholder || (item.label ? '请选择' + item.label : '请选择')"
          :style="{ flex: 1, marginLeft: $px2rem(item.label ? '15px' : '') }"
          @change="searchSelectChange($event, item)">
          :style="{ flex: 1, marginLeft: $px2rem(item.label ? '15px' : '') }" @change="searchSelectChange($event, item)">
          <el-option v-for="selectItem in item.data" :key="selectItem.value" :label="selectItem.label"
            :value="selectItem.value">
          </el-option>
@@ -60,8 +59,8 @@
      <div class="search-cont" v-if="item.type === 'multiDate' && options.quickMultiDateBtn">
        <span v-show="item.label" class="search-cont-label">{{ item.label }}:</span>
        <el-date-picker :append-to-body="false" :size="item.size || ''" v-model="params[item.props]"
          :type="multiDateType" :key="multiDateType" :clearable="item.clearable || false"
        <el-date-picker :append-to-body="false" :size="item.size || ''" v-model="params[item.props]" :type="multiDateType"
          :key="multiDateType" :clearable="item.clearable || false"
          :placeholder="item.placeholder || item.label || '多选择时间'" :editable="false"
          :style="{ width: $px2rem(`${item.width || '180'}px`), marginLeft: $px2rem(item.label ? '15px' : '') }"
          :value-format="item.format || 'yyyy-MM-dd'">
@@ -72,20 +71,20 @@
    <div class="search-cont search-cont-btn" v-if="options.searchBtnGroup">
      <el-button v-if="options.searchBtn || false"
        :type="options.searchBtnTitleShow ? '' : options.searchType || 'primary'"
        :disabled="options.searchDisabled || false" :size="options.searchSize || ''" :icon="Search"
        @click="searchClick" :class="{ 'btn-h32-w76': options.searchBtnTitleShow ? false : true }">{{
        :disabled="options.searchDisabled || false" :size="options.searchSize || ''" :icon="Search" @click="searchClick"
        :class="{ 'btn-h32-w76': options.searchBtnTitleShow ? false : true }">{{
          options.searchBtnTitleShow ?
            options.searchBtnTitle : '查 询'
          options.searchBtnTitle : '查 询'
        }}</el-button>
      <el-button v-if="options.resetBtn || false" :type="options.resetType || ''"
        :disabled="options.resetDisabled || false" :size="options.resetSize || ''" :icon="Refresh"
        @click="resetClick" class="btn-h32-w76 reset-btn">重
        :disabled="options.resetDisabled || false" :size="options.resetSize || ''" :icon="Refresh" @click="resetClick"
        class="btn-h32-w76 reset-btn">重
        置</el-button>
      <el-button v-if="options.exportBtn || false" :type="options.exportType || 'primary'"
        :disabled="options.exportDisabled || false" :size="options.exportSize || ''" :icon="Download"
        @click="exportClick" class="btn-h32-w76">导 出</el-button>
        :disabled="options.exportDisabled || false" :size="options.exportSize || ''" :icon="Download" @click="exportClick"
        class="btn-h32-w76">导 出</el-button>
    </div>
  </div>
</template>
@@ -494,6 +493,22 @@
  }
}
.search-bar .search-cont-btn[data-v-4fa3a782] .el-button {
  background: none;
}
::v-deep .el-button {
  background-color: transparent;
  border-color: none;
  border: none;
  cursor: pointer;
  color: #edffff;
  background: rgba(135, 158, 199, 0.3);
  box-shadow: inset 0px 3px 7px 0px rgba(42, 138, 236, 0.95);
}
::v-deep .el-date-editor {
  width: 100%;
  color: #fff;
src/views/companyInfo/components/box/dataContent.vue
@@ -11,23 +11,30 @@
<script setup>
import { getFacilityList } from "@/api/facility"
import { onUnmounted, reactive } from 'vue'
const { VITE_APP_BASE } = import.meta.env
const resData = reactive({
    data: [{
        label: '防线一',
        value: '1',
        type: 1,
        remark: '防火提及配套设置、装置围堰、罐区围堰'
        remark: '防火提及配套设置、装置围堰、罐区围堰',
        showPanel: false,
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/wy.png'
    }, {
        label: '防线二',
        value: '2',
        type: 2,
        remark: '雨污水排口一体化闸阀、车间收集池、雨污管阀'
        remark: '雨污水排口一体化闸阀、车间收集池、雨污管阀',
        showPanel: false,
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/ysf.png'
    },
    {
        label: '防线三',
        value: '3',
        type: 3,
        remark: '事故应急池、雨水收集池'
        remark: '事故应急池、雨水收集池',
        showPanel: false,
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/yjc.png'
    }
    ]
})
@@ -52,21 +59,17 @@
                        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>
                          `
                                <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>`
                            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">
                    ${iconEl}
                  </div>`
                            new DC.Position(i.lng, i.lat, 0), `<div class="public-map-popup ${'qyfb-box'}"> ${iconEl} </div>`
                        )
                        divIcon.attrParams = i
src/views/companyInfo/components/box/fireTrend.vue
@@ -13,6 +13,11 @@
import { getList } from "@/api/emergencySupplies/emergencySupplies"
import { reactive } from "vue"
const { VITE_APP_BASE } = import.meta.env
let image = ref(VITE_APP_BASE + 'img/mapicon/yjwz.png')
const loading = ref(false)
const tableData = ref([])
@@ -104,9 +109,8 @@
let addTileLayers = {}
// 行点击
function rowClick(row) {
  // window.$viewer.flyToPosition(new DC.Position(row.lng, row.lat, 600, 0, -90, 0))
  // return
  // 销毁之前的
  destroy()
  if (!addTileLayers[row.name]) {
    addTileLayers[row.name] = new DC.HtmlLayer(row.name)
    window.$viewer.addLayer(addTileLayers[row.name])
@@ -119,23 +123,23 @@
    // 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">${row.name}</div>
                <div class="map-icon">
                  <img src="${image.value}">
                </div>
                `
    //   }
    // } else 
    {
      iconEl = `<div class="marsBlueGradientPnl">
                  <div>${row.name}</div>
                </div>`
    }
    // {
    //   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'}">
      `<div class="public-map-popup ${'qyfb-box'}">
                    ${iconEl}
                  </div>`
    )
@@ -154,12 +158,17 @@
  }
}
onUnmounted(() => {
  console.log('销毁***************************')
// 销毁
function destroy() {
  let arr = Object.keys(addTileLayers)
  arr.forEach(i => {
    addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
  })
}
onUnmounted(() => {
  console.log('销毁***************************')
  destroy()
})
</script>
@@ -177,10 +186,10 @@
    <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="160" />
        <el-table-column prop="name" label="名称" width="200" />
        <el-table-column prop="numUnit" label="数量" />
        <el-table-column prop="personInCha" label="负责人" />
        <el-table-column fixed="right" label="操作" width="80">
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" :disabled="scope.row.lng == ''"
              @click="rowClick(scope.row)">定位</el-button>
src/views/companyInfo/components/box/unitContent.vue
@@ -14,6 +14,13 @@
import { getDictionary } from "@/api/dict/dict"
import { onUnmounted, reactive } from 'vue'
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' }]
)
const resData = reactive({
    data: []
})
@@ -38,17 +45,23 @@
            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>`
                }
                // {
                //     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 divIcon = new DC.DivIcon(
                    new DC.Position(i.lng, i.lat, 0),
                    `<div class="public-map-popup">
                    `<div class="public-map-popup  ${'qyfb-box'}">
                    ${iconEl}
                  </div>`
                    </div>`
                )
                divIcon.attrParams = i
src/views/rs/components/box/dataContent.vue
@@ -42,7 +42,7 @@
  total: 0,
}
function positionColor () {
function positionColor() {
  return (row) => {
    if (
      (row.X && row.X != 0) ||
@@ -57,7 +57,7 @@
  }
}
function positionDisabled () {
function positionDisabled() {
  return (row) => {
    if (
      (row.X && row.X != 0) ||
@@ -108,34 +108,13 @@
})
// 行点击
function rowClick (row) {
  // if (state.layer) {
  //   window.$viewer.removeLayer(state.layer)
  // }
  // let layer = new DC.HtmlLayer(`${row.id}`)
  // state.layer = layer
  // window.$viewer.addLayer(layer)
  // let iconEl = `<div class="marsBlueGradientPnl">
  //                 <div>${row.name}</div>
  //               </div>`
  // let divIcon = new DC.DivIcon(
  //   new DC.Position(row.lng, row.lat, 0),
  //   `<div class="public-map-popup">
  //                   ${iconEl}
  //                 </div>`
  // )
  // let incident = () => { }
  // divIcon.on(DC.MouseEventType.CLICK, incident)
  // layer.addOverlay(divIcon)
function rowClick(row) {
  window.$viewer.flyToPosition(new DC.Position(row.lng, row.lat, 600, 0, -90, 0))
}
// 查看详情
function goDetail (row) { }
function goDetail(row) { }
const searchBtn = (params) => {
  resetPage()
@@ -177,10 +156,10 @@
<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" v-loading="loading" element-loading-background="rgba(46, 81, 136, 0.9)">
    <div class="h0 flex-1 table-content" ref="TableContent" v-loading="loading"
      element-loading-background="rgba(46, 81, 136, 0.9)">
      <el-table border :data="tableData" :height="curTableHeight" style="width: 100%">
        <el-table-column align="center" label="序号" width="62" prop="rank">
          <template #default="{ $index, row }">
src/views/space/components/box/dataContent.vue
@@ -44,7 +44,7 @@
  total: 0,
}
function positionColor () {
function positionColor() {
  return (row) => {
    if (
      (row.X && row.X != 0) ||
@@ -59,7 +59,7 @@
  }
}
function positionDisabled () {
function positionDisabled() {
  return (row) => {
    if (
      (row.X && row.X != 0) ||
@@ -111,7 +111,7 @@
// 行点击
function rowClick (row) {
function rowClick(row) {
  // if (state.layer) {
  //   window.$viewer.removeLayer(state.layer)
@@ -138,7 +138,7 @@
// 查看详情
function goDetail (row) { }
function goDetail(row) { }
const searchBtn = (params) => {
  resetPage()
@@ -180,8 +180,7 @@
<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" v-loading="loading"
      element-loading-background="rgba(46, 81, 136, 0.9)">