工具栏，菜单，等更改

shuishen

2024-10-30 65f4b3f007fe452dc2dcc0045577f1cd10dd4e06

工具栏，菜单，等更改

 package.json

@@ -25,6 +25,7 @@
    "vue-router": "^4.4.5"
  },
  "devDependencies": {
    "@vitejs/plugin-basic-ssl": "^1.1.0",
    "@vitejs/plugin-vue": "^5.1.4",
    "sass": "^1.80.4",
    "sass-loader": "^16.0.2",

 pnpm-lock.yaml

@@ -40,6 +40,9 @@
    version: 4.4.5(vue@3.5.12)

devDependencies:
  '@vitejs/plugin-basic-ssl':
    specifier: ^1.1.0
    version: 1.1.0(vite@5.4.10)
  '@vitejs/plugin-vue':
    specifier: ^5.1.4
    version: 5.1.4(vite@5.4.10)(vue@3.5.12)
@@ -717,6 +720,15 @@
    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
    dev: false

  /@vitejs/plugin-basic-ssl@1.1.0(vite@5.4.10):
    resolution: {integrity: sha512-wO4Dk/rm8u7RNhOf95ZzcEmC9rYOncYgvq4z3duaJrCgjN8BxAnDVyndanfcJZ0O6XZzHz6Q0hTimxTg8Y9g/A==}
    engines: {node: '>=14.6.0'}
    peerDependencies:
      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
    dependencies:
      vite: 5.4.10(sass@1.80.4)(terser@5.31.1)
    dev: true

  /@vitejs/plugin-vue@5.1.4(vite@5.4.10)(vue@3.5.12):
    resolution: {integrity: sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==}
    engines: {node: ^18.0.0 || >=20.0.0}

 public/images/header.png

 src/assets/img/satellite.png

 src/assets/img/stand.png

 src/components/global/publicBox.vue

New file
@@ -0,0 +1,59 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-29 13:33:11
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-29 19:58:45
 * @FilePath: \bigScreen\src\components\global\publicBox.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<template>
  <div class="map-layers-change-box">
    <div class="title">
      <slot name="name"></slot>
      <slot name="close"></slot>
    </div>

    <div class="content">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script setup>

</script>

<script>
export default {
  name: 'publicBox'
}
</script>

<style lang="scss" scoped>
.map-layers-change-box {
  position: absolute;
  right: 540px;
  z-index: 99;
  top: 152px;
  border: 1px solid #4081CB;
  border-radius: 4px;
  background: rgba(30, 36, 50, 0.6);
  box-shadow: inset 0px 3px 7px 0px rgba(42, 138, 236, 0.95);
  pointer-events: auto;
  color: #fff;

  .title {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    border-bottom: 1px solid;
    border-color: rgba(32, 160, 255, 0.3);
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
    font-size: 16px;
  }
}
</style>

 src/router/index.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-25 16:35:31
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-25 19:13:08
 * @LastEditTime: 2024-10-29 17:48:52
 * @FilePath: \bigScreen\src\router\index.js
 * @Description: 
 * 
@@ -24,23 +24,37 @@
      {
        path: 'survey',
        meta: {
          title: 'survey'
          title: '园区概况'
        },
        component: () => import('@/views/survey/index.vue')
      },
      {
        path: 'env',
        path: 'space',
        meta: {
          title: '环境监测'
          title: '应急空间'
        },
        component: () => import('@/views/env/index.vue')
        component: () => import('@/views/space/index.vue')
      },
      {
        path: 'monitoring',
        path: 'supplies',
        meta: {
          title: '视频监控'
          title: '应急物资'
        },
        component: () => import('@/views/monitoring/index.vue')
        component: () => import('@/views/supplies/index.vue')
      },
      {
        path: 'equipment',
        meta: {
          title: '应急设备'
        },
        component: () => import('@/views/equipment/index.vue')
      },
      {
        path: 'pac',
        meta: {
          title: '三级防控'
        },
        component: () => import('@/views/pac/index.vue')
      }
    ]
  },

 src/styles/base/container.scss

@@ -13,4 +13,8 @@
#app {
  width: 100%;
  height: 100%;
}

.cursor-p {
  cursor: pointer;
}

 src/utils/getViewer.js

