完善系统样式,应急抢险模块

main
许宏杰 3 weeks ago
parent 522fd3ba5f
commit 138d256ad0

@ -1,8 +1,8 @@
# 页面标题
VITE_APP_TITLE = 若依管理系统
VITE_APP_TITLE = 徐汇园林
# 开发环境配置
VITE_APP_ENV = 'development'
# 若依管理系统/开发环境
# 徐汇园林/开发环境
VITE_APP_BASE_API = '/dev-api'

@ -1,10 +1,10 @@
# 页面标题
VITE_APP_TITLE = 若依管理系统
VITE_APP_TITLE = 徐汇园林
# 生产环境配置
VITE_APP_ENV = 'production'
# 若依管理系统/生产环境
# 徐汇园林/生产环境
VITE_APP_BASE_API = '/prod-api'
# 是否在打包时开启压缩,支持 gzip 和 brotli

@ -1,10 +1,10 @@
# 页面标题
VITE_APP_TITLE = 若依管理系统
VITE_APP_TITLE = 徐汇园林
# 生产环境配置
VITE_APP_ENV = 'staging'
# 若依管理系统/生产环境
# 徐汇园林/生产环境
VITE_APP_BASE_API = '/stage-api'
# 是否在打包时开启压缩,支持 gzip 和 brotli

@ -9,7 +9,7 @@
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<link rel="icon" href="/favicon.ico" />
<title>若依管理系统</title>
<title>徐汇园林</title>
<link
href="/lib/Cesium/Widgets/widgets.css"
rel="stylesheet"

@ -1,7 +1,7 @@
{
"name": "ruoyi",
"version": "3.8.9",
"description": "若依管理系统",
"description": "徐汇园林",
"author": "若依",
"license": "MIT",
"type": "module",

@ -0,0 +1,382 @@
{
"type": "FeatureCollection",
"name": "22222",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [
{
"type": "Feature",
"properties": {
"adcode": 310104,
"name": "徐汇区",
"center": [
121.43752,
31.179973
],
"centroid": [
121.439405,
31.162992
],
"childrenNum": 0,
"level": "district",
"acroutes": [
100000,
310000
],
"id": 1,
"_errors": "自相交",
"layer": "已修正几何图形",
"path": "MultiPolygon?crs=EPSG:4326&field=id:long(10,0)&field=_errors:string(255,0)&uid={86b3cc2c-b3f2-4bbf-ba31-54d52035a13a}"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
121.437002,
31.203328
],
[
121.437927,
31.203972
],
[
121.437775,
31.204304
],
[
121.437329,
31.205655
],
[
121.436146,
31.208366
],
[
121.435864,
31.208831
],
[
121.435697,
31.209689
],
[
121.435489,
31.210302
],
[
121.435236,
31.210786
],
[
121.435229,
31.211145
],
[
121.436409,
31.21117
],
[
121.437454,
31.21153
],
[
121.437835,
31.211785
],
[
121.438737,
31.212628
],
[
121.439148,
31.213157
],
[
121.439463,
31.214483
],
[
121.439898,
31.214556
],
[
121.444506,
31.215506
],
[
121.446559,
31.215743
],
[
121.447999,
31.216023
],
[
121.449544,
31.216474
],
[
121.451526,
31.217181
],
[
121.452316,
31.217496
],
[
121.454984,
31.219196
],
[
121.455922,
31.219758
],
[
121.457686,
31.220193
],
[
121.457819,
31.220004
],
[
121.458326,
31.218504
],
[
121.458302,
31.218387
],
[
121.459216,
31.216558
],
[
121.459424,
31.215919
],
[
121.460701,
31.213484
],
[
121.461248,
31.211642
],
[
121.461549,
31.210193
],
[
121.461883,
31.207558
],
[
121.462061,
31.206661
],
[
121.46201372121179,
31.20652605845865
],
[
121.462008132954537,
31.206524135227259
],
[
121.460235342187502,
31.205822316122141
],
[
121.460698929119317,
31.20396367592328
],
[
121.460767608664781,
31.203646033025549
],
[
121.460870627982956,
31.203019332173277
],
[
121.46093930752842,
31.202663057031234
],
[
121.460025011079495,
31.20245272592328
],
[
121.459419772585179,
31.202285319531235
],
[
121.45881882656245,
31.202079280894871
],
[
121.457771463494282,
31.201783100355097
],
[
121.457316461505656,
31.201667203622144
],
[
121.456865751988602,
31.201559891832371
],
[
121.456423627414736,
31.201405362855098
],
[
121.455801219034058,
31.201164984446006
],
[
121.453654983238579,
31.200473896519874
],
[
121.45342748224428,
31.200422386860787
],
[
121.452966041548251,
31.200242103053967
],
[
121.452472407315298,
31.200076842897719
],
[
121.449587866406191,
31.199025187357936
],
[
121.449051307457324,
31.198799832599413
],
[
121.448579135582321,
31.198602378906234
],
[
121.447969604616418,
31.198336245667598
],
[
121.445975751562443,
31.197469166406233
],
[
121.44434246612208,
31.196722276349419
],
[
121.443900341548215,
31.196460435582374
],
[
121.442630843075165,
31.195697448757087
],
[
121.44161138107232,
31.195086844673284
],
[
121.441458998330845,
31.195295029545441
],
[
121.440817273828003,
31.195799394957373
],
[
121.4402549600496,
31.196232934588057
],
[
121.43986541825268,
31.196624622620728
],
[
121.439491973224264,
31.197010945063909
],
[
121.439043409942997,
31.19744663093039
],
[
121.438588407954356,
31.197955288813912
],
[
121.438447829509713,
31.198155961860785
],
[
121.438228913458573,
31.198672131569591
],
[
121.436957268749765,
31.198339465021295
],
[
121.436772692471337,
31.198888901384933
],
[
121.436742645170199,
31.199032699183228
],
[
121.436562361363386,
31.199779589240048
],
[
121.436347737783834,
31.200672423330957
],
[
121.436231841050869,
31.201097378018456
],
[
121.43609233572414,
31.201387119850839
],
[
121.435862688494026,
31.201739102521294
],
[
121.435369054261074,
31.202267076526976
],
[
121.435324767953475,
31.202319990037346
],
[
121.437002,
31.203328
]
]
]
]
}
}
]
}

