Browse Source

1.修改ApiTreeSelect组件配置

2.修复区域管理显示、防区列表管理功能,与菜单设置匹配
master
DIAMOND 1 year ago
parent
commit
162e3d68d0
  1. 3
      src/components/Form/src/components/ApiTreeSelect.vue
  2. 5
      src/views/earthMap/edit/EarthComp.vue
  3. 22
      src/views/military/modules/earthMap/msMapLine/MsMapLine.api.ts
  4. 15
      src/views/military/modules/earthMap/msMapLine/MsMapLine.data.ts
  5. 322
      src/views/military/modules/earthMap/msMapLine/MsMapLineList.vue
  6. 24
      src/views/military/modules/earthMap/msMapLine/components/MsMapLineForm.vue
  7. 16
      src/views/military/modules/earthMap/scene/SceneManage.vue
  8. 14
      src/views/military/modules/earthMap/scene/model/sceneInfo/SenceInfo.vue

3
src/components/Form/src/components/ApiTreeSelect.vue

@ -1,5 +1,5 @@
<template>
<a-tree-select v-bind="getAttrs" @change="handleChange">
<a-tree-select v-bind="getAttrs" @change="handleChange" :placeholder=placeholder allow-clear>
<template #[item]="data" v-for="item in Object.keys($slots)">
<slot :name="item" v-bind="data || {}"></slot>
</template>
@ -24,6 +24,7 @@
params: { type: Object },
immediate: { type: Boolean, default: true },
resultField: propTypes.string.def(''),
placeholder: { type: String, default:'' }
},
emits: ['options-change', 'change'],
setup(props, { attrs, emit }) {

5
src/views/earthMap/edit/EarthComp.vue

@ -2190,13 +2190,16 @@
let radarShifting = data.angularRadian;
let left = Number(radarShifting) - Number(radarRange) / 2;
//
pickedFeature.id._xbsjOwner.addViewShedReturn = addViewShedRadar(
console.log("雷达扫描范围",data);
let a
pickedFeature.id._xbsjOwner.addViewShedReturn =a= addViewShedRadar(
pickedFeature.id._xbsjOwner.position,
radarRadius,
left,
Number(radarRange) / 2 + Number(radarShifting),
[rgb.r / 255, rgb.g / 255, rgb.b / 255, rgb.a]
);
console.log("a",a);
}
}
});

22
src/views/military/modules/earthMap/msMapLine/MsMapLine.api.ts

@ -1,18 +1,19 @@
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from "/@/hooks/web/useMessage";
import { useUserStore } from '/@/store/modules/user';
const { createConfirm } = useMessage();
const userStore = useUserStore();
enum Api {
list = '/military/msMapLine/list',
save='/military/msMapLine/add',
edit='/military/msMapLine/edit',
save = '/military/msMapLine/add',
edit = '/military/msMapLine/edit',
deleteOne = '/military/msMapLine/delete',
deleteBatch = '/military/msMapLine/deleteBatch',
importExcel = '/military/msMapLine/importExcel',
exportXls = '/military/msMapLine/exportXls',
}
/**
* api
* @param params
@ -27,16 +28,21 @@ export const getImportUrl = Api.importExcel;
/**
*
* @param params
* @description
*/
export const list = (params) => defHttp.get({ url: Api.list, params });
export const list = (params) => {
if (params.sceneId == undefined)
params.sceneId = userStore.userInfo?.sceneId + "*";
return defHttp.get({ url: Api.list, params });
}
/**
*
* @param params
* @param handleSuccess
*/
export const deleteOne = (params,handleSuccess) => {
return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
export const deleteOne = (params, handleSuccess) => {
return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true }).then(() => {
handleSuccess();
});
}
@ -54,7 +60,7 @@ export const batchDelete = (params, handleSuccess) => {
okText: '确认',
cancelText: '取消',
onOk: () => {
return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => {
return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
handleSuccess();
});
}

15
src/views/military/modules/earthMap/msMapLine/MsMapLine.data.ts