New file
@@ -0,0 +1,16 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-29 15:30:08
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-29 15:31:44
 * @FilePath: \bigScreen\src\utils\getViewer.js
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
 */
export const getViewer = () => {
  const { appContext } = getCurrentInstance()
  const global = appContext.config.globalProperties

  return global.$viewer
}

 src/utils/http.js

@@ -38,6 +38,7 @@
//http request拦截
axios.interceptors.request.use(
  config => {
    console.log(config, '906456456465')
    // start progress bar
    NProgress.start()
    // 初始化错误提示状态

 src/utils/initMap.js

File was deleted

 src/utils/utils.js

New file
@@ -0,0 +1,15 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-29 19:46:37
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-29 19:50:09
 * @FilePath: \bigScreen\src\utils\utils.js
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
 */
// 获取assets静态资源
export const getAssetsFile = (url) => {
  console.log(import.meta.url, 1222222)
  return new URL(`../assets/img/${url}`, import.meta.url).href
}

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

copy from src/views/env/components/box/dataContent.vue
copy to src/views/equipment/components/box/dataContent.vue

 src/views/equipment/components/box/fireContent.vue

copy from src/views/env/components/box/fireContent.vue
copy to src/views/equipment/components/box/fireContent.vue

 src/views/equipment/components/box/fireSource.vue

copy from src/views/env/components/box/fireSource.vue
copy to src/views/equipment/components/box/fireSource.vue

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

copy from src/views/env/components/box/fireTrend.vue
copy to src/views/equipment/components/box/fireTrend.vue

 src/views/equipment/components/box/occurStatistics.vue

copy from src/views/env/components/box/occurStatistics.vue
copy to src/views/equipment/components/box/occurStatistics.vue

 src/views/equipment/components/box/publicContent.vue

copy from src/views/env/components/box/publicContent.vue
copy to src/views/equipment/components/box/publicContent.vue

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

copy from src/views/env/components/box/unitContent.vue
copy to src/views/equipment/components/box/unitContent.vue

 src/views/equipment/components/leftContainer.vue

copy from src/views/env/components/leftContainer.vue
copy to src/views/equipment/components/leftContainer.vue

 src/views/equipment/components/rightContainer.vue

File was renamed from src/views/env/components/rightContainer.vue
@@ -2,8 +2,8 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-10 15:27:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-25 18:41:28
 * @FilePath: \bigScreen\src\views\statistics\components\rightContainer.vue
 * @LastEditTime: 2024-10-26 14:49:05
 * @FilePath: \bigScreen\src\views\survey\components\rightContainer.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
@@ -18,23 +18,29 @@
<template>
  <div class="right-container">
    <div class="fire-source box">
      <div class="title-box">
        火警事件来源
      </div>
      <title-box>
        <template #titleName>
          火警事件来源
        </template>
      </title-box>
      <fire-source></fire-source>
    </div>

    <div class="occur-statistics box">
      <div class="title-box">
        易发区统计
      </div>
      <title-box>
        <template #titleName>
          易发区统计
        </template>
      </title-box>
      <fire-trend></fire-trend>
    </div>

    <div class="fire-trend box">
      <div class="title-box">
        火警上报趋势
      </div>
      <title-box>
        <template #titleName>
          火警上报趋势
        </template>
      </title-box>
      <occur-statistics></occur-statistics>
    </div>
  </div>

 src/views/equipment/index.vue

copy from src/views/env/index.vue
copy to src/views/equipment/index.vue

 src/views/layout/components/mainMenu.vue

@@ -22,12 +22,20 @@
      path: '/layout/survey'
    },
    {
      menuName: '环境监测',
      path: '/layout/env'
      menuName: '应急空间',
      path: '/layout/space'
    },
    {
      menuName: '视频监控',
      path: '/layout/monitoring'
      menuName: '应急物资',
      path: '/layout/supplies'
    },
    {
      menuName: '应急设备',
      path: '/layout/equipment'
    },
    {
      menuName: '三级防控',
      path: '/layout/pac'
    },
  ]
)

 src/views/layout/components/mainTool.vue

