Merge branch 'dev' of http://222.212.85.86:8222/bdzl2/bxztApp into dev
This commit is contained in:
commit
07948f788c
@ -376,6 +376,10 @@ const getDetailData = async (row) => {
|
||||
|
||||
// 打开新增设备弹窗
|
||||
const openAddEquipmentModel = () => {
|
||||
if (!selectedYHZData.value) {
|
||||
ElMessage.error('请先选择养护站');
|
||||
return;
|
||||
}
|
||||
model.title = `新增设备`;
|
||||
model.content = AddDialog;
|
||||
const extraData = {
|
||||
|
||||
@ -50,7 +50,6 @@
|
||||
<div class="form-box">
|
||||
<div class="event-box">
|
||||
<el-button
|
||||
v-if="selectedYHZData"
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="script.openAddEquipmentModel"
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
detailData.material?.wzmc
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="余量: ">{{
|
||||
detailData.material?.ye + ' ' + detailData.material?.dw
|
||||
detailData.material?.ye + " " + detailData.material?.dw
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属服务站: ">{{
|
||||
detailData.material?.yhzMc
|
||||
@ -20,6 +20,7 @@
|
||||
</el-col>
|
||||
<el-col :span="12" style="position: relative">
|
||||
<el-image
|
||||
v-if="detailData.photos?.length > 0"
|
||||
style="
|
||||
max-width: 180px;
|
||||
max-height: 180px;
|
||||
@ -34,6 +35,9 @@
|
||||
show-progresss
|
||||
fit="cover"
|
||||
/>
|
||||
<div v-else class="no-photo">
|
||||
<span>暂无图片</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
@ -81,4 +85,15 @@ const props = defineProps({
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
.no-photo {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: 14px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
@ -376,6 +376,10 @@ const getDetailData = async (row) => {
|
||||
|
||||
// 打开新增物资弹窗
|
||||
const openAddModel = () => {
|
||||
if(!yhzid.value){
|
||||
ElMessage.error('请先选择养护站');
|
||||
return;
|
||||
}
|
||||
model.title = `新增物资`;
|
||||
model.content = AddDialog;
|
||||
resetForm(); // 重置表单
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
</div>
|
||||
<div class="form-box">
|
||||
<div class="event-box">
|
||||
<el-button v-if="script.yhzid.value" type="primary" size="large" @click="script.openAddModel"
|
||||
<el-button type="primary" size="large" @click="script.openAddModel"
|
||||
>新增物资</el-button
|
||||
>
|
||||
<el-button type="info" size="large" @click="script.handelExport"
|
||||
|
||||
@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="area-title-block">
|
||||
所属服务站: <span class="title-text">{{ stationName }}</span>
|
||||
</div>
|
||||
<el-form :model="form" class="equipment-form">
|
||||
<!-- 第一行：设备名称、设备大类、设备类型 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="设备名称" prop="sbmc">
|
||||
<el-input v-model="form.sbmc" maxlength="20" placeholder="请输入设备名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="设备大类" prop="sbdl">
|
||||
<InputSelect v-model="form.sbdl" placeholder="请选择" :options="options['sbdl']" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="设备类型" prop="sblx">
|
||||
<InputSelect v-model="form.sblx" placeholder="请选择" :options="options['sblx']" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第二行：设备型号、设备经度（只读）、设备纬度（只读） -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="设备型号" prop="sbxh">
|
||||
<el-input v-model="form.sbxh" placeholder="请输入设备型号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="设备经度" prop="jd">
|
||||
<el-input v-model="form.jd" placeholder="自动填充服务站经纬度" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="设备纬度" prop="wd">
|
||||
<el-input v-model="form.wd" placeholder="自动填充服务站经纬度" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第三行：购置日期、购买费用（万元）、应急设备 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="购置日期" prop="gzrq">
|
||||
<el-date-picker v-model="form.gzrq" type="date" placeholder="请选择购置日期" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="购买费用（万元）" prop="gmfy">
|
||||
<el-input-number v-model="form.gmfy" :min="0" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="应急设备" prop="sfyjsb">
|
||||
<el-select v-model="form.sfyjsb" placeholder="请选择">
|
||||
<el-option label="是" value="是" />
|
||||
<el-option label="否" value="否" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第四行：辐射范围、生产商、纳入市级补助范围 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="辐射范围" prop="fsfw">
|
||||
<el-input v-model="form.fsfw" placeholder="请输入辐射范围" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="生产商" prop="sccj">
|
||||
<el-input v-model="form.sccj" placeholder="请输入生产商" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="纳入市级补助范围" prop="sfnrsjbz">
|
||||
<el-select v-model="form.sfnrsjbz" placeholder="请选择">
|
||||
<el-option label="是" value="是" />
|
||||
<el-option label="否" value="否" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import InputSelect from "@/component/InputSelect/InputSelect.vue";
|
||||
|
||||
const props = defineProps({
|
||||
form: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
// 养护站数据
|
||||
basicData: {
|
||||
type: [Object, null],
|
||||
default: null,
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const options = ref({
|
||||
'sbdl': [
|
||||
{ label: "示例大类1", value: "示例大类1" },
|
||||
{ label: "示例大类2", value: "示例大类2" },
|
||||
],
|
||||
"sblx": [
|
||||
{ label: "示例类型1", value: "示例类型1" },
|
||||
{ label: "示例类型2", value: "示例类型2" },
|
||||
]
|
||||
})
|
||||
|
||||
const stationName = computed(() => {
|
||||
return props.basicData ? props.basicData.mc : ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.area-title-block {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.title-text {
|
||||
color: rgb(10, 124, 255);
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.equipment-form) {
|
||||
.el-form-item {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="detail-container">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
label-position="right"
|
||||
label-width="150px"
|
||||
style="max-height: 60vh; overflow-y: auto; padding-right: 50px"
|
||||
>
|
||||
<el-form-item label="所属服务站：">
|
||||
<span>{{ basicData.mc }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="物资名称：">
|
||||
<el-input
|
||||
maxlength="20"
|
||||
show-word-limit
|
||||
v-model="form.material.wzmc"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数量与单位：">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16">
|
||||
<el-input
|
||||
v-model="form.material.sl"
|
||||
type="number"
|
||||
placeholder="请输入数量"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-select
|
||||
v-model="form.material.dw"
|
||||
filterable
|
||||
allow-create
|
||||
clearable
|
||||
placeholder="选择单位"
|
||||
>
|
||||
<el-option label="个" value="个"></el-option>
|
||||
<el-option label="包" value="包"></el-option>
|
||||
<el-option label="盒" value="盒"></el-option>
|
||||
<el-option label="桶" value="桶"></el-option>
|
||||
<el-option label="箱" value="箱"></el-option>
|
||||
<el-option label="袋" value="袋"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备经度：">
|
||||
<span>{{ form.material.jd }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备纬度：">
|
||||
<span>{{ form.material.wd }}</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const formRef = ref(null);
|
||||
defineExpose({ formRef });
|
||||
|
||||
const props = defineProps({
|
||||
form: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
basicData:{
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -6,7 +6,7 @@
|
||||
label-width="150px"
|
||||
style="max-height: 60vh; overflow-y: auto; padding-right: 50px"
|
||||
>
|
||||
<el-form-item label="人员:">
|
||||
<el-form-item label="负责人:">
|
||||
<el-select
|
||||
v-model="ryxx"
|
||||
filterable
|
||||
@ -26,26 +26,23 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位:">
|
||||
<el-input v-model="form.gw" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="养护站:">
|
||||
<el-input disabled v-model="yhzdata.mc" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="人员角色:">
|
||||
<el-select v-model="form.ryjs" placeholder="请选择人员角色">
|
||||
<el-option label="负责人" value="1"></el-option>
|
||||
<el-option label="普通工作人员" value="2"></el-option>
|
||||
<el-form-item label="负责人添加经纬度:">
|
||||
<el-select v-model="form.sfjwd">
|
||||
<el-option label="是" value="是"></el-option>
|
||||
<el-option label="否" value="否"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="站点经纬度:">
|
||||
<el-input v-model="form.jwd" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { request } from "@/utils/request";
|
||||
const formRef = ref(null);
|
||||
defineExpose({ formRef });
|
||||
|
||||
@ -54,19 +51,37 @@ const props = defineProps({
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
getUserList: {
|
||||
type: Function,
|
||||
default: () => () => {},
|
||||
},
|
||||
yhzdata: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const ryxx = ref("");
|
||||
const loading = ref(false);
|
||||
const selectOptions = ref([]);
|
||||
|
||||
// 根据用户信息 查询角色列表
|
||||
const getUserList = async (key) => {
|
||||
try {
|
||||
const keyword = key;
|
||||
let url = "";
|
||||
if (keyword) {
|
||||
url = `/snow-ops-platform/yhzry/getUserByKey?key=${keyword}`;
|
||||
} else {
|
||||
url = `/snow-ops-platform/yhzry/getUserByKey?key=`;
|
||||
}
|
||||
const res = await request({
|
||||
url: url,
|
||||
method: "GET",
|
||||
});
|
||||
if (res.code === "00000") {
|
||||
return res.data;
|
||||
} else {
|
||||
throw new Error(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message);
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
// 选择人员筛选
|
||||
const remoteMethod = async (query) => {
|
||||
if (query === "") {
|
||||
@ -74,7 +89,7 @@ const remoteMethod = async (query) => {
|
||||
return [];
|
||||
}
|
||||
loading.value = true;
|
||||
const res = await props.getUserList(query);
|
||||
const res = await getUserList(query);
|
||||
if (res) {
|
||||
selectOptions.value = res;
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<div class="detail-container">
|
||||
<el-form
|
||||
label-position="right"
|
||||
label-width="150px"
|
||||
style="max-height: 60vh; overflow-y: auto; padding-right: 50px"
|
||||
>
|
||||
<el-form-item label="人员名称:">
|
||||
<el-input disabled v-model="detailData.xm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位:">
|
||||
<el-input disabled v-model="detailData.gw" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码:">
|
||||
<el-input disabled v-model="detailData.sjhm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="人员角色:">
|
||||
<el-input disabled :value="detailData.ryjs === 1 ? '管理员' : '普通用户'" />
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间:">
|
||||
<el-input disabled v-model="detailData.cjsj" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
detailData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<div class="detail-container">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
label-position="right"
|
||||
label-width="150px"
|
||||
style="max-height: 60vh; overflow-y: auto; padding-right: 50px"
|
||||
>
|
||||
<el-form-item label="人员名称:">
|
||||
<el-input disabled v-model="form.xm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位:">
|
||||
<el-input v-model="form.gw" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码:">
|
||||
<el-input disabled v-model="form.sjhm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="人员角色:" prop="ryjs">
|
||||
<el-select v-model="form.ryjs" placeholder="请选择角色">
|
||||
<el-option label="负责人" :value="1" />
|
||||
<el-option label="普通工作人员" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间:">
|
||||
<el-input disabled v-model="form.cjsj" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const formRef = ref(null);
|
||||
defineExpose({ formRef });
|
||||
|
||||
const props = defineProps({
|
||||
form: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -2,34 +2,84 @@
|
||||
<div class="detail-container">
|
||||
<el-card shadow="hover">
|
||||
<el-descriptions title="基础信息" :column="3">
|
||||
<el-descriptions-item label="服务站名称">{{
|
||||
<el-descriptions-item label="服务站名称:">{{
|
||||
basicData.mc
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="服务站经度">{{
|
||||
<el-descriptions-item label="服务站经度:">{{
|
||||
basicData.jd
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="服务站纬度">{{
|
||||
<el-descriptions-item label="服务站纬度:">{{
|
||||
basicData.wd
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="设备数">{{}}</el-descriptions-item>
|
||||
<el-descriptions-item label="物资数">{{}}</el-descriptions-item>
|
||||
<el-descriptions-item label="人员数">{{}}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建日期">{{}}</el-descriptions-item>
|
||||
<el-descriptions-item label="设备数:">{{
|
||||
basicData.sbsl
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="物资数:">{{
|
||||
basicData.wzsl
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="人员数:">{{
|
||||
basicData.rysl
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建日期:">{{
|
||||
basicData.createTime
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
<el-card shadow="hover">
|
||||
<el-descriptions title="配置信息" :column="3"> </el-descriptions>
|
||||
<el-tabs v-model="activeTab" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="人员信息" name="people">人员信息</el-tab-pane>
|
||||
<el-tab-pane label="物资信息" name="second">物资信息</el-tab-pane>
|
||||
<el-tab-pane label="设备信息" name="third">设备信息</el-tab-pane>
|
||||
<div class="button-container">
|
||||
<el-button type="primary" @click="handleAdd">新增</el-button>
|
||||
</div>
|
||||
<el-tab-pane label="人员信息" name="people">
|
||||
<DynamicTable
|
||||
:dataSource="peopleList"
|
||||
:columns="columns()"
|
||||
:autoHeight="true"
|
||||
:pagination="pagination"
|
||||
></DynamicTable>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="物资信息" name="material">
|
||||
<DynamicTable
|
||||
:dataSource="materialList"
|
||||
:columns="columns()"
|
||||
:autoHeight="true"
|
||||
:pagination="pagination"
|
||||
></DynamicTable>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="设备信息" name="equipment">
|
||||
<DynamicTable
|
||||
:dataSource="equipmentList"
|
||||
:columns="columns()"
|
||||
:autoHeight="true"
|
||||
:pagination="pagination"
|
||||
></DynamicTable>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
<MyDialog
|
||||
v-model="modelVisible"
|
||||
:title="model?.title"
|
||||
:dynamicComponent="model?.content"
|
||||
:component-props="model?.props"
|
||||
:onConfirm="model?.onConfirm"
|
||||
:onCancel="model?.onCancel"
|
||||
ref="dialogRef"
|
||||
:width="model?.width"
|
||||
>
|
||||
</MyDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
|
||||
import DynamicTable from "../../component/DynamicTable";
|
||||
import MyDialog from "../../component/MyDialog";
|
||||
import { request } from "@/utils/request";
|
||||
import { render } from "less";
|
||||
import PersonAddDialog from "./component/PersonAddDialog.vue";
|
||||
import MaterialAddDialog from "./component/MaterialAddDialog.vue";
|
||||
import EquipmentAddDialog from "./component/EquipmentAddDialog.vue";
|
||||
const props = defineProps({
|
||||
basicData: {
|
||||
type: Object,
|
||||
@ -37,9 +87,427 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
pageSizes: [10, 20, 50],
|
||||
layout: "prev, pager, next, jumper",
|
||||
onChange: (page, pageSize) => {
|
||||
pagination.current = page;
|
||||
pagination.pageSize = pageSize;
|
||||
if (activeTab.value === "people") {
|
||||
getPeopleList();
|
||||
}
|
||||
},
|
||||
}); // 表格分页
|
||||
|
||||
const columns = () => {
|
||||
switch (activeTab.value) {
|
||||
case "people":
|
||||
return [
|
||||
{
|
||||
width: "100px",
|
||||
label: "序号",
|
||||
render: (...args) => {
|
||||
return () => {
|
||||
const actualIndex =
|
||||
(pagination.current - 1) * pagination.pageSize + args[2] + 1;
|
||||
return h("div", {}, actualIndex);
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "xm",
|
||||
label: "姓名",
|
||||
},
|
||||
{
|
||||
prop: "sjhm",
|
||||
label: "手机号",
|
||||
},
|
||||
{
|
||||
label: "人员角色",
|
||||
render: (row) => () => {
|
||||
const role = Number(row.ryjs);
|
||||
const config = {
|
||||
1: { type: "danger", text: "负责人" },
|
||||
2: { type: "success", text: "普通工作人员" },
|
||||
}[role] || { type: "info", text: "未知角色" };
|
||||
|
||||
return h(
|
||||
ElTag,
|
||||
{
|
||||
type: config.type,
|
||||
style: { margin: "2px" },
|
||||
},
|
||||
() => config.text
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
case "material":
|
||||
return [
|
||||
{
|
||||
width: "100px",
|
||||
label: "序号",
|
||||
render: (...args) => {
|
||||
return () => {
|
||||
const actualIndex =
|
||||
(pagination.current - 1) * pagination.pageSize + args[2] + 1;
|
||||
return h("div", {}, actualIndex);
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "wzmc",
|
||||
label: "物资名称",
|
||||
},
|
||||
{
|
||||
prop: "ye",
|
||||
label: "余量",
|
||||
render: (row) => () => {
|
||||
return h("span", {}, row.ye + " " + row.dw);
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "fzr",
|
||||
label: "负责人",
|
||||
},
|
||||
{
|
||||
prop: "rkrq",
|
||||
label: "入库日期",
|
||||
render: (row) => () => {
|
||||
return h("span", row.rkrq?.substring(0, 10));
|
||||
},
|
||||
},
|
||||
];
|
||||
case "equipment":
|
||||
return [
|
||||
{
|
||||
width: "100px",
|
||||
label: "序号",
|
||||
render: (...args) => {
|
||||
return () => {
|
||||
const actualIndex =
|
||||
(pagination.current - 1) * pagination.pageSize + args[2] + 1;
|
||||
return h("div", {}, actualIndex);
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "sbmc",
|
||||
label: "设备名称",
|
||||
},
|
||||
{
|
||||
prop: "sbxh",
|
||||
label: "设备型号",
|
||||
},
|
||||
{
|
||||
prop: "sbbh",
|
||||
label: "设备编号",
|
||||
},
|
||||
{
|
||||
prop: "sbdl",
|
||||
label: "设备大类",
|
||||
},
|
||||
{
|
||||
prop: "sblx",
|
||||
label: "设备类型",
|
||||
},
|
||||
{
|
||||
prop: "gzrq",
|
||||
label: "购置日期",
|
||||
render: (row) => () => {
|
||||
return h("span", row.gzrq?.substring(0, 10));
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getPeopleList();
|
||||
});
|
||||
|
||||
const peopleList = ref([]); // 人员列表
|
||||
const materialList = ref([]); // 物资列表
|
||||
const equipmentList = ref([]); // 设备列表
|
||||
|
||||
const activeTab = ref("people");
|
||||
|
||||
// 查询养护站人员列表
|
||||
const getPeopleList = async () => {
|
||||
try {
|
||||
const data = {
|
||||
pageNum: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
yhzid: Number(props.basicData.id),
|
||||
};
|
||||
const res = await request({
|
||||
url: "/snow-ops-platform/yhzry/list",
|
||||
method: "get",
|
||||
params: data,
|
||||
});
|
||||
if (res.code === "00000") {
|
||||
pagination.total = res.data.total;
|
||||
peopleList.value = res.data.records;
|
||||
} else {
|
||||
throw new Error(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
ElMessage.error(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
// 查询养护站物资列表
|
||||
const getMaterialList = async () => {
|
||||
try {
|
||||
const data = {
|
||||
pageNum: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
yhzid: Number(props.basicData.id),
|
||||
};
|
||||
const res = await request({
|
||||
url: "/snow-ops-platform/yjwz/list",
|
||||
method: "get",
|
||||
params: data,
|
||||
});
|
||||
if (res.code === "00000") {
|
||||
pagination.total = res.data.total;
|
||||
materialList.value = res.data.records;
|
||||
} else {
|
||||
throw new Error(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
ElMessage.error(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
// 查询养护站设备列表
|
||||
const getEquipmentList = async () => {
|
||||
try {
|
||||
const data = {
|
||||
pageNum: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
yhzid: Number(props.basicData.id),
|
||||
};
|
||||
const res = await request({
|
||||
url: "/snow-ops-platform/yjsb/list",
|
||||
method: "get",
|
||||
params: data,
|
||||
});
|
||||
if (res.code === "00000") {
|
||||
pagination.total = res.data.total;
|
||||
equipmentList.value = res.data.records;
|
||||
} else {
|
||||
throw new Error(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
ElMessage.error(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClick = (tab, event) => {
|
||||
console.log("tab", tab, "event", event);
|
||||
pagination.current = 1;
|
||||
switch (tab.props.name) {
|
||||
case "people":
|
||||
getPeopleList();
|
||||
break;
|
||||
case "material":
|
||||
getMaterialList();
|
||||
break;
|
||||
case "equipment":
|
||||
getEquipmentList();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// 新增相关
|
||||
const peopleForm = reactive({});
|
||||
const INIT_FORM_people = {
|
||||
userId: "",
|
||||
ryjs: 1,
|
||||
yhzid: props.basicData.id,
|
||||
sjhm: "",
|
||||
xm: "",
|
||||
sfjwd: "",
|
||||
jwd: "",
|
||||
};
|
||||
const materialForm = reactive({});
|
||||
const INIT_FORM_material = {
|
||||
material: {
|
||||
rkrq: "",
|
||||
rkdw: "",
|
||||
sl: "",
|
||||
dw: "",
|
||||
cfdd: "",
|
||||
fzr: "",
|
||||
lxdh: "",
|
||||
ye: "",
|
||||
qxmc: "",
|
||||
wzmc: "",
|
||||
fzrid: "",
|
||||
yhzid: "",
|
||||
jd: "",
|
||||
wd: "",
|
||||
},
|
||||
photos: [],
|
||||
};
|
||||
const equipmentForm = reactive({});
|
||||
const INIT_FORM_equipment = {
|
||||
rid: "",
|
||||
qxmc: "",
|
||||
sbbh: "",
|
||||
sbdl: "",
|
||||
sbmc: "",
|
||||
sblx: "",
|
||||
sbxh: "",
|
||||
sbwz: "",
|
||||
jd: props.basicData.jd,
|
||||
wd: props.basicData.wd,
|
||||
glry: "",
|
||||
glryid: "",
|
||||
czy: "",
|
||||
czyid: "",
|
||||
gzrq: "",
|
||||
gmfy: "",
|
||||
sbzt: "",
|
||||
sccj: "",
|
||||
sfyjsb: "",
|
||||
sfnrsjbz: "",
|
||||
fsfw: "",
|
||||
yhzid: props.basicData.id,
|
||||
};
|
||||
const modelVisible = ref(false);
|
||||
const model = reactive({
|
||||
title: "",
|
||||
content: null,
|
||||
props: {},
|
||||
onConfirm: () => {},
|
||||
onCancel: () => {},
|
||||
width: "30%",
|
||||
});
|
||||
const handleAdd = () => {
|
||||
switch (activeTab.value) {
|
||||
case "people":
|
||||
model.title = "新增人员";
|
||||
model.content = PersonAddDialog;
|
||||
peopleForm.value = { ...INIT_FORM_people };
|
||||
model.props = {
|
||||
form: peopleForm.value,
|
||||
};
|
||||
model.onConfirm = handleAddPeopleConfirm;
|
||||
model.onCancel = handleCancel;
|
||||
model.width = "30%";
|
||||
modelVisible.value = true;
|
||||
break;
|
||||
case "material":
|
||||
model.title = "新增物资";
|
||||
model.content = MaterialAddDialog;
|
||||
// 重置表单
|
||||
materialForm.material = { ...INIT_FORM_material.material };
|
||||
materialForm.photos = [...INIT_FORM_material.photos];
|
||||
materialForm.material.yhzid = props.basicData.id;
|
||||
materialForm.material.jd = props.basicData.jd;
|
||||
materialForm.material.wd = props.basicData.wd;
|
||||
model.props = {
|
||||
form: materialForm,
|
||||
basicData: props.basicData,
|
||||
};
|
||||
model.onConfirm = handleAddMaterialConfirm;
|
||||
model.onCancel = handleCancel;
|
||||
model.width = "40%";
|
||||
modelVisible.value = true;
|
||||
break;
|
||||
case "equipment":
|
||||
console.log("basicData", toRaw(props.basicData));
|
||||
model.title = "新增设备";
|
||||
model.content = EquipmentAddDialog;
|
||||
// 重置表单
|
||||
equipmentForm.value = { ...INIT_FORM_equipment };
|
||||
model.props = {
|
||||
form: equipmentForm,
|
||||
basicData: props.basicData,
|
||||
};
|
||||
model.onConfirm = handleAddEquipmentConfirm;
|
||||
model.onCancel = handleCancel;
|
||||
model.width = "60%";
|
||||
modelVisible.value = true;
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// 新增负责人
|
||||
const handleAddPeopleConfirm = async () => {
|
||||
try {
|
||||
const res = await request({
|
||||
url: "/snow-ops-platform/yhzry/add",
|
||||
method: "post",
|
||||
data: toRaw(peopleForm.value),
|
||||
});
|
||||
if (res.code === "00000") {
|
||||
ElMessage.success("新增成功");
|
||||
modelVisible.value = false;
|
||||
getPeopleList();
|
||||
} else {
|
||||
throw new Error(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
ElMessage.error(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
// 新增物资
|
||||
const handleAddMaterialConfirm = async () => {
|
||||
try {
|
||||
const res = await request({
|
||||
url: "/snow-ops-platform/yjwz/add",
|
||||
method: "post",
|
||||
data: toRaw(materialForm),
|
||||
});
|
||||
if (res.code === "00000") {
|
||||
ElMessage.success("新增成功");
|
||||
modelVisible.value = false;
|
||||
getMaterialList();
|
||||
} else {
|
||||
throw new Error(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
ElMessage.error(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
// 新增设备
|
||||
const handleAddEquipmentConfirm = async () => {
|
||||
try {
|
||||
const res = await request({
|
||||
url: "/snow-ops-platform/yjsb/add",
|
||||
method: "post",
|
||||
data: {
|
||||
equipment: toRaw(equipmentForm),
|
||||
},
|
||||
});
|
||||
if (res.code === "00000") {
|
||||
ElMessage.success("新增成功");
|
||||
modelVisible.value = false;
|
||||
getEquipmentList();
|
||||
} else {
|
||||
throw new Error(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
ElMessage.error(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
// 取消
|
||||
const handleCancel = () => {
|
||||
modelVisible.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -49,4 +517,10 @@ const handleClick = (tab, event) => {
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
.button-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin: 10px 0px 10px 0px;
|
||||
}
|
||||
</style>
|
||||
@ -17,6 +17,7 @@ const model = reactive({
|
||||
onCancel: null,
|
||||
onConfirm: null,
|
||||
}); // 弹窗内容
|
||||
const form = reactive({});
|
||||
const drawer = reactive({
|
||||
title: '',
|
||||
content: null,
|
||||
@ -31,6 +32,7 @@ const dialogRef = ref(null); // 弹窗实例
|
||||
const drawerType = ref(''); // 抽屉类型
|
||||
const drawerRef = ref(null); // 抽屉实例
|
||||
|
||||
|
||||
// 站点类型选项
|
||||
const zdlxOptions = [
|
||||
{ label: "服务设施", value: "服务设施" },
|
||||
@ -108,6 +110,12 @@ const getYhzDetail = async (row) => {
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
// 打开新增养护站弹窗
|
||||
const openAddDialog = () => {
|
||||
|
||||
console.log('新增',)
|
||||
};
|
||||
export default () => {
|
||||
|
||||
const router = useRouter();
|
||||
@ -181,18 +189,6 @@ export default () => {
|
||||
},
|
||||
() => "详情"
|
||||
),
|
||||
h(
|
||||
ElButton,
|
||||
{
|
||||
type: "success",
|
||||
link: true,
|
||||
style: "margin-left: 10px;",
|
||||
onClick: async () => {
|
||||
|
||||
},
|
||||
},
|
||||
() => "编辑"
|
||||
),
|
||||
h(
|
||||
ElButton,
|
||||
{
|
||||
@ -260,7 +256,7 @@ export default () => {
|
||||
drawer,
|
||||
dialogRef,
|
||||
drawerRef,
|
||||
|
||||
openAddDialog,
|
||||
|
||||
}
|
||||
}
|
||||
@ -19,7 +19,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="event-box">
|
||||
<el-button type="primary" size="large" @click="openAddDialog"
|
||||
<el-button type="primary" size="large" @click="script.openAddDialog"
|
||||
>新增</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -1,462 +0,0 @@
|
||||
<template>
|
||||
<div class="root">
|
||||
<div class="event-box">
|
||||
<div class="inline-flex">
|
||||
<label>人员姓名:</label>
|
||||
<el-input v-model="filterData.xm"></el-input>
|
||||
</div>
|
||||
<div class="inline-flex">
|
||||
<el-button type="primary" size="large" @click="openAddModel"
|
||||
>新增人员</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-box">
|
||||
<div class="form-content">
|
||||
<DynamicTable
|
||||
:dataSource="yhzryList"
|
||||
:columns="columns"
|
||||
:autoHeight="true"
|
||||
:pagination="pagination"
|
||||
></DynamicTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="model-box">
|
||||
<MyDialog
|
||||
v-model="modelVisible"
|
||||
:title="model?.title"
|
||||
:dynamicComponent="model?.content"
|
||||
:component-props="model?.props"
|
||||
:onConfirm="model?.onConfirm"
|
||||
:onCancel="model?.onCancel"
|
||||
ref="dialogRef"
|
||||
:width="model?.width"
|
||||
>
|
||||
</MyDialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { h, ref, onMounted, reactive, watch, toRaw } from "vue";
|
||||
import DynamicTable from "../../component/DynamicTable";
|
||||
import { request } from "@/utils/request";
|
||||
import MyDialog from "../../component/MyDialog";
|
||||
import AddDialog from "./component/addDialog.vue";
|
||||
import EditDialog from "./component/editDialog.vue";
|
||||
import DetailDialog from "./component/detailDialog.vue";
|
||||
|
||||
const props = defineProps({
|
||||
yhzData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
// 养护站ID
|
||||
const yhzId = ref(props.yhzData.id);
|
||||
// 表格过滤条件
|
||||
const filterData = reactive({
|
||||
xm: "", // 姓名
|
||||
});
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
pageSizes: [10, 20, 50],
|
||||
layout: "prev, pager, next, jumper",
|
||||
onChange: (page, pageSize) => {
|
||||
pagination.current = page;
|
||||
pagination.pageSize = pageSize;
|
||||
getyhzryList(filterData);
|
||||
},
|
||||
}); // 表格分页
|
||||
|
||||
// 养护站人员列表
|
||||
const yhzryList = ref([]);
|
||||
|
||||
// 获取养护站人员详情
|
||||
const getDetailData = async (row) => {
|
||||
try {
|
||||
const res = await request({
|
||||
url: `/snow-ops-platform/yhzry/getById?id=${row.id}`,
|
||||
method: "GET",
|
||||
});
|
||||
if (!res || res.code !== "00000") {
|
||||
throw new Error("获取人员详情失败");
|
||||
}
|
||||
if (res.code === "00000") {
|
||||
if (dialogType.value === "detail") {
|
||||
model.title = `人员详情`;
|
||||
model.content = DetailDialog;
|
||||
model.props = {
|
||||
detailData: res.data,
|
||||
};
|
||||
model.onCancel = () => {
|
||||
dialogType.value = "";
|
||||
modelVisible.value = false;
|
||||
};
|
||||
model.onConfirm = () => {
|
||||
dialogType.value = "";
|
||||
modelVisible.value = false;
|
||||
};
|
||||
model.width = "30%";
|
||||
modelVisible.value = true;
|
||||
}
|
||||
if (dialogType.value === "edit") {
|
||||
model.title = `编辑人员`;
|
||||
model.content = EditDialog;
|
||||
Object.assign(form, res.data);
|
||||
model.props = {
|
||||
detailData: res.data,
|
||||
form: form,
|
||||
};
|
||||
model.onCancel = () => {
|
||||
dialogType.value = "";
|
||||
modelVisible.value = false;
|
||||
};
|
||||
model.onConfirm = async () => {
|
||||
await handleEdit();
|
||||
};
|
||||
model.width = "30%";
|
||||
modelVisible.value = true;
|
||||
}
|
||||
} else {
|
||||
throw new Error(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message);
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = async () => {
|
||||
try {
|
||||
await dialogRef?.value?.dynamicComponentRef?.formRef.validate();
|
||||
console.log("form", toRaw(form));
|
||||
const res = await request({
|
||||
url: "/snow-ops-platform/yhzry/update",
|
||||
method: "POST",
|
||||
data: toRaw(form),
|
||||
});
|
||||
if (res.code === "00000") {
|
||||
ElMessage.success("编辑成功");
|
||||
dialogType.value = "";
|
||||
modelVisible.value = false;
|
||||
getyhzryList(filterData);
|
||||
} else {
|
||||
throw new Error(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message);
|
||||
console.log("error", error);
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
prop: "xm",
|
||||
label: "姓名",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
prop: "gw",
|
||||
label: "岗位",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
prop: "sjhm",
|
||||
label: "手机号码",
|
||||
},
|
||||
{
|
||||
prop: "cjsj",
|
||||
label: "创建时间",
|
||||
render: (row) => () => {
|
||||
// 解析 ISO 时间字符串
|
||||
const date = new Date(row.cjsj);
|
||||
|
||||
// 格式化为 YYYY-MM-DD HH:mm:ss
|
||||
const format = (n) => n.toString().padStart(2, "0");
|
||||
return h(
|
||||
"div",
|
||||
`${date.getFullYear()}-${format(date.getMonth() + 1)}-${format(
|
||||
date.getDate()
|
||||
)}
|
||||
${format(date.getHours())}:${format(
|
||||
date.getMinutes()
|
||||
)}:${format(date.getSeconds())}`
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "ryjs",
|
||||
label: "人员角色",
|
||||
width: 150,
|
||||
render: (row) => () => {
|
||||
const roleConfig = {
|
||||
1: { label: "负责人", color: "#f56c6c" },
|
||||
2: { label: "普通工作人员", color: "#409eff" },
|
||||
};
|
||||
|
||||
const config = roleConfig[row.ryjs] || {
|
||||
label: "未知角色",
|
||||
color: "#909399",
|
||||
};
|
||||
|
||||
return h(
|
||||
ElTag,
|
||||
{
|
||||
style: { "margin-right": "5px" },
|
||||
effect: "dark",
|
||||
type: row.ryjs === 1 ? "danger" : "primary",
|
||||
},
|
||||
() => config.label
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 150,
|
||||
render: (row) => () =>
|
||||
h("div", { class: "action-btns" }, [
|
||||
h(
|
||||
ElButton,
|
||||
{
|
||||
type: "primary",
|
||||
link: true,
|
||||
onClick: async () => {
|
||||
dialogType.value = "detail";
|
||||
await getDetailData(row);
|
||||
},
|
||||
},
|
||||
() => "详情"
|
||||
),
|
||||
h(
|
||||
ElButton,
|
||||
{
|
||||
type: "primary",
|
||||
link: true,
|
||||
onClick: async () => {
|
||||
dialogType.value = "edit";
|
||||
await getDetailData(row);
|
||||
},
|
||||
},
|
||||
() => "编辑"
|
||||
),
|
||||
h(
|
||||
ElButton,
|
||||
{
|
||||
type: "danger",
|
||||
link: true,
|
||||
onClick: async () => {
|
||||
try {
|
||||
await ElMessageBox.confirm("确定要删除该人员吗？", "删除确认", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
});
|
||||
const res = await request({
|
||||
url: `/snow-ops-platform/yhzry/delete`,
|
||||
method: "POST",
|
||||
data: {
|
||||
id: row.id,
|
||||
},
|
||||
});
|
||||
if (res.code === "00000") {
|
||||
ElMessage.success("删除成功");
|
||||
getyhzryList(filterData);
|
||||
} else {
|
||||
throw new Error(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message);
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
},
|
||||
() => "删除"
|
||||
),
|
||||
]),
|
||||
},
|
||||
];
|
||||
|
||||
// 获取养护站人员列表
|
||||
const getyhzryList = async (filterData) => {
|
||||
try {
|
||||
const data = {
|
||||
yhzid: yhzId.value,
|
||||
xm: filterData?.xm || "",
|
||||
pageNum: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
};
|
||||
const res = await request({
|
||||
url: "/snow-ops-platform/yhzry/list",
|
||||
method: "GET",
|
||||
params: data,
|
||||
});
|
||||
if (res.code === "00000") {
|
||||
yhzryList.value = res.data.records;
|
||||
pagination.total = res.data.total;
|
||||
} else {
|
||||
throw new Error(res.msg);
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message);
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
// 分页查询养护站
|
||||
onMounted(async () => {
|
||||
await getyhzryList();
|
||||
});
|
||||
|
||||
// 监听过滤条件
|
||||
watch(
|
||||
[() => filterData],
|
||||
([newFilterData]) => {
|
||||
getyhzryList(newFilterData);
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// 弹窗显示状态
|
||||
const modelVisible = ref(false);
|
||||
const dialogType = ref(""); // 弹窗类型
|
||||
const dialogRef = ref(null); // 弹窗实例
|
||||
|
||||
// 弹窗
|
||||
const model = reactive({
|
||||
title: "",
|
||||
content: null,
|
||||
props: {},
|
||||
onConfirm: () => {},
|
||||
onCancel: () => {},
|
||||
width: "30%",
|
||||
});
|
||||
|
||||
const INIT_FORM = {
|
||||
xm: "",
|
||||
sjhm: "",
|
||||
gw: "",
|
||||
cjsj: "",
|
||||
yhzid: "",
|
||||
ryjs: null, // 人员角色 1-负责人 2-普通工作人员
|
||||
userId: "",
|
||||
}; // 表单初始值
|
||||
const form = reactive({ ...INIT_FORM }); // 表单
|
||||
|
||||
// 根据用户信息 查询角色列表
|
||||
const getUserList = async (key) => {
|
||||
try {
|
||||
const keyword = key;
|
||||
let url = "";
|
||||
if (keyword) {
|
||||
url = `/snow-ops-platform/yhzry/getUserByKey?key=${keyword}`;
|
||||
} else {
|
||||
url = `/snow-ops-platform/yhzry/getUserByKey?key=`;
|
||||
}
|
||||
const res = await request({
|
||||
url: url,
|
||||
method: "GET",
|
||||
});
|
||||
if (res.code === "00000") {
|
||||
return res.data;
|
||||
} else {
|
||||
throw new Error(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message);
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
// 打开新增人员弹窗
|
||||
const openAddModel = () => {
|
||||
model.title = `新增人员`;
|
||||
model.content = AddDialog;
|
||||
model.width = "30%";
|
||||
Object.assign(form, INIT_FORM);
|
||||
model.props = {
|
||||
form: form,
|
||||
getUserList: getUserList,
|
||||
yhzdata: props.yhzData,
|
||||
};
|
||||
model.onCancel = () => {
|
||||
dialogType.value = "";
|
||||
modelVisible.value = false;
|
||||
};
|
||||
model.onConfirm = async () => {
|
||||
try {
|
||||
form.cjsj = new Date()
|
||||
.toLocaleString("sv-SE", { hour12: false })
|
||||
.replace("T", " ");
|
||||
console.log("form", toRaw(form));
|
||||
const res = await request({
|
||||
url: "/snow-ops-platform/yhzry/add",
|
||||
method: "POST",
|
||||
data: toRaw(form),
|
||||
});
|
||||
if (res.code === "00000") {
|
||||
ElMessage.success("新增人员成功");
|
||||
dialogType.value = "";
|
||||
modelVisible.value = false;
|
||||
getyhzryList(filterData);
|
||||
} else {
|
||||
throw new Error(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message);
|
||||
console.log("error", error);
|
||||
}
|
||||
};
|
||||
modelVisible.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-direction: column;
|
||||
}
|
||||
.inline-flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.inline-flex label {
|
||||
white-space: nowrap; /* 禁止换行 */
|
||||
}
|
||||
.form-box {
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.event-box {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.form-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
|
||||
.model-box {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
67
packages/screen/src/views/cockpit/api/DDT.json
Normal file
67
packages/screen/src/views/cockpit/api/DDT.json
Normal file
@ -0,0 +1,67 @@
|
||||
[
|
||||
{
|
||||
"Rid": "4126",
|
||||
"Name": "底图",
|
||||
"Attribute": {
|
||||
"rid": 4126,
|
||||
"name": "底图",
|
||||
"layerId": 0,
|
||||
"internalService": 1,
|
||||
"serviceTypeId": "",
|
||||
"serviceTypeName": "",
|
||||
"servicePath": "",
|
||||
"domainService": "",
|
||||
"status": 0,
|
||||
"parentId": "#",
|
||||
"sortValue": 2,
|
||||
"createTime": "2025-05-26T14:44:05.926Z",
|
||||
"dataType": "1",
|
||||
"bootLoad": 0,
|
||||
"internalServiceName": "",
|
||||
"historyServicePath": "",
|
||||
"expandParam": "",
|
||||
"thumbnail": "",
|
||||
"showDirectory": 0,
|
||||
"selectSubLayer": "",
|
||||
"accessInfo": "",
|
||||
"pcatalog": "DDT",
|
||||
"orgCode": "YLZG"
|
||||
},
|
||||
"Children": [
|
||||
{
|
||||
"Rid": "928",
|
||||
"Name": "重庆三维",
|
||||
"Attribute": {
|
||||
"rid": 928,
|
||||
"name": "重庆三维",
|
||||
"layerId": 0,
|
||||
"internalService": 2,
|
||||
"serviceTypeId": "",
|
||||
"serviceTypeName": "WmsServiceLayer",
|
||||
"servicePath": "/ylzggeoserver/gwc/service/wms?service=WMS&version=1.3.0&request=GetMap&layers=chongqing_yx",
|
||||
"domainService": "",
|
||||
"status": 0,
|
||||
"parentId": "4126",
|
||||
"sortValue": 10,
|
||||
"createTime": "2025-10-18T15:04:46.56008Z",
|
||||
"dataType": "2",
|
||||
"bootLoad": 0,
|
||||
"internalServiceName": "",
|
||||
"historyServicePath": "",
|
||||
"expandParam": "{\"mapUseRange\":[\"2D\"],\"data\":[],\"expandedNode\":false,\"isUseExpandParam\":false,\"mapIndex\":1}",
|
||||
"thumbnail": "",
|
||||
"showDirectory": 0,
|
||||
"selectSubLayer": "",
|
||||
"accessInfo": "{\"verifyType\":\"usrpwd\",\"tokenName\":\"token\",\"isUseVerification\":false,\"isUseToken\":false,\"verifyParams\":{\"url\":\"\",\"username\":\"\",\"password\":\"\",\"token\":\"\",\"tokenLoginUrl\":\"\",\"requestType\":\"Get\",\"requestParam\":\"\",\"interval\":60,\"rule\":\"\",\"tokenName\":\"\"}}",
|
||||
"pcatalog": "DDT",
|
||||
"orgCode": "YLZG"
|
||||
},
|
||||
"Children": [],
|
||||
"SortValue": 0,
|
||||
"ParentId": ""
|
||||
}
|
||||
],
|
||||
"SortValue": 0,
|
||||
"ParentId": ""
|
||||
}
|
||||
]
|
||||
37
packages/screen/src/views/cockpit/api/commonHttp.js
Normal file
37
packages/screen/src/views/cockpit/api/commonHttp.js
Normal file
@ -0,0 +1,37 @@
|
||||
import { request } from '@shared/utils/request'
|
||||
import si from './si.json'
|
||||
import ddt from './DDT.json'
|
||||
|
||||
// 获取业务基础地图
|
||||
export function getBusinessBaseMapDDT() {
|
||||
return [...ddt]
|
||||
// return request({
|
||||
// url: '/snow-ops-platform/dataDirectory/queryCatalog',
|
||||
// method: 'GET',
|
||||
// params: {
|
||||
// pcatalog: 'DDT'
|
||||
// }
|
||||
// })
|
||||
}
|
||||
|
||||
// 获取业务基础地图
|
||||
export function getBusinessBaseMapSI() {
|
||||
return [...si]
|
||||
// return request({
|
||||
// url: '/snow-ops-platform/dataDirectory/queryCatalog',
|
||||
// method: 'GET',
|
||||
// params: {
|
||||
// pcatalog: 'SI'
|
||||
// }
|
||||
// })
|
||||
}
|
||||
|
||||
export function test() {
|
||||
return request({
|
||||
url: '/ylzggeoserver/gwc/service/wms?service=WMS&request=GetMap&transparent=true&srs=EPSG%3A3857&format=image%2Fpng&styles=&layers=chongqing_yx&bbox=12053813.612459153%2C3130860.6785608195%2C12210356.646387197%2C3287403.71248886&width=256&height=256',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
196
packages/screen/src/views/cockpit/api/si.json
Normal file
196
packages/screen/src/views/cockpit/api/si.json
Normal file
@ -0,0 +1,196 @@
|
||||
[
|
||||
{
|
||||
"Rid": "922",
|
||||
"Name": "地图服务",
|
||||
"Attribute": {
|
||||
"id": 922,
|
||||
"name": "地图服务",
|
||||
"externalService": 0,
|
||||
"internalService": 0,
|
||||
"serviceTypeId": null,
|
||||
"serviceTypeName": null,
|
||||
"servicePath": null,
|
||||
"domainService": null,
|
||||
"status": 0,
|
||||
"parentId": "#",
|
||||
"sortValue": 1,
|
||||
"createTime": null,
|
||||
"dataType": "1",
|
||||
"bootLoad": 0,
|
||||
"internalServiceName": null,
|
||||
"historyServicePath": null,
|
||||
"expandParam": null,
|
||||
"thumbnail": null,
|
||||
"showDirectory": 0,
|
||||
"selectSublayer": null,
|
||||
"accessInfo": null,
|
||||
"pcatalog": "SI",
|
||||
"orgCode": "YLZG"
|
||||
},
|
||||
"Children": [
|
||||
{
|
||||
"Rid": "936",
|
||||
"Name": "三维模型",
|
||||
"Attribute": {
|
||||
"id": 936,
|
||||
"name": "三维模型",
|
||||
"externalService": 0,
|
||||
"internalService": 0,
|
||||
"serviceTypeId": null,
|
||||
"serviceTypeName": null,
|
||||
"servicePath": null,
|
||||
"domainService": null,
|
||||
"status": 0,
|
||||
"parentId": "922",
|
||||
"sortValue": 1,
|
||||
"createTime": null,
|
||||
"dataType": "1",
|
||||
"bootLoad": 0,
|
||||
"internalServiceName": null,
|
||||
"historyServicePath": null,
|
||||
"expandParam": null,
|
||||
"thumbnail": null,
|
||||
"showDirectory": 0,
|
||||
"selectSublayer": null,
|
||||
"accessInfo": null,
|
||||
"pcatalog": "SI",
|
||||
"orgCode": "YLZG"
|
||||
},
|
||||
"Children": [
|
||||
{
|
||||
"Rid": "923",
|
||||
"Name": "S107",
|
||||
"Attribute": {
|
||||
"id": 923,
|
||||
"name": "S107",
|
||||
"externalService": 0,
|
||||
"internalService": 2,
|
||||
"serviceTypeId": null,
|
||||
"serviceTypeName": "Cesium3DTileService",
|
||||
"servicePath": "http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/model/S107/terra_b3dms/tileset.json",
|
||||
"domainService": null,
|
||||
"status": 0,
|
||||
"parentId": "936",
|
||||
"sortValue": 1,
|
||||
"createTime": null,
|
||||
"dataType": "2",
|
||||
"bootLoad": 0,
|
||||
"internalServiceName": null,
|
||||
"historyServicePath": null,
|
||||
"expandParam": "{\"data\":[],\"editUrl\":\"\",\"isUseExpandParam\":false,\"expandedNode\":false,\"mapUseRange\":[\"2D\"]}",
|
||||
"thumbnail": null,
|
||||
"showDirectory": 0,
|
||||
"selectSublayer": null,
|
||||
"accessInfo": "{\"verifyType\":\"usrpwd\",\"tokenName\":\"token\",\"isUseVerification\":false,\"isUseToken\":false,\"verifyParams\":{\"url\":\"\",\"username\":\"\",\"password\":\"\",\"token\":\"\",\"tokenLoginUrl\":\"\",\"requestType\":\"Get\",\"requestParam\":\"\",\"interval\":60,\"rule\":\"\",\"tokenName\":\"\"}}",
|
||||
"pcatalog": "SI",
|
||||
"orgCode": "YLZG"
|
||||
},
|
||||
"Children": [],
|
||||
"SortValue": null,
|
||||
"ParentId": null
|
||||
}
|
||||
],
|
||||
"SortValue": null,
|
||||
"ParentId": null
|
||||
},
|
||||
{
|
||||
"Rid": "927",
|
||||
"Name": "行政区划服务",
|
||||
"Attribute": {
|
||||
"id": 927,
|
||||
"name": "行政区划服务",
|
||||
"externalService": 0,
|
||||
"internalService": 2,
|
||||
"serviceTypeId": null,
|
||||
"serviceTypeName": "WmsServiceLayer",
|
||||
"servicePath": "/ylzggeoserver/cite/wms?service=WMS&version=1.3.0&request=GetMap&layers=cite:base_xzqh_geo",
|
||||
"domainService": null,
|
||||
"status": 0,
|
||||
"parentId": "922",
|
||||
"sortValue": 10,
|
||||
"createTime": null,
|
||||
"dataType": "2",
|
||||
"bootLoad": 1,
|
||||
"internalServiceName": null,
|
||||
"historyServicePath": null,
|
||||
"expandParam": "{\"mapUseRange\":[\"2D\"],\"data\":[],\"expandedNode\":false,\"isUseExpandParam\":false,\"mapIndex\":1}",
|
||||
"thumbnail": null,
|
||||
"showDirectory": 0,
|
||||
"selectSublayer": null,
|
||||
"accessInfo": "{\"verifyType\":\"usrpwd\",\"tokenName\":\"token\",\"isUseVerification\":false,\"isUseToken\":false,\"verifyParams\":{\"url\":\"\",\"username\":\"\",\"password\":\"\",\"token\":\"\",\"tokenLoginUrl\":\"\",\"requestType\":\"Get\",\"requestParam\":\"\",\"interval\":60,\"rule\":\"\",\"tokenName\":\"\"}}",
|
||||
"pcatalog": "SI",
|
||||
"orgCode": "YLZG"
|
||||
},
|
||||
"Children": [],
|
||||
"SortValue": null,
|
||||
"ParentId": null
|
||||
},
|
||||
{
|
||||
"Rid": "940",
|
||||
"Name": "管理段路线名称",
|
||||
"Attribute": {
|
||||
"id": 940,
|
||||
"name": "管理段路线名称",
|
||||
"externalService": 0,
|
||||
"internalService": 2,
|
||||
"serviceTypeId": null,
|
||||
"serviceTypeName": "WmsServiceLayer",
|
||||
"servicePath": "/ylzggeoserver/cite/wms?service=WMS&version=1.3.0&request=GetMap&layers=cite:nianbao_2024_3857_lxbq&cql_filter=XZQH_ID%3D%27402880e74a28b152014a28b885c60000%27",
|
||||
"domainService": null,
|
||||
"status": 0,
|
||||
"parentId": "922",
|
||||
"sortValue": 16,
|
||||
"createTime": null,
|
||||
"dataType": "2",
|
||||
"bootLoad": 1,
|
||||
"internalServiceName": null,
|
||||
"historyServicePath": null,
|
||||
"expandParam": "{\"mapUseRange\":[\"2D\"],\"data\":[],\"expandedNode\":false,\"isUseExpandParam\":false,\"mapIndex\":1}",
|
||||
"thumbnail": null,
|
||||
"showDirectory": 0,
|
||||
"selectSublayer": null,
|
||||
"accessInfo": "{\"verifyType\":\"usrpwd\",\"tokenName\":\"token\",\"isUseVerification\":false,\"isUseToken\":false,\"verifyParams\":{\"url\":\"\",\"username\":\"\",\"password\":\"\",\"token\":\"\",\"tokenLoginUrl\":\"\",\"requestType\":\"Get\",\"requestParam\":\"\",\"interval\":60,\"rule\":\"\",\"tokenName\":\"\"}}",
|
||||
"pcatalog": "SI",
|
||||
"orgCode": "YLZG"
|
||||
},
|
||||
"Children": [],
|
||||
"SortValue": null,
|
||||
"ParentId": null
|
||||
},
|
||||
{
|
||||
"Rid": "937",
|
||||
"Name": "管理段",
|
||||
"Attribute": {
|
||||
"id": 937,
|
||||
"name": "管理段",
|
||||
"externalService": 0,
|
||||
"internalService": 2,
|
||||
"serviceTypeId": null,
|
||||
"serviceTypeName": "WmsServiceLayer",
|
||||
"servicePath": "/ylzggeoserver/cite/wms?service=WMS&version=1.3.0&request=GetMap&layers=cite:nianbao_2024_3857&cql_filter=XZQH_ID%3D%27402880e74a28b152014a28b885c60000%27",
|
||||
"domainService": null,
|
||||
"status": 0,
|
||||
"parentId": "922",
|
||||
"sortValue": 16,
|
||||
"createTime": null,
|
||||
"dataType": "2",
|
||||
"bootLoad": 1,
|
||||
"internalServiceName": null,
|
||||
"historyServicePath": null,
|
||||
"expandParam": "{\"mapUseRange\":[\"2D\"],\"data\":[],\"expandedNode\":false,\"isUseExpandParam\":false,\"mapIndex\":1}",
|
||||
"thumbnail": null,
|
||||
"showDirectory": 0,
|
||||
"selectSublayer": null,
|
||||
"accessInfo": "{\"verifyType\":\"usrpwd\",\"tokenName\":\"token\",\"isUseVerification\":false,\"isUseToken\":false,\"verifyParams\":{\"url\":\"\",\"username\":\"\",\"password\":\"\",\"token\":\"\",\"tokenLoginUrl\":\"\",\"requestType\":\"Get\",\"requestParam\":\"\",\"interval\":60,\"rule\":\"\",\"tokenName\":\"\"}}",
|
||||
"pcatalog": "SI",
|
||||
"orgCode": "YLZG"
|
||||
},
|
||||
"Children": [],
|
||||
"SortValue": null,
|
||||
"ParentId": null
|
||||
}
|
||||
],
|
||||
"SortValue": null,
|
||||
"ParentId": null
|
||||
}
|
||||
]
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
@ -26,7 +26,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 图例工具栏 -->
|
||||
<LegendToolbar class="legend-toolbar" @marker-toggle="handleLegendMarkerToggle" />
|
||||
<LegendToolbar class="legend-toolbar" :legendKeys="legendKeys" @marker-toggle="handleLegendMarkerToggle" />
|
||||
|
||||
<!-- 应急力量详情提示框 -->
|
||||
<EmergencyForceTooltip
|
||||
@ -42,11 +42,13 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onBeforeUnmount } from 'vue'
|
||||
import { ref, onBeforeUnmount, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import useMapStore from '@/map/stores/mapStore'
|
||||
import { fetchEmergencyForceList } from '@/views/cockpit/api/emergencyForce'
|
||||
import { useEmergencyForceInteraction } from '../composables/useEmergencyForceInteraction'
|
||||
import { useMapBase } from '../composables/useMapBase'
|
||||
import { useMapImageMark } from '../composables/useMapImageMark'
|
||||
|
||||
import PageHeader from './PageHeader.vue'
|
||||
import WeatherWarning from './WeatherWarning.vue'
|
||||
@ -58,6 +60,11 @@ import LegendToolbar from './LegendToolbar.vue'
|
||||
import EmergencyForceTooltip from './EmergencyForceTooltip.vue'
|
||||
import emergencyForceMarkerIcon from '../assets/legendTool/应急力量icon定位.png'
|
||||
|
||||
onMounted(()=>{
|
||||
// 加载地图业务底图 并 聚焦中心点
|
||||
mapBase.loadBaseData()
|
||||
})
|
||||
|
||||
// ==================== 常量定义 ====================
|
||||
|
||||
/**
|
||||
@ -86,6 +93,16 @@ const emergencyForceInteraction = useEmergencyForceInteraction(mapStore, {
|
||||
flyDistance: 500
|
||||
})
|
||||
|
||||
/**
|
||||
* 加载地图的业务底图与聚焦中心点
|
||||
*/
|
||||
const mapBase = useMapBase(mapStore)
|
||||
|
||||
/**
|
||||
* 标记图hook，搭配lengendToolbar使用, 作用是点击某个图例项时，在地图上显示所有该图例的图
|
||||
*/
|
||||
const mapImageMark = useMapImageMark(mapStore)
|
||||
|
||||
/**
|
||||
* 应急力量数据加载状态
|
||||
*/
|
||||
@ -111,6 +128,12 @@ const emergencyForceCache = ref({
|
||||
*/
|
||||
const emergencyForceAbortController = ref(null)
|
||||
|
||||
/**
|
||||
* 工具图标列表通过key关联
|
||||
* key具体有哪些，请根据LegendToolbar.vue中定义的defaultLegendItems
|
||||
*/
|
||||
const legendKeys = ref(['serviceFacility','riskRoad','blockEvent','weatherAlert','emergencyForce'])
|
||||
|
||||
// ==================== 工具函数 ====================
|
||||
|
||||
/**
|
||||
@ -401,6 +424,9 @@ const renderEmergencyForcePoints = async (entityService, points, markerIcon) =>
|
||||
const handleLegendMarkerToggle = async ({ key, active, markerIcon }) => {
|
||||
// 只处理应急力量图例项
|
||||
if (key !== 'emergencyForce') {
|
||||
|
||||
mapImageMark.toggleMark({ key, active, markerIcon })
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,356 @@
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="visible && position" class="common-tooltip" :style="{
|
||||
left: `${position.x}px`,
|
||||
top: `${position.y - 20}px`
|
||||
}">
|
||||
<span class="title">{{ title }}</span>
|
||||
<!-- 关闭按钮 -->
|
||||
<button class="close-button" type="button" aria-label="关闭" @click="handleClose">
|
||||
×
|
||||
</button>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="tooltip-content">
|
||||
<component v-if="hasData" :is="contentMap[data.mapData.layerId]" :data="data" />
|
||||
|
||||
<!-- 如果没有数据 -->
|
||||
<div v-if="!hasData" class="no-data">
|
||||
暂无详细信息
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading-overlay">
|
||||
<div class="loading-spinner"></div>
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<div v-if="error" class="error-message">
|
||||
{{ error }}
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import serviceFacility from './serviceFacility.vue'
|
||||
import riskRoad from './riskRoad.vue'
|
||||
import weatherAlert from './weatherAlert.vue'
|
||||
import blockEvent from './blockEvent.vue'
|
||||
|
||||
/**
|
||||
* 应急力量详情提示框组件
|
||||
* 使用 HTML Overlay 方式显示在地图标记点上方
|
||||
*/
|
||||
|
||||
// ==================== Props ====================
|
||||
|
||||
const props = defineProps({
|
||||
/**
|
||||
* 是否显示提示框
|
||||
*/
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
/**
|
||||
* 提示框位置（屏幕坐标）
|
||||
* @type {{ x: number, y: number }}
|
||||
*/
|
||||
position: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
|
||||
/**
|
||||
* 详情数据
|
||||
* @type {{ qxmc?: string, yjllpz?: string, wzQtwz?: string }}
|
||||
*/
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载状态
|
||||
*/
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
/**
|
||||
* 错误信息
|
||||
*/
|
||||
error: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
// ==================== State ====================
|
||||
const contentMap = ref({
|
||||
// 养护站内容
|
||||
serviceFacility,
|
||||
// 高海拔道路
|
||||
riskRoad,
|
||||
// 阻断事件
|
||||
blockEvent,
|
||||
// 气象预警
|
||||
weatherAlert,
|
||||
})
|
||||
|
||||
// ==================== Emits ====================
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
// ==================== Computed ====================
|
||||
|
||||
/**
|
||||
* 是否有有效数据
|
||||
*/
|
||||
const hasData = computed(() => {
|
||||
return !!props.data
|
||||
})
|
||||
|
||||
const title = computed(() => {
|
||||
if (props.data.mapData.layerId === 'serviceFacility') {
|
||||
return '养护站'
|
||||
}
|
||||
if (props.data.mapData.layerId === 'riskRoad') {
|
||||
return '高海拔路段'
|
||||
}
|
||||
if (props.data.mapData.layerId === 'blockEvent') {
|
||||
return '阻断事件'
|
||||
}
|
||||
if (props.data.mapData.layerId === 'weatherAlert') {
|
||||
return '气象预警'
|
||||
}
|
||||
})
|
||||
|
||||
// ==================== Methods ====================
|
||||
|
||||
/**
|
||||
* 处理关闭按钮点击
|
||||
*/
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/mixins.scss' as *;
|
||||
|
||||
.common-tooltip {
|
||||
// CSS 变量：控制背景图片尺寸和内边距
|
||||
// 注意：修改图片资源时，需要同步更新这些高度值以匹配实际 PNG 尺寸
|
||||
--tooltip-top-height: 68px;
|
||||
--tooltip-bottom-height: 68px;
|
||||
--tooltip-side-padding: 24px;
|
||||
--tooltip-body-padding: 16px;
|
||||
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
pointer-events: auto;
|
||||
|
||||
// 居中并置于标记点上方
|
||||
transform: translate(-50%, calc(-100% - 20px));
|
||||
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
|
||||
// 上下 padding 需要容纳顶部和底部图片 + 内容间距
|
||||
// 左右 padding 保持一致
|
||||
padding: calc(var(--tooltip-top-height)) var(--tooltip-side-padding) calc(var(--tooltip-bottom-height));
|
||||
|
||||
// 三段式可拉伸背景：顶部固定高度、中部可拉伸、底部固定高度
|
||||
background-image:
|
||||
url('@/views/cockpit/assets/emergencyForceTooltip/top.png'),
|
||||
url('@/views/cockpit/assets/emergencyForceTooltip/bottom.png'),
|
||||
url('@/views/cockpit/assets/emergencyForceTooltip/middle.png');
|
||||
|
||||
// 顶部/底部/中部都不重复，中部通过 background-size 拉伸填充
|
||||
background-repeat: no-repeat, no-repeat, no-repeat;
|
||||
|
||||
// 背景定位：顶部居中对齐顶边，底部居中对齐底边
|
||||
// 中部略向上偏移 1px，结合高度 +2px 在上下各覆盖 1px 避免子像素渲染缝隙
|
||||
background-position:
|
||||
center top,
|
||||
center bottom,
|
||||
center calc(var(--tooltip-top-height) - 1px);
|
||||
|
||||
// 背景尺寸：顶部/底部高度固定
|
||||
// 中部填充剩余空间并增加 2px，在上下各多覆盖约 1px 避免间隙
|
||||
background-size:
|
||||
100% var(--tooltip-top-height),
|
||||
100% var(--tooltip-bottom-height),
|
||||
100% calc(100% - var(--tooltip-top-height) - var(--tooltip-bottom-height) + 2px);
|
||||
|
||||
// 移除原有的 border 和 border-radius，使用图片背景
|
||||
border: none;
|
||||
|
||||
// 保留毛玻璃效果和阴影以增强视觉层次
|
||||
// backdrop-filter: blur(12px);
|
||||
// box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
|
||||
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
|
||||
// 小箭头（指向标记点）
|
||||
// &::after {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// bottom: -10px;
|
||||
// left: 50%;
|
||||
// transform: translateX(-50%);
|
||||
// width: 0;
|
||||
// height: 0;
|
||||
// border-left: 10px solid transparent;
|
||||
// border-right: 10px solid transparent;
|
||||
// border-top: 10px solid rgba(71, 186, 255, 0.4);
|
||||
// }
|
||||
}
|
||||
|
||||
.title {
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 20px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 22px;
|
||||
text-shadow: 0px 0px 20px #079DFF;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// 关闭按钮 - 仅作为透明点击热区，视觉由背景图中的关闭图标承载
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 2px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
|
||||
// 透明化所有视觉元素，仅保留点击功能
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
font-size: 0;
|
||||
line-height: 1;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
|
||||
// 为键盘用户提供可见的焦点轮廓（仅在键盘导航时显示）
|
||||
&:focus-visible {
|
||||
outline: 2px solid rgba(255, 255, 255, 0.8);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// 内容区域
|
||||
.tooltip-content {
|
||||
padding-right: 1.5rem; // 为关闭按钮留出空间
|
||||
}
|
||||
|
||||
// 信息项
|
||||
.info-item {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// 无数据提示
|
||||
.no-data {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
text-align: center;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
// 加载状态
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
// 使用半透明背景，让背景图片纹理仍然可见
|
||||
background: rgba(0, 0, 0, 1);
|
||||
backdrop-filter: blur(12px);
|
||||
|
||||
span {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载动画
|
||||
.loading-spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 3px solid rgba(71, 186, 255, 0.2);
|
||||
border-top-color: rgba(71, 186, 255, 1);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
// 错误信息
|
||||
.error-message {
|
||||
color: #ff6b6b;
|
||||
font-size: 13px;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
background: rgba(255, 107, 107, 0.1);
|
||||
border: 1px solid rgba(255, 107, 107, 0.3);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
// 淡入淡出动画
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, calc(-100% - 10px));
|
||||
}
|
||||
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, calc(-100% - 30px));
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="">
|
||||
test
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/mixins.scss' as *;
|
||||
</style>
|
||||
@ -0,0 +1,78 @@
|
||||
import { createVNode, render } from 'vue'
|
||||
import ImageMarkTooltip from './ImageMarkTooltip.vue'
|
||||
|
||||
class ImageMarkTooltipUI {
|
||||
constructor() {
|
||||
this.instance = null
|
||||
this.container = null
|
||||
this.entity = null
|
||||
this.root = null
|
||||
}
|
||||
|
||||
// 显示 tooltip
|
||||
show(options = {}) {
|
||||
// 销毁之前的实例
|
||||
this.close()
|
||||
|
||||
// 创建容器
|
||||
this.container = document.createElement('div')
|
||||
this.container.className = 'tooltip-service-container'
|
||||
this.root = document.querySelector('.cockpit-main')
|
||||
this.root.appendChild(this.container)
|
||||
|
||||
this.entity = options.entity
|
||||
|
||||
// 创建 VNode
|
||||
const vnode = createVNode(ImageMarkTooltip, {
|
||||
visible: true,
|
||||
position: options.position || { x: 0, y: 0 },
|
||||
data: options.data || {},
|
||||
loading: options.loading || false,
|
||||
error: options.error || '',
|
||||
onClose: () => {
|
||||
this.close()
|
||||
}
|
||||
})
|
||||
|
||||
// 渲染到容器
|
||||
render(vnode, this.container)
|
||||
this.instance = vnode.component
|
||||
return this.instance
|
||||
}
|
||||
|
||||
updatePosition(position) {
|
||||
if (this.instance) {
|
||||
this.instance.props.position = position
|
||||
this.instance.update()
|
||||
}
|
||||
}
|
||||
|
||||
// 更新 tooltip 内容
|
||||
update(options) {
|
||||
if (this.instance) {
|
||||
this.instance.props = {
|
||||
...this.instance.props,
|
||||
...options
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭 tooltip
|
||||
close() {
|
||||
if (this.container) {
|
||||
render(null, this.container)
|
||||
this.root.removeChild(this.container)
|
||||
this.container = null
|
||||
this.instance = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 创建单例实例
|
||||
const instance = new ImageMarkTooltipUI()
|
||||
|
||||
export const CommonTooltip = instance
|
||||
|
||||
export const newImageMarkTooltip = () => {
|
||||
return new ImageMarkTooltipUI()
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<div class="tool-tip-content">
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/mixins.scss' as *;
|
||||
</style>
|
||||
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="content" v-if="data">
|
||||
<div class="info-item">
|
||||
<span class="label">名称:</span>
|
||||
<span class="value">{{ data.mc }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="info-item">
|
||||
<span class="label">所属区县：</span>
|
||||
<span class="value">{{ data.yjllpz }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<span class="label">应急物资：</span>
|
||||
<span class="value">{{ data.wz }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/mixins.scss' as *;
|
||||
|
||||
// 信息项
|
||||
.info-item {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="">
|
||||
test
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/mixins.scss' as *;
|
||||
</style>
|
||||
@ -76,6 +76,7 @@ import blockEventMarkerIcon from '../assets/legendTool/阻断事件icon定位.pn
|
||||
import emergencyForceIcon from '../assets/legendTool/应急力量icon.png'
|
||||
import emergencyForceMarkerIcon from '../assets/legendTool/应急力量icon定位.png'
|
||||
import weatherAlertIcon from '../assets/legendTool/气象预警icon.png'
|
||||
import weatherAlertMarkerIcon from '../assets/legendTool/气象预警icon定位.png'
|
||||
|
||||
// 默认图例项配置（包含普通图标和地图定位图标）
|
||||
const defaultLegendItems = [
|
||||
@ -84,12 +85,12 @@ const defaultLegendItems = [
|
||||
{ key: 'trafficMonitor', label: '交调', icon: trafficMonitorIcon, markerIcon: trafficMonitorMarkerIcon },
|
||||
{ key: 'bridge', label: '桥梁', icon: bridgeIcon, markerIcon: bridgeMarkerIcon },
|
||||
{ key: 'tunnel', label: '隧洞', icon: tunnelIcon, markerIcon: tunnelMarkerIcon },
|
||||
{ key: 'serviceFacility', label: '服务设施', icon: serviceFacilityIcon, markerIcon: serviceFacilityMarkerIcon },
|
||||
{ key: 'riskRoad', label: '风险路段', icon: riskRoadIcon, markerIcon: riskRoadMarkerIcon },
|
||||
{ key: 'serviceFacility', label: '养护站', icon: serviceFacilityIcon, markerIcon: serviceFacilityMarkerIcon },
|
||||
{ key: 'riskRoad', label: '高海拔路段', icon: riskRoadIcon, markerIcon: riskRoadMarkerIcon },
|
||||
{ key: 'hazardPoint', label: '涉灾隐患点', icon: hazardPointIcon, markerIcon: hazardPointMarkerIcon },
|
||||
{ key: 'blockEvent', label: '阻断事件', icon: blockEventIcon, markerIcon: blockEventMarkerIcon },
|
||||
{ key: 'emergencyForce', label: '应急力量', icon: emergencyForceIcon, markerIcon: emergencyForceMarkerIcon },
|
||||
{ key: 'weatherAlert', label: '气象预警', icon: weatherAlertIcon, markerIcon: weatherAlertIcon }
|
||||
{ key: 'weatherAlert', label: '气象预警', icon: weatherAlertIcon, markerIcon: weatherAlertMarkerIcon }
|
||||
]
|
||||
|
||||
// 定义 props
|
||||
@ -103,6 +104,14 @@ const props = defineProps({
|
||||
default: null
|
||||
},
|
||||
|
||||
/**
|
||||
* 根据key显示对应图例
|
||||
*/
|
||||
legendKeys: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
|
||||
/**
|
||||
* Marker 数据配置（可选）
|
||||
* 如果提供，将在事件中传递完整的 marker 数据
|
||||
@ -135,10 +144,10 @@ const props = defineProps({
|
||||
* 兼容旧版：标记点切换回调函数
|
||||
* @deprecated 推荐使用 @marker-toggle 事件
|
||||
*/
|
||||
onMarkerToggle: {
|
||||
type: Function,
|
||||
default: null
|
||||
}
|
||||
// onMarkerToggle: {
|
||||
// type: Function,
|
||||
// default: null
|
||||
// }
|
||||
})
|
||||
|
||||
// 定义 emits
|
||||
@ -146,6 +155,13 @@ const emit = defineEmits(['marker-toggle', 'clear', 'update:modelValue', 'collap
|
||||
|
||||
// 计算图例项配置（支持自定义）
|
||||
const computedLegendItems = computed(() => {
|
||||
if(props.legendKeys && props.legendKeys.length > 0) {
|
||||
return props.legendKeys.map(key => {
|
||||
const item = defaultLegendItems.find(item => item.key === key)
|
||||
return item
|
||||
})
|
||||
}
|
||||
|
||||
return props.legendItems && props.legendItems.length > 0
|
||||
? props.legendItems
|
||||
: defaultLegendItems
|
||||
@ -260,7 +276,6 @@ const handleItemClick = (key) => {
|
||||
// 构建并发送事件
|
||||
const payload = buildPayload(key, newIsActive)
|
||||
emit('marker-toggle', payload)
|
||||
|
||||
// 兼容旧版 props 回调
|
||||
if (props.onMarkerToggle) {
|
||||
props.onMarkerToggle(
|
||||
|
||||
@ -0,0 +1,99 @@
|
||||
import { newImageMarkTooltip } from '../components/ImageMarkTooltip'
|
||||
|
||||
// 专门用于绘制图片的api数据类
|
||||
export default class ImageMarkData {
|
||||
key = null
|
||||
markerIcon = null
|
||||
api = null
|
||||
// 提示框实例，当鼠标移入或者点击图例时，需要获取到该实例
|
||||
tooltip = null
|
||||
onResponse = null
|
||||
cacheData = null
|
||||
expiresAt = null
|
||||
abortController = null
|
||||
/**
|
||||
* 60秒内重复点击使用缓存数据，减少服务器压力
|
||||
*/
|
||||
cacheTime = 60 * 1000
|
||||
|
||||
constructor({ api, tooltip, onResponse }) {
|
||||
this.api = api
|
||||
this.response = onResponse
|
||||
// 初始化提示框
|
||||
this.tooltip = tooltip || newImageMarkTooltip()
|
||||
}
|
||||
|
||||
getCache = () => {
|
||||
// 检查缓存是否有效
|
||||
if (
|
||||
this.cacheData?.length &&
|
||||
this.expiresAt > Date.now()
|
||||
) {
|
||||
return this.cacheData
|
||||
}
|
||||
}
|
||||
|
||||
request = async (params) => {
|
||||
// 首先查看缓存是否可用
|
||||
const cacheData = this.getCache()
|
||||
if (cacheData) return cacheData
|
||||
|
||||
const controller = this.createAbortController()
|
||||
const config = {}
|
||||
if (controller) config.signal = controller.signal
|
||||
let res = null
|
||||
try {
|
||||
res = await this.api(params, config)
|
||||
} catch (error) {
|
||||
console.error('请求失败: ', error)
|
||||
} finally {
|
||||
let data = null
|
||||
if (this.response) data = this.response(res)
|
||||
else data = this.commonOnResponse(res)
|
||||
|
||||
this.cacheData = data
|
||||
this.expiresAt = Date.now() + this.cacheTime
|
||||
|
||||
return data
|
||||
}
|
||||
}
|
||||
|
||||
createAbortController = () => {
|
||||
if (typeof AbortController === 'undefined') {
|
||||
console.warn('当前环境不支持 AbortController')
|
||||
return null
|
||||
}
|
||||
return new AbortController()
|
||||
}
|
||||
|
||||
cancelRequest = () => {
|
||||
if (this.abortController) {
|
||||
try {
|
||||
this.abortController.abort()
|
||||
} catch (error) {
|
||||
this.console.warn('取消请求失败', error)
|
||||
} finally {
|
||||
this.abortController = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 通用的响应处理
|
||||
commonOnResponse = (res) => {
|
||||
if (res?.success) {
|
||||
res.data = res.data.slice(0, 2)
|
||||
const dataList = res.data.map((item) => {
|
||||
item.mapData = {
|
||||
id: this.key + '-' + item.rid,
|
||||
layerId: this.key,
|
||||
position: [item.jd, item.wd, 0],
|
||||
image: this.markerIcon
|
||||
}
|
||||
return item
|
||||
})
|
||||
this.data = dataList
|
||||
return dataList
|
||||
}
|
||||
return []
|
||||
}
|
||||
}
|
||||
63
packages/screen/src/views/cockpit/composables/useMapBase.js
Normal file
63
packages/screen/src/views/cockpit/composables/useMapBase.js
Normal file
@ -0,0 +1,63 @@
|
||||
import { getBusinessBaseMapDDT, getBusinessBaseMapSI, test } from '@/views/cockpit/api/commonHttp.js'
|
||||
|
||||
// 当前页面的最基础地图服务
|
||||
// 主要是加载地图底图
|
||||
export const useMapBase = (mapStore) => {
|
||||
|
||||
const loadBusinessBaseMapDDT = async () => {
|
||||
const layerService = mapStore.services().layer
|
||||
const res = await getBusinessBaseMapDDT()
|
||||
const data = [...res]
|
||||
mapStore.baseMapGroups = data
|
||||
for (const item of data) {
|
||||
const layers = mapStore.getBaseMapLayersForGroup(item.Attribute?.rid || item.Rid)
|
||||
for (const layerConfig of layers) {
|
||||
const layer = {
|
||||
id: layerConfig.id,
|
||||
type: layerConfig.type,
|
||||
url: layerConfig.url,
|
||||
meta: layerConfig.meta,
|
||||
options: {
|
||||
parameters: {
|
||||
srs: 'EPSG:3857',
|
||||
transparent: true,
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
await layerService.addLayer(layer)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const loadBusinessBaseMapLayerSI = async () => {
|
||||
const layerService = mapStore.services().layer
|
||||
const res = await getBusinessBaseMapSI()
|
||||
const data = [...res]
|
||||
mapStore.baseMapGroups = data
|
||||
for (const item of data) {
|
||||
const layers = mapStore.getBaseMapLayersForGroup(item.Attribute?.rid || item.Rid)
|
||||
for (const layerConfig of layers) {
|
||||
const layer = {
|
||||
id: layerConfig.id,
|
||||
type: layerConfig.type,
|
||||
url: layerConfig.url,
|
||||
meta: layerConfig.meta,
|
||||
}
|
||||
await layerService.addLayer(layer)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const loadBaseData = () => {
|
||||
setTimeout(() => {
|
||||
// loadBusinessBaseMapDDT()
|
||||
// test()
|
||||
loadBusinessBaseMapLayerSI()
|
||||
}, 0)
|
||||
}
|
||||
|
||||
return {
|
||||
loadBaseData
|
||||
}
|
||||
}
|
||||
177
packages/screen/src/views/cockpit/composables/useMapImageMark.js
Normal file
177
packages/screen/src/views/cockpit/composables/useMapImageMark.js
Normal file
@ -0,0 +1,177 @@
|
||||
import { fetchEmergencyForceList } from '@/views/cockpit/api/emergencyForce'
|
||||
|
||||
import ImageMarkData from './ImageMarkData'
|
||||
import * as Cesium from 'cesium'
|
||||
|
||||
/**
|
||||
* 当前业务下的地图服务
|
||||
* 主要是涉及需要调用后端服务获得地图数据
|
||||
* */
|
||||
|
||||
export const useMapImageMark = (mapStore) => {
|
||||
|
||||
// mapStore准备就绪进行初始化
|
||||
mapStore.onReady(() => init())
|
||||
|
||||
// 接口服务映射
|
||||
const imageMarkMap = {
|
||||
serviceFacility: new ImageMarkData({
|
||||
api: fetchEmergencyForceList,
|
||||
}),
|
||||
riskRoad: new ImageMarkData({
|
||||
api: fetchEmergencyForceList,
|
||||
}),
|
||||
blockEvent: new ImageMarkData({
|
||||
api: fetchEmergencyForceList,
|
||||
}),
|
||||
weatherAlert: new ImageMarkData({
|
||||
api: fetchEmergencyForceList,
|
||||
})
|
||||
}
|
||||
|
||||
let entityService
|
||||
let viewer
|
||||
let handler
|
||||
|
||||
const init = () => {
|
||||
entityService = mapStore.services().entity
|
||||
viewer = mapStore.getViewer()
|
||||
|
||||
// 事件注册
|
||||
handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
|
||||
|
||||
// 点击事件
|
||||
handler.setInputAction(function (event) {
|
||||
const pickedFeature = viewer.scene.pick(event.position);
|
||||
if (pickedFeature?.id) {
|
||||
const entity = pickedFeature.id
|
||||
const data = entity.properties.originalData.getValue()
|
||||
const imageMarkData = imageMarkMap[data.mapData.layerId]
|
||||
imageMarkData.tooltip.show({
|
||||
data,
|
||||
entity,
|
||||
position: getScreenPosition(entity)
|
||||
})
|
||||
}
|
||||
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
|
||||
// 帧渲染函数，也就是显示器的每一帧都会执行
|
||||
// 地图拖动与放大的监控，需要更新各个tooltips的位置, 通过消息来通知
|
||||
viewer.scene.postRender.addEventListener(() => {
|
||||
for(const key in imageMarkMap) {
|
||||
const imageMarkData = imageMarkMap[key]
|
||||
const entity = imageMarkData.tooltip.entity
|
||||
if(!entity) continue
|
||||
imageMarkData.tooltip.updatePosition(getScreenPosition(entity))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 绘制各个地图标，例如点击LengendItem的某一项，就会显示对应的图标列表
|
||||
*/
|
||||
const drawImageEntities = async (dataList) => {
|
||||
for (const item of dataList) {
|
||||
const mapData = item.mapData
|
||||
entityService.addBillboard({
|
||||
id: mapData.id,
|
||||
layerId: mapData.layerId,
|
||||
position: mapData.position,
|
||||
image: mapData.image,
|
||||
width: mapData.width || 44,
|
||||
height: mapData.height || 44,
|
||||
clampToGround: true,
|
||||
properties: { originalData: item }
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 清除某个图层里的实体
|
||||
*/
|
||||
const clearLayerEntity = (layerId) => {
|
||||
entityService.clearLayerEntities(layerId)
|
||||
const imageMarkData = imageMarkMap[layerId]
|
||||
if (!imageMarkData) return
|
||||
imageMarkData.tooltip.close()
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据图标名称请求后台服务，动态加载图标列表
|
||||
*/
|
||||
const loadDynamicMark = async ({ key, markerIcon, params }) => {
|
||||
const imageMarkData = imageMarkMap[key]
|
||||
if (!imageMarkData) return
|
||||
imageMarkData.markerIcon = markerIcon
|
||||
imageMarkData.key = key
|
||||
const dataList = await imageMarkData.request(params)
|
||||
|
||||
drawImageEntities(dataList)
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示/隐藏地图标
|
||||
*/
|
||||
const toggleMark = async ({ key, active, markerIcon, params }) => {
|
||||
const imageMarkData = imageMarkMap[key]
|
||||
|
||||
if (!active) {
|
||||
clearLayerEntity(key)
|
||||
if (imageMarkData) imageMarkData.cancelRequest()
|
||||
return
|
||||
}
|
||||
|
||||
loadDynamicMark({ key, markerIcon, params })
|
||||
}
|
||||
|
||||
/**
|
||||
* 获得该实体位于屏幕的位置，用于html元素进行定位使用
|
||||
*/
|
||||
const getScreenPosition = (entity) => {
|
||||
|
||||
try {
|
||||
const position = entity.position?.getValue(Cesium.JulianDate.now())
|
||||
if (!position) return
|
||||
|
||||
// 处理 clampToGround 实体
|
||||
// 对于使用 CLAMP_TO_GROUND 的 billboard，需要获取实际的地形高度
|
||||
let clampedPosition = position
|
||||
|
||||
// 转换为地理坐标
|
||||
const cartographic = Cesium.Cartographic.fromCartesian(position)
|
||||
|
||||
// 尝试获取地形高度
|
||||
if (viewer.scene.globe) {
|
||||
const height = viewer.scene.globe.getHeight(cartographic)
|
||||
|
||||
// 如果成功获取地形高度，使用地形高度重建位置
|
||||
if (Cesium.defined(height)) {
|
||||
cartographic.height = height
|
||||
clampedPosition = Cesium.Cartographic.toCartesian(cartographic)
|
||||
} else {
|
||||
// 备用方案：尝试使用 clampToHeight
|
||||
const clampedCartesian = viewer.scene.clampToHeight(position)
|
||||
if (clampedCartesian) {
|
||||
clampedPosition = clampedCartesian
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 使用修正后的位置进行屏幕坐标转换
|
||||
const screenPosition = viewer.scene.cartesianToCanvasCoordinates(clampedPosition)
|
||||
if (screenPosition) {
|
||||
return screenPosition
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('更新 Tooltip 位置失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
toggleMark
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user