@ -5,7 +5,14 @@ import { render } from '/@/utils/common/renderUtils';
//列表数据
export const columns: BasicColumn[] = [
{
title: '线路名称',
title: '所属区域',
align: "center",
dataIndex: 'sceneId_dictText',
width: 180
},
{
// title: '线路名称',
title: '防区名称',
align: "center",
dataIndex: 'name',
width: 180
@ -88,7 +95,7 @@ export const columns: BasicColumn[] = [
//查询数据
export const searchFormSchema: FormSchema[] = [
{
label: "线路名称",
label: "防区名称",
field: 'name',
component: 'Input',
colProps: { span: 6 },
@ -98,12 +105,12 @@ export const searchFormSchema: FormSchema[] = [
//表单数据
export const formSchema: FormSchema[] = [
{
label: '线路名称',
label: '防区名称',
field: 'name',
component: 'Input',
dynamicRules: ({ model, schema }) => {
return [
{ required: true, message: '请输入线路名称!' },
{ required: true, message: '请输入防区名称!' },
];
},
},

322
src/views/military/modules/earthMap/msMapLine/MsMapLineList.vue

@ -1,25 +1,32 @@
<!--
地图线路管理
目录位置三维地图管理 -> 地图线路管理
目录位置三维地图管理 -> 地图线路管理防区管理
功能概述管理所在场景下的区域如雷达防区测试区域
-->
<template>
<div>
<!--查询区域-->
<div class="jeecg-basic-table-form-container">
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol"
:wrapper-col="wrapperCol">
<a-row :gutter="24">
<a-col :lg="8">
<a-form-item label="线路名称" name="name">
<a-input placeholder="请输入线路名称" v-model:value="queryParam.name"></a-input>
<a-form-item label="防区名称" name="name">
<a-input placeholder="请输入防区名称" v-model:value="queryParam.name"></a-input>
</a-form-item>
</a-col>
<a-col :lg="8">
<a-form-item label="所属区域" name="sceneId">
<ApiTreeSelect :api="sceneIdTree" v-model:value="queryParam.sceneId"></ApiTreeSelect>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
<a-col :lg="6">
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
style="margin-left: 8px">重置</a-button>
<!-- <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
@ -46,8 +53,7 @@
</a-menu-item>
</a-menu>
</template>
<a-button
>批量操作
<a-button>批量操作
<Icon icon="mdi:chevron-down"></Icon>
</a-button>
</a-dropdown>
@ -66,7 +72,8 @@
</template>
<template #fileSlot="{ text }">
<span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button>
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small"
@click="downloadFile(text)">下载</a-button>
</template>
</BasicTable>
<!-- 表单区域 -->
@ -75,166 +82,179 @@
</template>
<script lang="ts" name="military-msMapLine" setup>
import { ref, reactive } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { columns } from './MsMapLine.data';
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './MsMapLine.api';
import { downloadFile } from '/@/utils/common/renderUtils';
import MsMapLineModal from './components/MsMapLineModal.vue';
import { BasicForm, ApiSelect, JAreaLinkage, JPopup, JAreaSelect, FormActionType, JCheckbox, JInput, JEllipsis } from '/@/components/Form';
const formRef = ref();
const queryParam = reactive<any>({});
// const toggleSearchStatus = ref<boolean>(false);
const registerModal = ref();
//table
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '地图路线管理',
api: list,
columns,
canResize: false,
useSearchForm: false,
actionColumn: {
width: 120,
fixed: 'right',
},
beforeFetch: (params) => {
return Object.assign(params, queryParam);
},
},
exportConfig: {
name: '地图路线管理',
url: getExportUrl,
params: queryParam,
import { ref, reactive } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { columns } from './MsMapLine.data';
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './MsMapLine.api';
import { downloadFile } from '/@/utils/common/renderUtils';
import MsMapLineModal from './components/MsMapLineModal.vue';
import { BasicForm, ApiSelect, JAreaLinkage, JPopup, JAreaSelect, FormActionType, JCheckbox, JInput, JEllipsis, ApiTreeSelect } from '/@/components/Form';
import { defHttp } from '/@/utils/http/axios';
import { useUserStore } from '/@/store/modules/user';
const userStore = useUserStore();
const formRef = ref();
const queryParam = reactive<any>({});
// const toggleSearchStatus = ref<boolean>(false);
const registerModal = ref();
//
const sceneIdTree = () => defHttp.get<Recordable[]>
({ url: "/military/msMapScene/queryTreeByCode",
params:{
sceneId: userStore.userInfo?.sceneId + "*"
} }).then(res=>{ return [res];})
;
// (params?: Recordable) => defHttp.get({ url: "/military/msMapScene/queryTreeByCode", params }).then(res=>{ return [res];}),
//table
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '地图路线管理',
api: list,
columns,
canResize: false,
useSearchForm: false,
actionColumn: {
width: 120,
fixed: 'right',
},
importConfig: {
url: getImportUrl,
success: handleSuccess,
beforeFetch: (params) => {
//api
// params.sceneId = userStore.userInfo?.sceneId + "*"
return Object.assign(params, queryParam);
},
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] =
tableContext;
const labelCol = reactive({
xs: { span: 24 },
sm: { span: 7 },
});
const wrapperCol = reactive({
xs: { span: 24 },
sm: { span: 16 },
});
},
exportConfig: {
name: '地图路线管理',
url: getExportUrl,
params: queryParam,
},
importConfig: {
url: getImportUrl,
success: handleSuccess,
},
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] =
tableContext;
const labelCol = reactive({
xs: { span: 24 },
sm: { span: 7 },
});
const wrapperCol = reactive({
xs: { span: 24 },
sm: { span: 16 },
});
/**
* 新增事件
*/
function handleAdd() {
registerModal.value.disableSubmit = false;
registerModal.value.add();
}
/**
* 新增事件
*/
function handleAdd() {
registerModal.value.disableSubmit = false;
registerModal.value.add();
}
/**
* 编辑事件
*/
function handleEdit(record: Recordable) {
registerModal.value.disableSubmit = false;
registerModal.value.edit(record);
}
/**
* 编辑事件
*/
function handleEdit(record: Recordable) {
registerModal.value.disableSubmit = false;
registerModal.value.edit(record);
}
/**
* 详情
*/
function handleDetail(record: Recordable) {
registerModal.value.disableSubmit = true;
registerModal.value.edit(record);
}
/**
* 详情
*/
function handleDetail(record: Recordable) {
registerModal.value.disableSubmit = true;
registerModal.value.edit(record);
}
/**
* 删除事件
*/
async function handleDelete(record) {
await deleteOne({ id: record.id }, handleSuccess);
}
/**
* 删除事件
*/
async function handleDelete(record) {
await deleteOne({ id: record.id }, handleSuccess);
}
/**
* 批量删除事件
*/
async function batchHandleDelete() {
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
}
/**
* 批量删除事件
*/
async function batchHandleDelete() {
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
}
/**
* 成功回调
*/
function handleSuccess() {
(selectedRowKeys.value = []) && reload();
}
/**
* 成功回调
*/
function handleSuccess() {
(selectedRowKeys.value = []) && reload();
}
/**
* 操作栏
*/
function getTableAction(record) {
return [
{
label: '编辑',
onClick: handleEdit.bind(null, record),
},
];
}
/**
* 操作栏
*/
function getTableAction(record) {
return [
{
label: '编辑',
onClick: handleEdit.bind(null, record),
},
];
}
/**
* 下拉操作栏
*/
function getDropDownAction(record) {
return [
{
label: '详情',
onClick: handleDetail.bind(null, record),
},
{
label: '删除',
popConfirm: {
title: '是否确认删除',
confirm: handleDelete.bind(null, record),
},
/**
* 下拉操作栏
*/
function getDropDownAction(record) {
return [
{
label: '详情',
onClick: handleDetail.bind(null, record),
},
{
label: '删除',
popConfirm: {
title: '是否确认删除',
confirm: handleDelete.bind(null, record),
},
];
}
},
];
}
/**
* 查询
*/
function searchQuery() {
reload();
}
/**
* 查询
*/
function searchQuery() {
reload();
}
/**
* 重置
*/
function searchReset() {
formRef.value.resetFields();
selectedRowKeys.value = [];
//
reload();
}
/**
* 重置
*/
function searchReset() {
formRef.value.resetFields();
selectedRowKeys.value = [];
//
reload();
}
</script>
<style lang="less" scoped>
.jeecg-basic-table-form-container {
.table-page-search-submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
.jeecg-basic-table-form-container {
.table-page-search-submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
.query-group-cust {
width: calc(50% - 15px);
min-width: 100px !important;
}
.query-group-cust {
width: calc(50% - 15px);
min-width: 100px !important;
}
.query-group-split-cust {
width: 30px;
display: inline-block;
text-align: center;
}
.query-group-split-cust {
width: 30px;
display: inline-block;
text-align: center;
}
}
</style>

24
src/views/military/modules/earthMap/msMapLine/components/MsMapLineForm.vue

@ -3,8 +3,14 @@
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-row>
<a-col :span="12">
<a-form-item label="线路名称" v-bind="validateInfos.name">
<a-input v-model:value="formData.name" placeholder="请输入线路名称" :disabled="disabled"></a-input>
<a-form-item label="所属区域" v-bind="validateInfos.sceneId">
<!-- <a-input v-model:value="formData.sceneId" placeholder="请选择所属区域" :disabled="disabled"></a-input> -->
<ApiTreeSelect :api="sceneIdTree" v-model:value="formData.sceneId" placeholder="请选择所属区域" :disabled="disabled"></ApiTreeSelect>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="防区名称" v-bind="validateInfos.name">
<a-input v-model:value="formData.name" placeholder="请输入防区名称" :disabled="disabled"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
@ -91,12 +97,22 @@ import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { ApiTreeSelect } from '/@/components/Form';
import { getValueType } from '/@/utils';
import { saveOrUpdate } from '../MsMapLine.api';
import { Form } from 'ant-design-vue';
import { ColorPicker } from "vue3-colorpicker";
import "vue3-colorpicker/style.css";
import { useUserStore } from '/@/store/modules/user';
const userStore = useUserStore();
//
const sceneIdTree = () => defHttp.get<Recordable[]>
({ url: "/military/msMapScene/queryTreeByCode",
params:{
sceneId: userStore.userInfo?.sceneId + "*"
} }).then(res=>{ return [res];})
;
const props = defineProps({
formDisabled: { type: Boolean, default: false },
@ -120,6 +136,7 @@ const formData = reactive<Record<string, any>>({
dashStyle: undefined,
cycleFrame: undefined,
positions: '',
sceneId: '',
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
@ -127,7 +144,8 @@ const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
//
const validatorRules = {
name: [{ required: true, message: '请输入线路名称!' },],
sceneId: [{ required: true, message: '请选择所属区域!' },],
name: [{ required: true, message: '请输入防区名称!' },],
materialType: [{ required: true, message: '请选择模型材质类型!' },],
interpolation: [{ required: true, message: '请选择插值方式!' },],
color: [{ required: true, message: '请输入颜色!' },],

16
src/views/military/modules/earthMap/scene/SceneManage.vue

@ -2,17 +2,17 @@
监控站管理
目录位置三维地图管理 -> 监控站管理
功能概述场景管理上帝视角控制飞入视角
功能概述场景管理区域管理上帝视角控制飞入视角
-->
<template>
<div class="mainContainer">
<a-row>
<a-col :span="24" class="container1">
<span class="textdisplay">场景管理</span>
<span class="textdisplay">区域管理</span>
<!-- <a-input class="inputText" v-model:value="filter"></a-input>
<a-button type="primary" class="buttonQuery" @click="getDataSource">查询</a-button> -->
<a-button type="primary" class="addProject" @click="addScene">新增场景</a-button>
<a-button type="primary" class="addProject" @click="addScene">新增区域</a-button>
</a-col>
<hr class="hrDivider" />
<a-col :span="24" style="display: flex">
@ -225,7 +225,7 @@
// width: '6%',
// },
{
title: '场景名称',
title: '区域名称',
dataIndex: 'sceneName',
key: 'sceneName',
width: '10%',
@ -463,7 +463,7 @@
//
dataSource.value = allData;
} else {
message.error('无法获取到场景信息');
message.error('无法获取到区域信息');
}
});
};
@ -575,10 +575,10 @@
//0
// console.log(treeData.value, selectedKeys.value);
if (treeData.value.length > 0 && selectedKeys.value.length == 0) {
message.warn('请先选中场景,再进行新增!');
message.warn('请先选中区域,再进行新增!');
return;
}
title.value = '新增站点';
title.value = '新增区域';
//
beforeDo();
//
@ -593,7 +593,7 @@
const doItem = ref({});
const doSomething = function (item, doType) {
if (treeData.value.length > 0 && !selectedKeys.value) {
message.warn('请先选中场景,再进行修改!');
message.warn('请先选中区域,再进行修改!');
return;
}
if (doType === 'edit') {

14
src/views/military/modules/earthMap/scene/model/sceneInfo/SenceInfo.vue

@ -9,16 +9,16 @@
<slot name="header"></slot>
</a-col>
<a-col :span="11" :offset="1">
<div>站点名称:</div>
<a-input class="inputWidthCss1" v-model:value="subObject.sceneName" placeholder="请输入场景编号名称" :disabled="disable"></a-input>
<div>区域名称:</div>
<a-input class="inputWidthCss1" v-model:value="subObject.sceneName" placeholder="请输入区域编号名称" :disabled="disable"></a-input>
</a-col>
<a-col :span="11" :offset="1">
<div>站点视距:</div>
<div>区域视距:</div>
<a-input-number class="inputWidthCss1" v-model:value="subObject.viewDistance" :disabled="disable" :min="0.5" :step="0.0001"></a-input-number>
</a-col>
<a-col :span="11" :offset="1">
<div>站点类型:</div>
<a-select v-model:value="subObject.sceneType" :disabled="disable" placeholder="请选择站点类型">
<div>区域类型:</div>
<a-select v-model:value="subObject.sceneType" :disabled="disable" placeholder="请选择区域类型">
<template :key="Number(sceneType.value)" v-for="sceneType in sceneTypes">
<a-select-option :value="Number(sceneType.value)">{{ sceneType.text }}</a-select-option>
</template>
@ -58,7 +58,7 @@
<div> <div>相机高度:</div><a-input-number class="inputWidthCss1" v-model:value="subObject.cameraAltitude" :disabled="disable" /> </div>
</a-col>
<a-col :span="11" :offset="1">
<div>站点图标:</div>
<div>区域图标:</div>
<a-upload
name="avatar"
list-type="picture-card"
@ -150,7 +150,7 @@
//
const handleOk = function () {
if (!subObject.value.sceneName || subObject.value.sceneName.length <= 0) {
message.warn('站点名称不能为空!');
message.warn('区域名称不能为空!');
return;
}
let submitUrl = '';

Loading…
Cancel
Save