@@ -6,53 +6,17 @@
    </el-button>
  </div>

  <base-map v-show="showBaseMap" @close="closeBaseMap"></base-map>
  <base-map v-show="showBaseMap" @close="closeBox"></base-map>

  <ul v-show="moreToolShow" class="dropdown-menu dropdown-menu-right toolBarRight-dropdown-menu" style="">
    <li class="widget-btn" data-widget="widgets/measure/widget.js">
      <a href="javascript:void(0)"><i class="fa fa-calculator"></i>图上量算</a>
    </li>
    <li class="widget-btn" data-widget="widgets/analysis/widget.js">
      <a href="javascript:void(0)"><i class="fa fa-bar-chart"></i>空间分析</a>
    </li>
    <li class="widget-btn" data-widget="widgets/centerXY/widget.js">
      <a href="javascript:void(0)"><i class="fa fa-map-pin"></i>坐标定位</a>
    </li>
    <li class="widget-btn" data-widget="widgets/navXZQH/widget.js">
      <a href="javascript:void(0)"><i class="fa fa-paper-plane"></i>地区导航</a>
    </li>
    <li class="widget-btn" data-widget="widgets/addmarker/widget.js">
      <a href="javascript:void(0)"><i class="fa fa-edit"></i>我的标记</a>
    </li>
    <li class="widget-btn" data-widget="widgets/bookmark/widget.js">
      <a href="javascript:void(0)"><i class="fa fa-tags"></i>视角书签</a>
    </li>
    <li class="widget-btn" data-widget="widgets/print/widget.js">
      <a href="javascript:void(0)"><i class="fa fa-print"></i>地图打印</a>
    </li>
    <li class="widget-btn" data-widget="widgets/plot/widget.js">
      <a href="javascript:void(0)"><i class="fa fa-object-group"></i>图上标绘</a>
    </li>
    <li class="widget-btn" data-widget="widgets/roamLine/widget.js">
      <a href="javascript:void(0)"><i class="fa fa-send-o"></i>飞行漫游</a>
    </li>
    <li class="widget-btn" data-widget="widgets/queryRoute/widget.js">
      <a href="javascript:void(0)"><i class="fa fa-level-up"></i>路线导航</a>
    </li>
    <li class="widget-btn" data-widget="widgets/mapSplit/widget.js">
      <a href="javascript:void(0)"><i class="fa fa-columns"></i>卷帘对比</a>
    </li>
    <li class="widget-btn" data-widget="widgets/mapCompare/widget.js">
      <a href="javascript:void(0)"><i class="fa fa-window-restore"></i>分屏对比</a>
    </li>
  </ul>
  <tool-list :moreToolShow="moreToolShow" @close="closeBox"></tool-list>
</template>

<script setup>
import baseMap from './scomponents/baseMap.vue'
let moreToolShow = ref(false)
import toolList from './scomponents/toolList.vue'

let showBaseMap = ref(false)
let moreToolShow = ref(false)