File diff suppressed because one or more lines are too long

@ -0,0 +1,11 @@
import request from '@/utils/request'
// 查询参数列表
export function getyjList(query) {
return request({
url: '/bYjgd/page',
method: 'get',
params: query
})
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

@ -98,8 +98,7 @@
.el-input__wrapper,.el-select__wrapper{
background: #F1F3F4;
// border-radius: 10px;
background: #E5EAF3;
input{
font-size: 16px;
font-weight: 400;
@ -109,3 +108,9 @@
}
}
.search-form{
display: grid;
grid-template-columns: repeat(4, 1fr); /* 创建4列每列宽度相等 */
}

@ -125,7 +125,9 @@ aside {
//main-container
.app-container {
padding: 20px;
height: 100%;
padding:16px;
background-color: #F5F8FD;
}
.components-container {

@ -1,7 +1,8 @@
#app {
.main-container {
min-height: 100%;
// min-height: 100%;
height: 100%;
transition: margin-left .28s;
margin-left: $base-sidebar-width;
position: relative;
@ -72,6 +73,8 @@
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: 18px;
font-family: 'MiSans-Medium';
}
.el-menu-item .el-menu-tooltip__trigger {

@ -23,8 +23,8 @@ $menuLightText: #303133;
$menuLightActiveText: #409EFF;
//
$base-sidebar-width: 200px;
$sideBarWidth: 200px;
$base-sidebar-width: 230px;
$sideBarWidth: 230px;
//
$base-menu-color: #bfcbd9;

@ -86,10 +86,10 @@ getBreadcrumb()
<style lang='scss' scoped>
.app-breadcrumb.el-breadcrumb {
display: inline-block;
font-size: 14px;
font-size: 16px;
line-height: 50px;
margin-left: 8px;
font-family: 'MiSans-Medium';
.no-redirect {
color: #fff;
cursor: text;

@ -47,7 +47,7 @@ const initMars3d = async () => {
} else if (props.options) {
mapOptions = toRaw(props.options);
}
console.log("Map地图构造参数", mapOptions);
// console.log("Map", mapOptions);
map = new mars3d.Map(withKeyId.value, mapOptions);

@ -0,0 +1,63 @@
<template>
<div class="table-operation">
<div class="table-operation-box">
<div class="operation-header">
<el-button type="primary" v-if="showSub" @click="clickSub()"
> </el-button
>
<el-button @click="handlerBack()"> </el-button>
</div>
<div class="operation-panel">
<slot></slot>
</div>
</div>
</div>
</template>
<script setup>
const router = useRouter();
const emits = defineEmits(["handlerSub"]);
const props = defineProps({
showSub: {
type: Boolean,
default: true,
},
});
const handlerBack = () => {
router.back();
};
const clickSub = () => {
emits("handlerSub");
};
</script>
<style lang="scss" scoped>
.table-operation {
padding: 20px 16px;
height: 100%;
background-color: #f5f8fd;
.table-operation-box {
height: 100%;
background-color: #fff;
box-shadow: 0px 4px 4px 0px rgba(168, 196, 237, 0.25);
}
.operation-header {
padding: 0 10px;
display: flex;
align-items: center;
flex-direction: row-reverse;
gap: 10px;
height: 50px;
border-bottom: 1px solid #e5eaf3;
}
.operation-panel {
height: calc(100% - 50px);
overflow-y: auto;
}
}
</style>

@ -0,0 +1,83 @@
<template>
<div class="app-container">
<div class="filtrate-row">
<slot name="search"></slot>
</div>
<div class="table-list">
<div class="table-operation">
<el-button
type="primary"
plain
v-show="options.add"
icon="Plus"
@click="clickAdd()"
>录入</el-button
>
<el-button
type="primary"
plain
v-show="options.export"
icon="Download"
@click="clickExport()"
>导出</el-button
>
</div>
<div class="table-el">
<slot name="table"></slot>
</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
options: {
type: Object,
default: {
add: true, //
export: true, //
},
},
});
const emits = defineEmits(["handlerAdd", "handlerExport"]);
const clickAdd = () => {
emits("handlerAdd");
};
const clickExport = () => {
emits("handlerExport");
};
</script>
<style lang="scss" scoped>
.app-container {
display: flex;
flex-direction: column;
gap: 18px;
& > div {
box-sizing: border-box;
padding: 20px 16px;
background-color: #fff;
box-shadow: 0px 4px 4px 0px rgba(168, 196, 237, 0.25);
}
}
.filtrate-row {
height: 134px;
}
.table-operation {
display: flex;
flex-direction: row-reverse;
gap: 10px;
}
.table-list {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
gap: 25px;
.table-el {
flex: 1;
overflow: hidden;
}
}
</style>

@ -36,14 +36,16 @@ function addIframe() {
<style lang="scss" scoped>
.app-main {
/* 50= navbar 50 */
min-height: calc(100vh - 50px);
// min-height: calc(100vh - 50px);
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
box-sizing: border-box;
}
.fixed-header + .app-main {
padding-top: 50px;
padding-top: 70px;
}
.hasTagsView {

@ -1,16 +1,15 @@
<template>
<div class="navbar">
<section>
<hamburger
id="hamburger-container"
:is-active="appStore.sidebar.opened"
class="hamburger-container"
@toggleClick="toggleSideBar"
/>
<breadcrumb
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
</section>
id="breadcrumb-container"
class="breadcrumb-container"
/>
<top-nav
v-if="settingsStore.topNav"
id="topmenu-container"
@ -111,9 +110,9 @@ function handleCommand(command) {
}
}
const backPortal =()=>{
router.replace('/index')
}
const backPortal = () => {
router.replace("/index");
};
function logout() {
ElMessageBox.confirm("确定注销并退出系统吗?", "提示", {
@ -141,14 +140,20 @@ function toggleTheme() {
<style lang="scss" scoped>
.navbar {
height: 50px;
width: 100%;
height: 70px;
overflow: hidden;
position: relative;
// background: var(--navbar-bg);
background: linear-gradient(90deg, #537cf7 0%, #566cff 100%);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
display: flex;
align-items: center;
justify-content: space-between;
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
@ -187,8 +192,6 @@ function toggleTheme() {
.right-menu-item {
display: inline-block;
padding: 0 8px;
height: 100%;
font-size: 18px;
color: var(--navbar-text);
vertical-align: text-bottom;
@ -217,7 +220,9 @@ function toggleTheme() {
}
.avatar-container {
margin-right: 40px;
display: flex;
align-items: center;
margin-right: 25px;
.avatar-wrapper {
margin-top: 5px;
@ -239,7 +244,7 @@ function toggleTheme() {
}
.Logout {
margin-left: 5px;
padding: 7px 10px ;
padding: 7px 10px;
cursor: pointer;
background: rgba(255, 255, 255, 0.25);
border-radius: 20px;

@ -7,7 +7,8 @@
class="sidebar-logo-link"
to="/"
>
<img v-if="logo" :src="logo" class="sidebar-logo" />
<!-- <img v-if="logo" :src="logo" class="sidebar-logo" /> -->
<svg-icon v-if="logo" icon-class="park-logo" class="sidebar-logo" />
<h1 v-else class="sidebar-title">{{ title }}</h1>
</router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
@ -72,22 +73,27 @@ const getLogoName = computed(() => {
.sidebar-logo-container {
position: relative;
width: 100%;
height: 50px;
line-height: 50px;
height: 70px;
line-height: 70px;
// background: v-bind(getLogoBackground);
background: #537cf7;
text-align: center;
overflow: hidden;
& .sidebar-logo-link {
height: 100%;
width: 100%;
display: flex;
align-items: center;
& .sidebar-logo {
width: 32px;
height: 32px;
font-size: 32px;
text-align: center;
vertical-align: middle;
margin-right: 12px;
margin-right: 0 !important;
}
& .sidebar-title {

@ -78,7 +78,7 @@ const activeMenu = computed(() => {
});
const extractPrefix = (str) => {
const pattern = /(.+?)(-info|-add|-edit)/;
const pattern = /(.+?)(-info|-add|-edit|-operation)/;
const match = str.match(pattern);
if (match) {
return match[1];

@ -96,7 +96,9 @@ function setLayout() {
top: 0;
right: 0;
z-index: 9;
width: calc(100% - #{$base-sidebar-width});
transition: width 0.28s;
}

@ -27,7 +27,7 @@ import './permission' // permission control
import { useDict } from '@/utils/dict'
import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi'
import{setActiveMenu } from "@/utils/common.js"
import{setActiveMenu,getTableHeaderStyle } from "@/utils/common.js"
// 分页组件
import Pagination from '@/components/Pagination'
@ -43,6 +43,10 @@ import ImageUpload from "@/components/ImageUpload"
import ImagePreview from "@/components/ImagePreview"
// 字典标签组件
import DictTag from '@/components/DictTag'
// 统一表格页
import tablePage from '@/components/tablePage'
// 统一操作页
import tableOperation from '@/components/tableOperation'
const app = createApp(App)
@ -56,6 +60,8 @@ app.config.globalProperties.addDateRange = addDateRange
app.config.globalProperties.selectDictLabel = selectDictLabel
app.config.globalProperties.selectDictLabels = selectDictLabels
app.config.globalProperties.setActiveMenu = setActiveMenu
app.config.globalProperties.getTableHeaderStyle = getTableHeaderStyle
// 全局组件挂载
app.component('DictTag', DictTag)
@ -65,6 +71,8 @@ app.component('ImageUpload', ImageUpload)
app.component('ImagePreview', ImagePreview)
app.component('RightToolbar', RightToolbar)
app.component('Editor', Editor)
app.component('tablePage', tablePage)
app.component('tableOperation', tableOperation)
app.use(router)
app.use(store)

@ -9,3 +9,17 @@ export function setActiveMenu(path) {
const currentPath = path ? path : router.currentRoute.value.path;
cache.local.set("activeMenu", currentPath);
}
/**
* 设置表格头部样式
* @returns
*/
export function getTableHeaderStyle() {
return {
backgroundColor: "#D3E3FF !important",
height: "42px !important",
color: "#474A59",
fontSize: "16px",
fontFamily: 'MiSans-Medium',
};
}

@ -0,0 +1,12 @@
<template>
<tableOperation @handlerSub="handlerSub"></tableOperation>
</template>
<script setup>
/**
* 提交
*/
const handlerSub = () => {};
</script>
<style scoped></style>

@ -1,19 +1,186 @@
<template>
<div>
<el-button type="primary" @click="handlerInfo()"></el-button>
</div>
<tablePage @handlerAdd="handlerAdd()" @handlerExport="handlerExport()">
<template #search >
<el-form
:model="queryParams"
ref="queryRef"
:inline="true"
label-width="68px"
class="search-form"
>
<el-form-item label="工单地址" prop="gdms">
<el-input
v-model="queryParams.gdms"
placeholder="请输入"
clearable
/>
</el-form-item>
<el-form-item label="工单类型" prop="gdType">
<el-input
v-model="queryParams.gdType"
placeholder="请输入"
clearable
/>
</el-form-item>
<el-form-item label="工单等级" prop="gdLevel">
<el-input
v-model="queryParams.gdLevel"
placeholder="请输入"
clearable
/>
</el-form-item>
<el-form-item label="工单状态" prop="status">
<el-input
v-model="queryParams.status"
placeholder="请输入"
clearable
/>
</el-form-item>
<el-form-item label="录入时间" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入"
clearable
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button icon="Refresh" @click="resetQuery"></el-button>
</el-form-item>
</el-form>
</template>
<template #table>
<el-table
v-loading="loading"
:data="list"
height="100%"
:header-cell-style="proxy.getTableHeaderStyle"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column
label="用户编号"
align="center"
key="userId"
prop="userId"
/>
<el-table-column
label="响应标题"
align="center"
key="userId"
prop="userId"
/>
<el-table-column
label="响应等级"
align="center"
key="userId"
prop="userId"
/>
<el-table-column
label="响应部门"
align="center"
key="userId"
prop="userId"
/>
<el-table-column
label="响应时间"
align="center"
key="userId"
prop="userId"
/>
<el-table-column
label="响应状态"
align="center"
key="userId"
prop="userId"
/>
<el-table-column
label="操作"
align="center"
width="150"
class-name="small-padding fixed-width"
>
</el-table-column>
</el-table>
</template>
</tablePage>
</template>
<script setup>
const { proxy } = getCurrentInstance()
const router = useRouter();
import { getyjList } from "@/api/emergency-rescue";
import { onMounted } from "vue";
const { proxy } = getCurrentInstance();
// const { gdlx, gdlevel } = proxy.useDict("gdlx", "gdlevel")
const loading = ref(false);
const list = ref([]);
const total = ref(0);
const router = useRouter();
const data = reactive({
form: {},
queryParams: {
gdms:undefined,
gdType:undefined,
gdLevel:undefined,
status:undefined,
current: 1,
size: 10,
},
rules: {},
});
const { queryParams, form, rules } = toRefs(data);
onMounted(() => {
getList();
});
/**
* 获取列表数据
*/
const getList = async () => {
loading.value = true;
const res = await getyjList(queryParams.value);
console.log(res)
loading.value = false;
list.value = res.data.records;
total.value = res.data.total;
};
/**
* 搜索
*/
const handleQuery = () => {
queryParams.value.pageNum = 1;
};
const handlerInfo =()=>{
proxy.setActiveMenu()
router.push({path:'/emergency-rescue/workInfo-info'})
/**
* 重置查询条件
*/
const resetQuery = () => {
proxy.resetForm("queryRef");
handleQuery();
};
/**
* 新增
*/
const handlerAdd =()=>{
proxy.setActiveMenu();
router.push({ path: "/emergency-rescue/workOrder-operation" });
}
</script>
/**
* 导出
*/
const handlerExport=()=>{
<style scoped>
}
const handlerInfo = () => {
proxy.setActiveMenu();
router.push({ path: "/emergency-rescue/workInfo-info" });
};
</script>
</style>
<style lang="scss" scoped></style>

@ -21,18 +21,14 @@
<span>{{ item.meta.title }}</span>
</a>
</router-link>
<!-- <div
class="menu-item"
:class="currentIndex === index ? 'activeMenu' : ''"
v-for="(item, index) in formatRouter"
:key="index"
@click="handlerSelect(index, item.meta)"
>
<span>{{ item.meta.title }}</span>
</div> -->
</div>
<div class="navigation-time">{{ formattedDate }}</div>
<div class="navigation-time">
<span> {{ formattedDate }}</span>
<div class="Logout" @click="backPortal()">
返回门户
<svg-icon icon-class="back-icon" style="font-size: 18px" />
</div>
</div>
</div>
</template>
@ -42,48 +38,35 @@ import { useRouter } from "vue-router";
import moment from "moment";
import "moment/locale/zh-cn"; //
moment.locale("zh-cn", {
weekdays: "星期一_星期二_星期三_星期四_星期五_星期六_星期日".split("_"),
weekdays: "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
}); //
const router = useRouter();
const { proxy } = getCurrentInstance();
const title = "徐汇区智慧园林数据可视化驾驶舱";
let currentIndex = ref(4);
/**
* 获取当前时间
*/
const formattedDate = computed(() => {
return moment("2019-05-14").format("YYYY-MM-DD dddd");
return moment().format("YYYY-MM-DD dddd");
});
/**
* 获取大屏路由信息
*/
const formatRouter = computed(() => {
const menuList = router.options.routes.find(
const menuData = router.options.routes.find(
(item) => item.path === "/visualization"
);
console.log(menuList);
if (menuList) {
return menuList.children;
}
if (menuData) return menuData.children;
return [];
});
/**
* 菜单选中
* @param index
* 返回门户
*/
const handlerSelect = (index, item) => {
if (item.disable) {
proxy.$modal.msgWarning("功能开发中,敬请期待");
return;
}
if (currentIndex.value !== index) {
currentIndex.value = index;
}
const backPortal = () => {
router.replace("/index");
};
</script>
@ -131,10 +114,7 @@ const handlerSelect = (index, item) => {
height: 100%;
display: flex;
align-items: flex-end;
margin: 0 10px;
gap: 10px;
.menu-item {
cursor: pointer;
font-size: 16px;
@ -145,28 +125,39 @@ const handlerSelect = (index, item) => {
display: flex;
align-items: center;
gap: 6px;
background-image: url('@/assets/images/visualization/dp-menu.png');
background-image: url("@/assets/images/visualization/dp-menu.png");
background-size: 100% 100%;
padding: 12px 40px;
}
.activeMenu {
color: #ffffff;
background-image: url('@/assets/images/visualization/dp-menu-s.png');
background-image: url("@/assets/images/visualization/dp-menu-s.png");
background-size: 100% 100%;
}
}
.navigation-time {
height: 100%;
font-size: 14px;
font-size: 16px;
color: #ffffff;
font-weight: bold;
letter-spacing: 1px;
font-family: "Alimama ShuHeiTi-Bold";
display: flex;
align-items: flex-end;
flex-direction: column;
justify-content: flex-end;
gap: 10px;
padding-bottom: 12px;
padding-right: 35px;
}
.Logout {
padding: 8px 0px;
cursor: pointer;
background: rgba(255, 255, 255, 0.25);
border-radius: 20px;
font-size: 16px;
color: #ffffff;
font-weight: 400;
text-align: center;
}
</style>

@ -1,9 +1,9 @@
<template>
<div class="marsMap-container">
<div class="emergency-container">
<MarsMap
:url="configUrl"
:options="mapOptions"
map-key="test"
map-key="emergency"
@onload="marsOnload"
/>
</div>
@ -12,12 +12,109 @@
<script setup>
import MarsMap from "@/components/mars-work/mars-map.vue";
import mapOptions from "../mapOptions";
import { onUnmounted } from "vue";
import wallImg from "@/assets/images/visualization/fence-top.png";
//
const configUrl = "lib/config/config.json";
const marsOnload = (map) => {};
let mapData = null;
let mapLayer = {};
//
const initAreaCover = async () => {
const jsonData = await mars3d.Util.fetchJson({
url: "/lib/geoJson/xuhuiArea.json",
});
const arr = mars3d.Util.geoJsonToGraphics(jsonData); // geojson
arr.forEach((item) => {
inintEntity(item, "#8EF4FF");
});
};
const inintEntity = (data, lineColor, height, outline = true,) => {
const polylineGraphic = new mars3d.graphic.PolygonEntity({
positions: data.positions,
style: {
fill:false,
outline: outline, //
outlineWidth: 3,
outlineColor: lineColor,
height:height
},
});
mapLayer.arealayer.addGraphic(polylineGraphic);
};
/**
*
* @param positions
*/
const inintEntityWall = (positions) => {
const wall = new mars3d.graphic.WallPrimitive({
positions: positions,
style: {
setHeight: -2500,
diffHeight: 2500, //
width: 100,
materialType: mars3d.MaterialType.Image2,
materialOptions: {
image: wallImg,
color: "#144C8F",
},
},
});
mapLayer.arealayer.addGraphic(wall);
};
/**
* 风貌区
*/
const initStyleFeatures = async () => {
const jsonData = await mars3d.Util.fetchJson({
url: "/lib/geoJson/park-rectangle.json",
});
const arr = mars3d.Util.geoJsonToGraphics(jsonData); // geojson
inintEntity(arr[0],"#395EB0",10,false);
};
/**
* 地图构建完成
* @param map
*/
const marsOnload = (map) => {
mapData = map;
createMapLayer();
initAreaCover();
initStyleFeatures();
};
/**
* 创建地图矢量图层
*/
const createMapLayer = () => {
mapLayer.arealayer = new mars3d.layer.GraphicLayer();
mapLayer.styleFeatures = new mars3d.layer.GraphicLayer();
mapData.addLayer(mapLayer.arealayer);
mapData.addLayer(mapLayer.styleFeatures);
};
/**
* 销毁一些数据防止影响性能
*/
onUnmounted(() => {
if (mapData) {
mapData.destroy();
mapData = null;
}
mapLayer.arealayer?.clear();
mapLayer.styleFeatures?.clear();
mapLayer = null;
});
</script>
<style scoped>
.marsMap-container {
.emergency-container {
height: 100%;
}
</style>

@ -2,29 +2,31 @@ export default {
method: {
chinaCRS: mars3d.ChinaCRS.GCJ02, // 标识坐标系
},
scene:{
showSun:false,//太阳
showMoon:false,//月亮
showSkyAtmosphere:false,//大气层外光圈
fog:false,//雾化
fxaa:false,//快速抗锯齿
scene: {
center: {"lat":31.167163,"lng":121.430428,"alt":36454.4,"heading":357.1,"pitch":-89.8},
// sceneMode:2,
showSun: false, //太阳
showMoon: false, //月亮
showSkyAtmosphere: false, //大气层外光圈
fog: false, //雾化
fxaa: false, //快速抗锯齿
scene3DOnly: true,
requestRenderMode: true,
},
terrain:{
show:false,//地形
terrain: {
show: false, //地形
},
control:{
toolbar:false,
homeButton:false,
zoom:false,
distanceLegend:false,
sceneModePicker:false,
locationBar:false,
control: {
toolbar: false,
homeButton: false,
zoom: false,
distanceLegend: false,
sceneModePicker: false,
locationBar: false,
// contextmenu: { preventDefault: false, hasDefault: false },
},
mouse:{
enabledMoveTarget:false
mouse: {
enabledMoveTarget: false,
},
basemaps: [
{
@ -42,7 +44,7 @@ export default {
gamma: 0.3,
hue: 1,
saturation: 0,
show:true
show: true,
},
],
};

Loading…
Cancel
Save