const btnGroup = [
  {
@@ -76,11 +40,19 @@

  if (item.key == 'map') {
    showBaseMap.value = !showBaseMap.value
    moreToolShow.value = false

  }

  if (item.key == 'tool') {
    moreToolShow.value = !moreToolShow.value
  }
}

const closeBaseMap = () => showBaseMap.value = false
const closeBox = (type) => {
  if (type == 'map') showBaseMap.value = false

  if (type == 'tool') moreToolShow.value = false
}
</script>

<style lang="scss" scoped>

 src/views/layout/components/scomponents/baseMap.vue

@@ -2,20 +2,23 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-28 11:44:45
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-29 00:05:47
 * @LastEditTime: 2024-10-29 20:50:40
 * @FilePath: \bigScreen\src\views\layout\components\scomponents\baseMap.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<template>
  <div class="map-layers-change-box">
    <div class="title">
  <public-box>
    <template #name>
      <div class="name"><i class="fa fa-map"></i>&nbsp;底图</div>
      <div class="close" @click="$emit('close')"><i class="fa fa-close"></i></div>
    </div>
    </template>

    <div class="content">
    <template #close>
      <div class="close" @click="$emit('close', 'map')"><i class="fa fa-close"></i></div>
    </template>

    <template #content>
      <div class="layers-box-content">
        <ul class="layers-box">
          <li :class="{ on: item.mode == curMode }" v-for="item, index in baseMaps" :key="index"
@@ -26,18 +29,23 @@
        </ul>
      </div>

      <div class="checkbox checkbox-primary checkbox-inline" style="margin-left:10px;color:#fff"><input
          id="chkHasTerrain" class="styled" type="checkbox"> <label for="chkHasTerrain">显示地形</label></div>
    </div>
  </div>
      <div class="show-terrain" style="margin-left:10px;color:#fff">
        <el-checkbox @change="terrainChange" v-model="showTerrainFlag" label="显示地形" size="large" />
      </div>
    </template>
  </public-box>
</template>

<script setup>
import { getAssetsFile } from 'utils/utils'
import AmapMercatorTilingScheme from './cesium/AmapMercatorTilingScheme/index'

const { appContext } = getCurrentInstance()
const global = appContext.config.globalProperties
const Cesium = DC.getLib('Cesium')
const cesiumToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYTZlNGNlYS01NTU1LTQ1MGEtYmNlZS0yNTE2NDk5YWM2MjEiLCJpZCI6MTc5Njk2LCJpYXQiOjE3MDA1NDcwMjV9.qcl4AH2731cfFd0-I1ZLUINPXqvglLkDFD-UGR2zU5M'
Cesium.Ion.defaultAccessToken = cesiumToken

const TDT_Token = 'c6eea7dad4fa1e2d1e32ec0e7c9735db'
// 天地图Key
@@ -166,7 +174,7 @@

let mapLayers = [
  {
    src: '',
    src: getAssetsFile('stand.png'),
    mode: '0',
    name: '天地图矢量',
    layers: [
@@ -175,7 +183,7 @@
    ]
  },
  {
    src: '',
    src: getAssetsFile('satellite.png'),
    mode: '1',
    name: '天地图影像',
    layers: [
@@ -187,7 +195,7 @@
    ]
  },
  {
    src: '',
    src: getAssetsFile('stand.png'),
    mode: '2',
    name: '高德矢量',
    layers: [
@@ -198,7 +206,7 @@
    ]
  },
  {
    src: '',
    src: getAssetsFile('satellite.png'),
    mode: '3',
    name: '高德影像',
    layers: [
@@ -268,78 +276,79 @@
}

loadLAYER(0, 0)

const showTerrainFlag = ref(false)

const terrainChange = (e) => {
  if (e) {
    let terrain = DC.TerrainFactory.createTerrain(DC.TerrainType.XYZ, {
      url: 'https://data.marsgis.cn/terrain'
    })
    global.$viewer.setTerrain(terrain)
  } else {
    global.$viewer.setTerrain()
  }
} 
</script>

<style lang="scss" scoped>
.map-layers-change-box {
  position: absolute;
  right: 540px;
  z-index: 99;
  top: 152px;
  border: 1px solid #4081CB;
  border-radius: 4px;
  background: rgba(135, 158, 199, 0.3);
  box-shadow: inset 0px 3px 7px 0px rgba(42, 138, 236, 0.95);
  pointer-events: auto;
.close {
  cursor: pointer;
}

  .title {
.layers-box-content {
  .layers-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 354px;
    padding: 0 10px;
    border-color: rgba(32, 160, 255, 0.3);
    background: rgba(30, 36, 50, 0.6);
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
    font-size: 16px;
    box-sizing: border-box;

    .close {
    li {
      margin-top: 10px;
      cursor: pointer;
    }
  }

  .content {
    .layers-box-content {
      .layers-box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 354px;
        padding: 0 10px;
        box-sizing: border-box;
      &.on,
      &:hover {
        div:first-child {
          border: solid 2px #337fe5;
        }

        li {
          margin-top: 10px;
          cursor: pointer;

          &.on,
          &:hover {
            div:first-child {
              border: solid 2px #337fe5;
            }

            div:last-child {
              color: #337fe5;
            }
          }

          div:first-child {
            width: 76px;
            height: 76px;
            background: red;
            border: 2px solid white;
            box-sizing: border-box;
          }

          div:last-child {
            width: 76px;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            text-align: center;
          }
        div:last-child {
          color: #337fe5;
        }
      }

      div:first-child {
        width: 76px;
        height: 76px;
        background: red;
        border: 2px solid white;
        box-sizing: border-box;

        img {
          width: 100%;
          height: 100%;
        }
      }

      div:last-child {
        width: 76px;
        height: 20px;
        line-height: 20px;
        color: #fff;
        font-size: 12px;
        text-align: center;
      }
    }
  }
}

.show-terrain {
  ::v-deep(.el-checkbox) {
    .el-checkbox__label {
      color: #fff;
    }
  }
}

 src/views/layout/components/scomponents/tool/exportScene.vue

New file
@@ -0,0 +1,12 @@
<template>
</template>

<script setup>
import { getViewer } from 'utils/getViewer'
const globalViewer = getViewer()
globalViewer.exportScene()
const emit = defineEmits(['closeChild'])
emit('closeChild')
</script>

<style lang="scss" scoped></style>

 src/views/layout/components/scomponents/tool/location.vue

New file
@@ -0,0 +1,92 @@
<!--
 * @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
 * @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;底图</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-content">
        <div>
          <span>经度:</span>
          <el-input v-model="longitude" size="small" placeholder="请输入经度" />
        </div>
        <div>
          <span>纬度:</span>
          <el-input v-model="latitude" size="small" placeholder="请输入纬度" />
        </div>
        <div>
          <span>高度:</span>
          <el-input v-model="height" size="small" placeholder="请输入高度" />
        </div>
      </div>

      <div class="cur-btn">
        <el-button color="rgba(13,100,167,.8)" @click="flyTo" type="primary" size="small">坐标定位</el-button>
      </div>
    </template>
  </public-box>
</template>

<script setup>
const longitude = ref(0)
const latitude = ref(0)
const height = ref(0)

import { getViewer } from 'utils/getViewer'
const globalViewer = getViewer()

const flyTo = () => {
  globalViewer.flyToPosition(new DC.Position(longitude.value, latitude.value, height.value, 0, -90, 0), () => { }, 3)
}
</script>

<style lang="scss" scoped>
.cur-content {
  &>div {
    margin-top: 10px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      width: 54px;
    }

    ::v-deep(.el-input) {
      border: none !important;

      .el-input__wrapper {
        background: rgba(63, 72, 84, .7) !important;
        border: none !important;
        box-shadow: none;

        input {
          color: #fff;
        }
      }
    }
  }
}

.cur-btn {
  margin: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

 src/views/layout/components/scomponents/toolList.vue

New file
@@ -0,0 +1,132 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-29 14:20:49
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-29 17:21:51
 * @FilePath: \bigScreen\src\views\layout\components\scomponents\toolList.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<template>
  <ul v-show="moreToolShow" class="tool-list-box">
    <li @click="showComponent(item.component)" v-for="item, index in components" :key="index">
      <i :class="item.icon"></i> {{ item.title }}
    </li>
  </ul>

  <component :is="currentComponent" v-if="currentComponent" @closeChild="closeComponent" />
</template>

<script setup>
const { moreToolShow } = defineProps({
  moreToolShow: {
    type: Boolean, //参数类型
    default: false, //默认值
    required: true, //是否必须传递
  }
})
import location from './tool/location.vue'
import exportScene from './tool/exportScene.vue'
import { getViewer } from 'utils/getViewer'
import component from 'element-plus/es/components/tree-select/src/tree-select-option.mjs'
const emit = defineEmits(['close'])
const globalViewer = getViewer()

let currentComponent = shallowRef(null)
const components = [
  {
    icon: 'fa fa-calculator',
    title: '图上量算',
  },
  {
    icon: 'fa fa-bar-chart',
    title: '空间分析',
  },
  {
    name: 'location',
    icon: 'fa fa-map-pin',
    title: '坐标定位',
    component: location
  },
  {
    icon: 'fa fa-paper-plane',
    title: '地区导航',
  },
  {
    icon: 'fa fa-edit',
    title: '我的标记',
  },
  {
    icon: 'fa fa-tags',
    title: '视角书签',
  },
  {
    name: 'exportScene',
    icon: 'fa fa-download',
    title: '场景导出',
    component: exportScene
  },
  {
    icon: 'fa fa-object-group',
    title: '图上标绘',
  },
  {
    icon: 'fa fa-helicopter',
    title: '飞行漫游',
  },
  {
    icon: 'fa fa-level-up',
    title: '路线导航',
  },
  {
    icon: 'fa fa-columns',
    title: '卷帘对比',
  },
  {
    icon: 'fa fa-window-restore',
    title: '分屏对比',
  },
]

const showComponent = (component) => {
  currentComponent.value = component
  emit('close', 'tool')
}

const closeComponent = () => {
  currentComponent.value = null
}
</script>

<style lang="scss" scoped>
.tool-list-box {
  position: absolute;
  right: 540px;
  z-index: 101;
  top: 152px;
  background: rgba(63, 72, 84, .7);
  pointer-events: auto;

  li {
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    cursor: pointer;

    i {
      margin-right: 5px;
    }
  }

  li:hover {
    background: #4db3ff;
  }

  li:first-child {
    margin-top: 0;
  }
}
</style>

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

 src/views/pac/components/box/fireContent.vue

 src/views/pac/components/box/fireSource.vue

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

 src/views/pac/components/box/occurStatistics.vue

 src/views/pac/components/box/publicContent.vue

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

 src/views/pac/components/leftContainer.vue

 src/views/pac/components/rightContainer.vue

copy from src/views/env/components/rightContainer.vue
copy to src/views/pac/components/rightContainer.vue
File was copied from src/views/env/components/rightContainer.vue
@@ -2,8 +2,8 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-10 15:27:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-25 18:41:28
 * @FilePath: \bigScreen\src\views\statistics\components\rightContainer.vue
 * @LastEditTime: 2024-10-26 14:49:05
 * @FilePath: \bigScreen\src\views\survey\components\rightContainer.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
@@ -18,23 +18,29 @@
<template>
  <div class="right-container">
    <div class="fire-source box">
      <div class="title-box">
        火警事件来源
      </div>
      <title-box>
        <template #titleName>
          火警事件来源
        </template>
      </title-box>
      <fire-source></fire-source>
    </div>

    <div class="occur-statistics box">
      <div class="title-box">
        易发区统计
      </div>
      <title-box>
        <template #titleName>
          易发区统计
        </template>
      </title-box>
      <fire-trend></fire-trend>
    </div>

    <div class="fire-trend box">
      <div class="title-box">
        火警上报趋势
      </div>
      <title-box>
        <template #titleName>
          火警上报趋势
        </template>
      </title-box>
      <occur-statistics></occur-statistics>
    </div>
  </div>

 src/views/pac/index.vue

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

copy from src/views/env/components/box/dataContent.vue
copy to src/views/space/components/box/dataContent.vue

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

copy from src/views/env/components/box/fireContent.vue
copy to src/views/space/components/box/fireContent.vue

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

copy from src/views/env/components/box/fireSource.vue
copy to src/views/space/components/box/fireSource.vue

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

copy from src/views/env/components/box/fireTrend.vue
copy to src/views/space/components/box/fireTrend.vue

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

copy from src/views/env/components/box/occurStatistics.vue
copy to src/views/space/components/box/occurStatistics.vue

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

copy from src/views/env/components/box/publicContent.vue
copy to src/views/space/components/box/publicContent.vue

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

copy from src/views/env/components/box/unitContent.vue
copy to src/views/space/components/box/unitContent.vue

 src/views/space/components/leftContainer.vue

copy from src/views/env/components/leftContainer.vue
copy to src/views/space/components/leftContainer.vue

 src/views/space/components/rightContainer.vue

copy from src/views/env/components/rightContainer.vue
copy to src/views/space/components/rightContainer.vue
File was copied from src/views/env/components/rightContainer.vue
@@ -2,8 +2,8 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-10 15:27:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-25 18:41:28
 * @FilePath: \bigScreen\src\views\statistics\components\rightContainer.vue
 * @LastEditTime: 2024-10-26 14:49:05
 * @FilePath: \bigScreen\src\views\survey\components\rightContainer.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
@@ -18,23 +18,29 @@
<template>
  <div class="right-container">
    <div class="fire-source box">
      <div class="title-box">
        火警事件来源
      </div>
      <title-box>
        <template #titleName>
          火警事件来源
        </template>
      </title-box>
      <fire-source></fire-source>
    </div>

    <div class="occur-statistics box">
      <div class="title-box">
        易发区统计
      </div>
      <title-box>
        <template #titleName>
          易发区统计
        </template>
      </title-box>
      <fire-trend></fire-trend>
    </div>

    <div class="fire-trend box">
      <div class="title-box">
        火警上报趋势
      </div>
      <title-box>
        <template #titleName>
          火警上报趋势
        </template>
      </title-box>
      <occur-statistics></occur-statistics>
    </div>
  </div>

 src/views/space/index.vue

copy from src/views/env/index.vue
copy to src/views/space/index.vue

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

copy from src/views/env/components/box/dataContent.vue
copy to src/views/supplies/components/box/dataContent.vue

 src/views/supplies/components/box/fireContent.vue

copy from src/views/env/components/box/fireContent.vue
copy to src/views/supplies/components/box/fireContent.vue

 src/views/supplies/components/box/fireSource.vue

copy from src/views/env/components/box/fireSource.vue
copy to src/views/supplies/components/box/fireSource.vue

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

copy from src/views/env/components/box/fireTrend.vue
copy to src/views/supplies/components/box/fireTrend.vue

 src/views/supplies/components/box/occurStatistics.vue

copy from src/views/env/components/box/occurStatistics.vue
copy to src/views/supplies/components/box/occurStatistics.vue

 src/views/supplies/components/box/publicContent.vue

copy from src/views/env/components/box/publicContent.vue
copy to src/views/supplies/components/box/publicContent.vue

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

copy from src/views/env/components/box/unitContent.vue
copy to src/views/supplies/components/box/unitContent.vue

 src/views/supplies/components/leftContainer.vue

copy from src/views/env/components/leftContainer.vue
copy to src/views/supplies/components/leftContainer.vue

 src/views/supplies/components/rightContainer.vue

copy from src/views/env/components/rightContainer.vue
copy to src/views/supplies/components/rightContainer.vue
File was copied from src/views/env/components/rightContainer.vue
@@ -2,8 +2,8 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-10 15:27:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-25 18:41:28
 * @FilePath: \bigScreen\src\views\statistics\components\rightContainer.vue
 * @LastEditTime: 2024-10-26 14:49:05
 * @FilePath: \bigScreen\src\views\survey\components\rightContainer.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
@@ -18,23 +18,29 @@
<template>
  <div class="right-container">
    <div class="fire-source box">
      <div class="title-box">
        火警事件来源
      </div>
      <title-box>
        <template #titleName>
          火警事件来源
        </template>
      </title-box>
      <fire-source></fire-source>
    </div>

    <div class="occur-statistics box">
      <div class="title-box">
        易发区统计
      </div>
      <title-box>
        <template #titleName>
          易发区统计
        </template>
      </title-box>
      <fire-trend></fire-trend>
    </div>

    <div class="fire-trend box">
      <div class="title-box">
        火警上报趋势
      </div>
      <title-box>
        <template #titleName>
          火警上报趋势
        </template>
      </title-box>
      <occur-statistics></occur-statistics>
    </div>
  </div>

 src/views/supplies/index.vue

copy from src/views/env/index.vue
copy to src/views/supplies/index.vue

 vite.config.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-25 10:56:27
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-28 11:51:46
 * @LastEditTime: 2024-10-29 21:44:48
 * @FilePath: \bigScreen\vite.config.js
 * @Description: 
 * 
@@ -14,6 +14,7 @@
import DC from "@dvgis/vite-plugin-dc"

import AutoImport from 'unplugin-auto-import/vite'
import basicSsl from '@vitejs/plugin-basic-ssl'

export default ({ mode, command }) => {
  const env = loadEnv(mode, process.cwd())
@@ -48,6 +49,7 @@
    plugins: [
      vue(),
      DC(),
      basicSsl(),
      AutoImport({
        imports: ["vue", "vue-router"], // 自动导入vue和vue-router相关函数
      })
@@ -76,6 +78,8 @@

    server: {
      port: 668,
      https: true,
      host: '0.0.0.0',
      proxy: {
        '/api': {
          // target: 'http://localhost',