Merge branch 'master' of http://xny.yj-3d.com:3000/taoge_xiaodi/maintenance_system into ljx
This commit is contained in:
@ -2,7 +2,7 @@
|
||||
<div class="manage-form-container">
|
||||
<!-- 搜索和筛选区域 -->
|
||||
<div class="search-filter-section">
|
||||
<el-row gutter="12" align="middle">
|
||||
<el-row :gutter="12" align="middle">
|
||||
<el-col :span="2">
|
||||
<el-select v-model="searchForm.deviceType" placeholder="设备类型" clearable>
|
||||
<el-option label="全部类型" value="" />
|
||||
|
||||
91
src/views/largeScreen/components/api/index.ts
Normal file
91
src/views/largeScreen/components/api/index.ts
Normal file
@ -0,0 +1,91 @@
|
||||
import { pa } from 'element-plus/es/locale/index.mjs';
|
||||
import request from './request';
|
||||
import request_yewu from '@/utils/request';
|
||||
// 获取树形结构
|
||||
export const getMarkerList = () => {
|
||||
return request({
|
||||
url: '/source/list',
|
||||
method: 'get'
|
||||
});
|
||||
};
|
||||
// 添加其他资源 /source/addOtherSource
|
||||
export const addOtherSource = async (data) => {
|
||||
return await request({
|
||||
url: '/source/addOtherSource',
|
||||
method: 'post',
|
||||
data
|
||||
}).then((res) => {
|
||||
if (res.code == 200)
|
||||
ElMessage({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
});
|
||||
};
|
||||
// 删除资源
|
||||
export const deleteSource = (data) => {
|
||||
return request({
|
||||
url: '/source/delete',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
};
|
||||
//路径规划 /graphhopper/route
|
||||
export const routePlan = (data) => {
|
||||
return request({ url: '/graphhopper/route', method: 'post', data });
|
||||
};
|
||||
// 编辑节点
|
||||
export const updateInfo = (data) => {
|
||||
console.log(data);
|
||||
// 摄像头编辑走业务接口，其他的走地图接口
|
||||
if (data.params && data.params.entityType && data.params.entityType == 'monitor') {
|
||||
const deviceData = {
|
||||
deviceSerial: data.id,
|
||||
deviceName: data.sourceName,
|
||||
detail: JSON.stringify(data.params)
|
||||
};
|
||||
return request_yewu({ url: '/project/big/screen/device', method: 'put', data: deviceData });
|
||||
} else {
|
||||
return request({ url: '/source/update', method: 'post', data });
|
||||
}
|
||||
};
|
||||
//模型库-获取模型类型
|
||||
export const getModelTypeList = () => {
|
||||
return request({
|
||||
url: '/modelLibrary/modelTypeList',
|
||||
method: 'get'
|
||||
});
|
||||
};
|
||||
//根据模型类型查看模型列表
|
||||
export const getModelList = (data: any) => {
|
||||
return request({
|
||||
url: `/modelLibrary/modelList`,
|
||||
method: 'post',
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
data: data
|
||||
});
|
||||
};
|
||||
// 获取资源列表
|
||||
export const getSousceList = (params: any) => {
|
||||
return request({
|
||||
url: `/webSource/list`,
|
||||
method: 'get',
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
params:params
|
||||
})
|
||||
};
|
||||
// 加载地图数据
|
||||
export const loadMapData = (data: any) => {
|
||||
return request({
|
||||
url: `/graphhopper/loadMap`,
|
||||
method: 'post',
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
data,
|
||||
})
|
||||
};
|
||||
61
src/views/largeScreen/components/api/request.ts
Normal file
61
src/views/largeScreen/components/api/request.ts
Normal file
@ -0,0 +1,61 @@
|
||||
import axios, { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
|
||||
import { HttpStatus } from '@/enums/RespEnum';
|
||||
const service = axios.create({
|
||||
baseURL: import.meta.env.VITE_APP_MAP_API,
|
||||
timeout: 50000
|
||||
});
|
||||
const tokenStorage = useStorage<null | string>('Map-Token', null);
|
||||
// 请求拦截器
|
||||
service.interceptors.request.use(
|
||||
(config: InternalAxiosRequestConfig) => {
|
||||
config.headers['Authorization'] = tokenStorage.value; // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||
return config;
|
||||
},
|
||||
(error: any) => {
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
// 响应拦截器
|
||||
service.interceptors.response.use(
|
||||
(res: AxiosResponse) => {
|
||||
// 未设置状态码则默认成功状态
|
||||
const code = res.data.code || HttpStatus.SUCCESS;
|
||||
const getToken = () => {
|
||||
service({
|
||||
url: '/user/login',
|
||||
method: 'post',
|
||||
data: {
|
||||
'username': 'admin',
|
||||
'password': 'admin123'
|
||||
}
|
||||
}).then((res) => {
|
||||
console.log('登录返回值', res);
|
||||
if (res.code == 200) {
|
||||
tokenStorage.value = res.data.token;
|
||||
window.location.reload();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if (code === 401) {
|
||||
getToken();
|
||||
}else if (code == 20000) {
|
||||
getToken();
|
||||
} else {
|
||||
return Promise.resolve(res.data);
|
||||
}
|
||||
},
|
||||
(error: any) => {
|
||||
let { message } = error;
|
||||
if (message == 'Network Error') {
|
||||
message = '后端接口连接异常';
|
||||
} else if (message.includes('timeout')) {
|
||||
message = '系统接口请求超时';
|
||||
} else if (message.includes('Request failed with status code')) {
|
||||
message = '系统接口' + message.substr(message.length - 3) + '异常';
|
||||
}
|
||||
ElMessage({ message: message, type: 'error', duration: 5 * 1000 });
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
export default service;
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="centerPage">
|
||||
<div class="centerPage_list">
|
||||
<div class="centerPage_list" v-if="isFull">
|
||||
<div class="card">
|
||||
<div class="title">今日总发电量</div>
|
||||
<div class="value">
|
||||
@ -89,17 +89,25 @@
|
||||
<div class="target">目标: 12560吨</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="centerPage_map">
|
||||
<div ref="mapRef" class="map-container" style="width: 100%; height: 98%" />
|
||||
<div class="centerPage_map" :style="{height: isFull ? '80%' : '100%'}">
|
||||
<!-- <div ref="mapRef" class="map-container" style="width: 100%; height: 98%" /> -->
|
||||
<newMapEarth :isHide="isFull" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getPowerStationOverview } from '@/api/large';
|
||||
import newMapEarth from './newMap/index.vue';
|
||||
import * as echarts from 'echarts';
|
||||
import china from '@/assets/china.json';
|
||||
const data = ref<any>({});
|
||||
const props = defineProps({
|
||||
isFull: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
});
|
||||
|
||||
// 地图容器引用
|
||||
const mapRef = ref<HTMLDivElement | null>(null);
|
||||
@ -114,116 +122,116 @@ const handleResize = () => {
|
||||
};
|
||||
|
||||
// 初始化地图
|
||||
const initEcharts = () => {
|
||||
if (!mapRef.value) {
|
||||
console.error('未找到地图容器元素');
|
||||
return;
|
||||
}
|
||||
// const initEcharts = () => {
|
||||
// if (!mapRef.value) {
|
||||
// console.error('未找到地图容器元素');
|
||||
// return;
|
||||
// }
|
||||
|
||||
// 注册地图
|
||||
echarts.registerMap('china', china as any);
|
||||
// // 注册地图
|
||||
// echarts.registerMap('china', china as any);
|
||||
|
||||
// 地图数据
|
||||
const mapData: any = [{ name: '田东县', value: 1, itemStyle: { color: '#fff' } }];
|
||||
// // 地图数据
|
||||
// const mapData: any = [{ name: '田东县', value: 1, itemStyle: { color: '#fff' } }];
|
||||
|
||||
// 散点数据
|
||||
// 散点数据 - 使用图片标记并调整名称位置
|
||||
const scatterData: any[] = [
|
||||
{
|
||||
name: '田东光伏智慧生态工地开发项目',
|
||||
value: [107.15, 23.63],
|
||||
// 使用图片作为标记（注意：需替换为你的图片实际路径）
|
||||
symbol: 'diamond',
|
||||
// 标记颜色
|
||||
itemStyle: {
|
||||
color: '#0166d6'
|
||||
},
|
||||
// 图片标记大小（宽, 高）
|
||||
symbolSize: [20, 20],
|
||||
// 名称样式设置
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}', // 显示名称
|
||||
position: 'top', // 名称在图片上方
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
// 可选：添加文字背景以增强可读性
|
||||
backgroundColor: 'rgba(3, 26, 52, 0.7)',
|
||||
padding: [3, 6],
|
||||
borderRadius: 3
|
||||
}
|
||||
}
|
||||
];
|
||||
// 初始化新实例，强制清除缓存
|
||||
myChart = echarts.init(mapRef.value, null, {
|
||||
renderer: 'canvas', // 明确指定渲染器
|
||||
useDirtyRect: false // 禁用脏矩形渲染，避免样式缓存
|
||||
});
|
||||
// 配置项
|
||||
const option: any = {
|
||||
roam: true, // 关键配置：允许鼠标滚轮缩放和拖拽平移
|
||||
geo: {
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
zoom: 5,
|
||||
center: [107.15, 23.63],
|
||||
label: {
|
||||
show: false,
|
||||
color: '#fff'
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#031a34', // 地图区域底色
|
||||
borderColor: '#1e3a6e', // 区域边框颜色
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params: any) {
|
||||
return params.name + (params.value ? `：${params.value}` : '');
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
geoIndex: 0,
|
||||
// 关键：在series级别定义emphasis，优先级最高
|
||||
emphasis: {
|
||||
areaColor: '#fff', // 强制设置hover颜色
|
||||
label: {
|
||||
show: true,
|
||||
color: '#fff'
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#02417e' // 重复设置确保生效
|
||||
}
|
||||
},
|
||||
// 确保没有使用默认样式
|
||||
select: {
|
||||
itemStyle: {
|
||||
areaColor: '#02417e'
|
||||
}
|
||||
},
|
||||
data: mapData
|
||||
},
|
||||
{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: scatterData
|
||||
}
|
||||
]
|
||||
};
|
||||
// // 散点数据
|
||||
// // 散点数据 - 使用图片标记并调整名称位置
|
||||
// const scatterData: any[] = [
|
||||
// {
|
||||
// name: '田东光伏智慧生态工地开发项目',
|
||||
// value: [107.15, 23.63],
|
||||
// // 使用图片作为标记（注意：需替换为你的图片实际路径）
|
||||
// symbol: 'diamond',
|
||||
// // 标记颜色
|
||||
// itemStyle: {
|
||||
// color: '#0166d6'
|
||||
// },
|
||||
// // 图片标记大小（宽, 高）
|
||||
// symbolSize: [20, 20],
|
||||
// // 名称样式设置
|
||||
// label: {
|
||||
// show: true,
|
||||
// formatter: '{b}', // 显示名称
|
||||
// position: 'top', // 名称在图片上方
|
||||
// color: '#fff',
|
||||
// fontSize: 12,
|
||||
// // 可选：添加文字背景以增强可读性
|
||||
// backgroundColor: 'rgba(3, 26, 52, 0.7)',
|
||||
// padding: [3, 6],
|
||||
// borderRadius: 3
|
||||
// }
|
||||
// }
|
||||
// ];
|
||||
// // 初始化新实例，强制清除缓存
|
||||
// myChart = echarts.init(mapRef.value, null, {
|
||||
// renderer: 'canvas', // 明确指定渲染器
|
||||
// useDirtyRect: false // 禁用脏矩形渲染，避免样式缓存
|
||||
// });
|
||||
// // 配置项
|
||||
// const option: any = {
|
||||
// roam: true, // 关键配置：允许鼠标滚轮缩放和拖拽平移
|
||||
// geo: {
|
||||
// type: 'map',
|
||||
// map: 'china',
|
||||
// zoom: 5,
|
||||
// center: [107.15, 23.63],
|
||||
// label: {
|
||||
// show: false,
|
||||
// color: '#fff'
|
||||
// },
|
||||
// itemStyle: {
|
||||
// areaColor: '#031a34', // 地图区域底色
|
||||
// borderColor: '#1e3a6e', // 区域边框颜色
|
||||
// borderWidth: 1
|
||||
// }
|
||||
// },
|
||||
// tooltip: {
|
||||
// trigger: 'item',
|
||||
// formatter: function (params: any) {
|
||||
// return params.name + (params.value ? `：${params.value}` : '');
|
||||
// }
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// type: 'map',
|
||||
// map: 'china',
|
||||
// geoIndex: 0,
|
||||
// // 关键：在series级别定义emphasis，优先级最高
|
||||
// emphasis: {
|
||||
// areaColor: '#fff', // 强制设置hover颜色
|
||||
// label: {
|
||||
// show: true,
|
||||
// color: '#fff'
|
||||
// },
|
||||
// itemStyle: {
|
||||
// areaColor: '#02417e' // 重复设置确保生效
|
||||
// }
|
||||
// },
|
||||
// // 确保没有使用默认样式
|
||||
// select: {
|
||||
// itemStyle: {
|
||||
// areaColor: '#02417e'
|
||||
// }
|
||||
// },
|
||||
// data: mapData
|
||||
// },
|
||||
// {
|
||||
// type: 'scatter',
|
||||
// coordinateSystem: 'geo',
|
||||
// data: scatterData
|
||||
// }
|
||||
// ]
|
||||
// };
|
||||
|
||||
// 设置配置项
|
||||
myChart.setOption(option);
|
||||
};
|
||||
// // 设置配置项
|
||||
// myChart.setOption(option);
|
||||
// };
|
||||
|
||||
// 组件挂载时初始化
|
||||
onMounted(() => {
|
||||
// 确保DOM渲染完成
|
||||
nextTick(() => {
|
||||
initEcharts();
|
||||
// initEcharts();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
});
|
||||
@ -241,6 +249,7 @@ const getDataList = () => {
|
||||
console.log(res);
|
||||
if (res.code == 200) {
|
||||
data.value = res.data;
|
||||
console.log('data.value',data.value);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -35,12 +35,28 @@
|
||||
<img src="@/assets/large/setting.png" alt="设置图标" />
|
||||
<span>管理系统</span>
|
||||
</div>
|
||||
<div class="change" @click="emit('changePage')">
|
||||
<el-icon size="20" v-if="!isFull">
|
||||
<Expand />
|
||||
</el-icon>
|
||||
<el-icon size="20" v-else>
|
||||
<Fold />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onUnmounted, defineEmits } from 'vue';
|
||||
const props = defineProps({
|
||||
isFull: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['changePage']);
|
||||
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||||
const date = ref({
|
||||
ymd: '',
|
||||
|
||||
47
src/views/largeScreen/components/newMap/MapSource.ts
Normal file
47
src/views/largeScreen/components/newMap/MapSource.ts
Normal file
@ -0,0 +1,47 @@
|
||||
import { useTreeNode } from './treeNode';
|
||||
import { initMapData } from './initMapData';
|
||||
import { addOtherSource } from '@/views/largeScreen/components/api';
|
||||
|
||||
export const addMapSource = async ({ type, id, sourceName = '未命名对象', opt = {} }) => {
|
||||
console.log(type, sourceName, opt);
|
||||
const { cusAddNodes } = useTreeNode();
|
||||
// id不存在则重新赋值
|
||||
if (!id) {
|
||||
id = new window['YJ'].Tools().randomString();
|
||||
}
|
||||
// 渲染到地球获取实例参数
|
||||
const options: any = await initMapData(type, opt, null);
|
||||
// 获取选中的节点，当最后一个节点为文件夹则取他的id作为新增节点的父节点Id，否则取该节点的父节点ID
|
||||
const selectedNodes = window['treeObj'].getSelectedNodes();
|
||||
const node = selectedNodes && selectedNodes[selectedNodes.length - 1];
|
||||
console.log(node);
|
||||
let parentId;
|
||||
if (node) parentId = node.sourceType === 'directory' ? node.id : node.parentId;
|
||||
// 某些类型资源删除部分属性
|
||||
if (options) {
|
||||
delete options.host;
|
||||
switch (type) {
|
||||
case 'rendezvous':
|
||||
case 'attackArrow':
|
||||
case 'pincerArrow':
|
||||
delete options.label.ground;
|
||||
delete options.label.position;
|
||||
break;
|
||||
case 'path':
|
||||
delete options.label.text;
|
||||
break;
|
||||
}
|
||||
}
|
||||
const newnode: any = {
|
||||
id: id,
|
||||
sourceName: sourceName,
|
||||
sourceType: type,
|
||||
// isShow: 1,
|
||||
parentId: parentId,
|
||||
// "treeIndex": 0,
|
||||
params: options
|
||||
};
|
||||
console.log('newnode', newnode);
|
||||
addOtherSource(newnode);
|
||||
cusAddNodes(window['treeObj'], newnode.parentId, [newnode]);
|
||||
};
|
||||
239
src/views/largeScreen/components/newMap/bottomBtn/index.vue
Normal file
239
src/views/largeScreen/components/newMap/bottomBtn/index.vue
Normal file
@ -0,0 +1,239 @@
|
||||
<script setup lang="ts">
|
||||
import { addMapSource } from '../MapSource';
|
||||
import { getCurrentInstance } from 'vue';
|
||||
|
||||
// 获取组件实例
|
||||
const instance = getCurrentInstance();
|
||||
const bottomMenuList = ref([
|
||||
{
|
||||
sourceName: '贴地文字',
|
||||
key: 'groundText',
|
||||
sourceType: 'groundText',
|
||||
className: 'public',
|
||||
fun: () => {
|
||||
instance.proxy['$sendChanel']('openDialog', ['addGroundText']);
|
||||
}
|
||||
},
|
||||
{
|
||||
sourceName: '立体文字',
|
||||
key: 'standText',
|
||||
sourceType: 'standText',
|
||||
className: 'public',
|
||||
fun: () => {
|
||||
instance.proxy['$sendChanel']('openDialog', ['addStandText']);
|
||||
}
|
||||
},
|
||||
{
|
||||
sourceName: '点标注',
|
||||
key: 'DrawPoint',
|
||||
sourceType: 'point',
|
||||
className: 'public',
|
||||
fun: () => {
|
||||
drawEntity('DrawPoint', 'point', '点标注');
|
||||
}
|
||||
},
|
||||
{
|
||||
sourceName: '线标注',
|
||||
key: 'DrawPolyline',
|
||||
sourceType: 'line',
|
||||
className: 'public',
|
||||
fun: () => {
|
||||
drawEntity('DrawPolyline', 'line', '线标注');
|
||||
}
|
||||
},
|
||||
{
|
||||
sourceName: '曲线标注',
|
||||
key: 'DrawPolyline',
|
||||
sourceType: 'curve',
|
||||
className: 'public',
|
||||
fun: () => {
|
||||
drawEntity('DrawPolyline', 'curve', '曲线标注', 2, { curve: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
sourceName: '面标注',
|
||||
key: 'DrawPolygon',
|
||||
sourceType: 'panel',
|
||||
className: 'public',
|
||||
fun: () => {
|
||||
drawEntity('DrawPolygon', 'panel', '面标注', 3);
|
||||
}
|
||||
},
|
||||
{
|
||||
sourceName: '圆标注',
|
||||
key: 'DrawCircle',
|
||||
sourceType: 'circle',
|
||||
className: 'public',
|
||||
fun: () => {
|
||||
drawEntity('DrawCircle', 'circle', '圆标注');
|
||||
}
|
||||
},
|
||||
{
|
||||
sourceName: '矩形',
|
||||
key: 'DrawRect',
|
||||
sourceType: 'rectangle',
|
||||
className: 'public',
|
||||
fun: () => {
|
||||
drawEntity('DrawRect', 'rectangle', '矩形', 3);
|
||||
}
|
||||
},
|
||||
{
|
||||
sourceName: '集结地',
|
||||
key: 'DrawAssemble',
|
||||
sourceType: 'rendezvous',
|
||||
className: 'public',
|
||||
fun: () => {
|
||||
drawEntity('DrawAssemble', 'rendezvous', '集结地', 3);
|
||||
}
|
||||
},
|
||||
{
|
||||
sourceName: '箭头',
|
||||
key: 'DrawAttackArrow',
|
||||
sourceType: 'attackArrow',
|
||||
className: 'public',
|
||||
fun: () => {
|
||||
drawEntity('DrawAttackArrow', 'attackArrow', '箭头', 3);
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
sourceName: '钳形箭头',
|
||||
key: 'DrawPincerArrow',
|
||||
sourceType: 'pincerArrow',
|
||||
className: 'public',
|
||||
fun: () => {
|
||||
drawEntity('DrawPincerArrow', 'pincerArrow', '钳形箭头', 5);
|
||||
}
|
||||
}
|
||||
// {
|
||||
// sourceName: "锁定",
|
||||
// key: "lock",
|
||||
// sourceType: "unLock",
|
||||
// className: "public",
|
||||
// },
|
||||
]);
|
||||
const drawEntity = (drawFunc, type, name, leastPointNum = 2, drawFuncParam = undefined) => {
|
||||
console.log('drawEntity');
|
||||
let Draw = new window['YJ'].Draw[drawFunc](window['Earth1'], drawFuncParam);
|
||||
Draw.start(async (a, position) => {
|
||||
console.log(position);
|
||||
// 多个坐标的（>1）
|
||||
let points = ['line', 'curve', 'panel', 'rectangle', 'rendezvous', 'attackArrow', 'pincerArrow'].includes(type);
|
||||
// 返回值不单是坐标的
|
||||
let params = ['circle'].includes(type);
|
||||
if (!position || (points && position.length < leastPointNum)) {
|
||||
if (points)
|
||||
ElMessage({
|
||||
message: '至少需要绘制' + leastPointNum + '个坐标！',
|
||||
type: 'warning'
|
||||
});
|
||||
return;
|
||||
}
|
||||
let id = new window['YJ'].Tools().randomString();
|
||||
let opt = {
|
||||
id,
|
||||
name: name
|
||||
};
|
||||
if (points) {
|
||||
opt['positions'] = position;
|
||||
} else if (params) {
|
||||
opt['center'] = position.center;
|
||||
opt['radius'] = position.radius;
|
||||
} else opt['position'] = position;
|
||||
await addMapSource({
|
||||
type,
|
||||
id,
|
||||
sourceName: name,
|
||||
opt
|
||||
});
|
||||
});
|
||||
};
|
||||
const addMarker = (item: any) => {
|
||||
item.fun();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bottomBtn">
|
||||
<div class="animate__animated bottomMenu">
|
||||
<div class="bottom_box" v-for="(item, i) of bottomMenuList" :key="i" @click="addMarker(item)" :title="item.sourceType">
|
||||
<svg-icon :icon-class="item.sourceType" :size="20" color="rgba(0, 255, 255, 1)"></svg-icon>
|
||||
<div class="span">{{ item.sourceName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bottomBtn {
|
||||
display: flex;
|
||||
.bottomMenu {
|
||||
display: flex;
|
||||
height: 44px;
|
||||
.bottom_box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 6vw;
|
||||
height: 100%;
|
||||
background: url('@/assets/images/map/bottom.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.icon_bj {
|
||||
font-size: 1.1rem;
|
||||
// padding: 5px 20px;
|
||||
position: relative;
|
||||
margin: 0 5px 0;
|
||||
}
|
||||
|
||||
.icon_bj:hover {
|
||||
transition-duration: 0.5s;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
> .span {
|
||||
color: #fff;
|
||||
font-family: 黑体;
|
||||
font-size: 1rem;
|
||||
max-width: 4.5vw;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-family: 'alimamashuheiti';
|
||||
font-weight: 400;
|
||||
text-shadow: 0px 0px 9px #1476ff;
|
||||
box-sizing: border-box;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1550px) {
|
||||
.icon_bj {
|
||||
padding: 5px 15px;
|
||||
margin: 0 5px 4px;
|
||||
}
|
||||
|
||||
.span {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1550px) and (max-width: 1680px) {
|
||||
.icon_bj {
|
||||
padding: 8px 18px;
|
||||
margin: 0 5px 0px;
|
||||
}
|
||||
|
||||
.span {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: url('@/assets/images/map/bottom1.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
367
src/views/largeScreen/components/newMap/dialog/CircleObject.vue
Normal file
367
src/views/largeScreen/components/newMap/dialog/CircleObject.vue
Normal file
@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" :title="title+'属性'" left="180px" top="100px" className="polygon" :closeCallback="closeCallback">
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<div class="col">
|
||||
<span class="label">名称</span>
|
||||
<input class="input" maxlength="40" type="text" v-model="entityOptions.name">
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 60%;">
|
||||
<div class="row">
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label" style="margin-right: 0px;">投影面积:</span>
|
||||
<input class="input input-text" readonly type="text" v-model="area">
|
||||
<el-select v-model="areaUnit">
|
||||
<el-option label="平方米" value="m2"></el-option>
|
||||
<el-option label="平方千米" value="km2"></el-option>
|
||||
<el-option label="亩" value="mu"></el-option>
|
||||
<el-option label="公顷" value="ha"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<el-tabs v-model="activeName">
|
||||
<!-- <el-tab-pane label="属性信息" name="1">
|
||||
<attribute :entityOptions="entityOptions"></attribute>
|
||||
</el-tab-pane> -->
|
||||
<el-tab-pane label="空间信息" name="2">
|
||||
<div class="row">
|
||||
<div class="col height-mode-box">
|
||||
<span class="label" style="flex: 0 0 56px;">高度模式</span>
|
||||
<el-select class="input input-select height-mode-scelect" style="width: 155px;margin-left: 20px"
|
||||
v-model="heightMode" @change="heightModeChange" placeholder="请选择">
|
||||
<el-option v-for="item in heightModeData" :key="item.key" :label="item.name" :value="item.key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">Z值统一增加</span>
|
||||
<div class="input-number input-number-unit-1 height-box" :class="{ 'disabled': heightMode == 2 }">
|
||||
<input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height">
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
<button class="confirm height-confirm" style="margin-left: 5px;" @click="heightConfirm"
|
||||
:disabled="heightMode == 2">应用</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="table spatial-info-table">
|
||||
<div class="table-head">
|
||||
<div class="tr">
|
||||
<div class="th"></div>
|
||||
<div class="th">经度（X）</div>
|
||||
<div class="th">纬度（Y）</div>
|
||||
<div class="th">高度（Z）</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="tr">
|
||||
<div class="td">圆心坐标</div>
|
||||
<div class="td lng align-center" @dblclick="inputDblclick($event, 1, 'lng')">
|
||||
<input class="input" @blur="inputBlurCallBack($event, 1, 'lng', 8)" type="number"
|
||||
v-model="entityOptions.center.lng" min="-180" max="180" v-if="activeTd.index == 1 && activeTd.name == 'lng'">
|
||||
<span style="pointer-events: none;" v-else>{{ entityOptions.center.lng.toFixed(8) }}</span>
|
||||
</div>
|
||||
<div class="td lat align-center" @dblclick="inputDblclick($event, 1, 'lat')">
|
||||
<input class="input" @blur="inputBlurCallBack($event, 1, 'lat', 8)" type="number"
|
||||
v-model="entityOptions.center.lat" min="-180" max="180" v-if="activeTd.index == 1 && activeTd.name == 'lat'">
|
||||
<span style="pointer-events: none;" v-else>{{ entityOptions.center.lat.toFixed(8) }}</span>
|
||||
</div>
|
||||
<div class="td alt align-center" @dblclick="inputDblclick($event, 1, 'alt')">
|
||||
<input class="input" @blur="inputBlurCallBack($event, 1, 'alt', 2)" type="number"
|
||||
v-model="entityOptions.height" min="-9999999" max="999999999"
|
||||
v-if="activeTd.index == 1 && activeTd.name == 'alt'">
|
||||
<span style="pointer-events: none;" v-else>{{ entityOptions.height.toFixed(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="面风格" name="3">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">面颜色</span>
|
||||
<div class="color" ref="colorRef"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">描边颜色</span>
|
||||
<div class="lineColor" ref="lineColorRef"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">描边宽度</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="0" max="99" v-model="entityOptions.lineWidth">
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="标签风格" name="4">
|
||||
<labelStyle :type="title" :entityOptions="entityOptions"></labelStyle>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div style="position: absolute; left: 24px; display: flex;">
|
||||
<button @click="nodeEdit"><svg class="icon-edit">
|
||||
<use xlink:href="#yj-icon-edit"></use>
|
||||
</svg>二次编辑</button>
|
||||
<button style="margin-left: 10px;" @click="translate"><svg class="icon-py">
|
||||
<use xlink:href="#yj-icon-py"></use>
|
||||
</svg>平移</button>
|
||||
</div>
|
||||
<button @click="remove">删除</button>
|
||||
<button @click="confirm">确定</button>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { inject } from "vue";
|
||||
import { updateInfo, deleteSource} from '@/views/largeScreen/components/api'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import Dialog from './baseDialog.vue'
|
||||
// import attribute from './attribute.vue'
|
||||
import labelStyle from './labelStyle.vue'
|
||||
import { useTreeNode } from '../treeNode'
|
||||
|
||||
const { cusUpdateNode, getSelectedNodes, cusRemoveNode } = useTreeNode()
|
||||
|
||||
const title = ref('圆')
|
||||
const baseDialog: any = ref(null);
|
||||
const eventBus: any = inject("bus");
|
||||
const options = ref({});
|
||||
const colorRef = ref(null)
|
||||
const lineColorRef = ref(null)
|
||||
// eventBus.on("openPolygonEdit", () => {
|
||||
// baseDialog.value?.open()
|
||||
// });
|
||||
|
||||
const area = ref(0)
|
||||
const areaUnit = ref('m2')
|
||||
const height = ref(10)
|
||||
const heightModeData = ref([
|
||||
{
|
||||
name: '海拔高度',
|
||||
value: '海拔高度',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
name: '相对地表',
|
||||
value: '相对地表',
|
||||
key: 1
|
||||
},
|
||||
{
|
||||
name: '依附模型',
|
||||
value: '依附模型',
|
||||
key: 2
|
||||
}
|
||||
])
|
||||
|
||||
const activeName = ref('2')
|
||||
const activeTd = ref({
|
||||
index: -1,
|
||||
name: ''
|
||||
})
|
||||
const center = ref({})
|
||||
const heightMode = ref(0)
|
||||
const entityOptions: any = ref({});
|
||||
let originalOptions: any
|
||||
let that: any
|
||||
|
||||
const open = async (id: any, type: any) => {
|
||||
that = window['Earth1'].entityMap.get(id)
|
||||
originalOptions = structuredClone(that.options)
|
||||
entityOptions.value = that
|
||||
heightMode.value = entityOptions.value.heightMode
|
||||
area.value = entityOptions.value.areaByMeter
|
||||
center.value = structuredClone(that.options.center)
|
||||
that.areaChangeCallBack = () => {
|
||||
switch (areaUnit.value) {
|
||||
case 'm2'://平方米
|
||||
area.value = entityOptions.value.areaByMeter
|
||||
break
|
||||
case 'km2'://平方千米
|
||||
area.value = Number((entityOptions.value.areaByMeter / 1000000).toFixed(8))
|
||||
break
|
||||
case 'mu'://亩
|
||||
area.value = Number(
|
||||
(entityOptions.value.areaByMeter / 666.6666667).toFixed(4)
|
||||
)
|
||||
break
|
||||
case 'ha'://公顷
|
||||
area.value = Number((entityOptions.value.areaByMeter / 10000).toFixed(6))
|
||||
break
|
||||
default:
|
||||
area.value = entityOptions.value.areaByMeter
|
||||
}
|
||||
}
|
||||
heightModeChange(heightMode.value)
|
||||
baseDialog.value?.open()
|
||||
|
||||
await nextTick()
|
||||
let colorPicker = new window['YJColorPicker']({
|
||||
el: colorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.color,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: color => {
|
||||
entityOptions.value.color = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.color = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
let linecolorPicker = new window['YJColorPicker']({
|
||||
el: lineColorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.lineColor,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: color => {
|
||||
entityOptions.value.lineColor = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.lineColor = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
}
|
||||
|
||||
const heightModeChange = (val) => {
|
||||
that.heightMode = heightMode.value
|
||||
}
|
||||
|
||||
const heightConfirm = () => {
|
||||
if (entityOptions.value.operate.positionEditing) {
|
||||
that.positionEditing = false
|
||||
entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
|
||||
}
|
||||
else {
|
||||
that.closeNodeEdit(this)
|
||||
that.heightMode = that.heightMode
|
||||
setTimeout(() => {
|
||||
entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
const inputDblclick = async (event, i, anme) => {
|
||||
if(heightMode.value == 2) {
|
||||
return
|
||||
}
|
||||
activeTd.value = {
|
||||
index: i,
|
||||
name: anme
|
||||
}
|
||||
await nextTick()
|
||||
let inputElm = event.target.getElementsByClassName('input')[0]
|
||||
if (inputElm) {
|
||||
inputElm.focus()
|
||||
}
|
||||
}
|
||||
const inputBlurCallBack = (event, i, name, digit = 2) => {
|
||||
activeTd.value = {
|
||||
index: -1,
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
|
||||
const translate = () => {
|
||||
that.openPositionEditing(() => {
|
||||
entityOptions.value.options.center = structuredClone(that.options.center)
|
||||
})
|
||||
}
|
||||
|
||||
const closeCallback = () => {
|
||||
entityOptions.value.originalOptions = structuredClone(originalOptions)
|
||||
that.positionEditing = false
|
||||
entityOptions.value.closeNodeEdit()
|
||||
entityOptions.value.reset()
|
||||
// eventBus.emit("destroyComponent")
|
||||
}
|
||||
|
||||
const nodeEdit = () => {
|
||||
that.nodeEdit((e, center, areaByMeter) => {
|
||||
entityOptions.value.options.center = structuredClone(center)
|
||||
})
|
||||
}
|
||||
|
||||
const confirm = () => {
|
||||
originalOptions = structuredClone(that.options)
|
||||
baseDialog.value?.close()
|
||||
let params = structuredClone(that.options)
|
||||
delete params.host
|
||||
let params2 = {
|
||||
"id": params.id,
|
||||
"sourceName": params.name,
|
||||
"params": params,
|
||||
"isShow": params.show ? 1 : 0,
|
||||
}
|
||||
updateInfo(params2)
|
||||
cusUpdateNode({ "id": params.id, "sourceName": params.name, "params": JSON.stringify(params) })
|
||||
}
|
||||
const close = () => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
|
||||
const remove = () => {
|
||||
close()
|
||||
ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
let selectNodes = getSelectedNodes(window['treeObj'])
|
||||
let source_ids = cusRemoveNode(window['treeObj'], selectNodes)
|
||||
const res = await deleteSource({ ids: source_ids })
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
that.remove()
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.msg || '删除失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
})
|
||||
}
|
||||
|
||||
watch(
|
||||
() => areaUnit.value,
|
||||
(val) => {
|
||||
if ((entityOptions.value.areaByMeter || entityOptions.value.areaByMeter == 0) && that) {
|
||||
that.areaChangeCallBack()
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
149
src/views/largeScreen/components/newMap/dialog/FlyRoam.vue
Normal file
149
src/views/largeScreen/components/newMap/dialog/FlyRoam.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<script setup lang="ts">
|
||||
import Dialog from './baseDialog.vue';
|
||||
|
||||
import { ref, reactive, getCurrentInstance } from 'vue';
|
||||
import { addOtherSource } from '@/views/largeScreen/components/api';
|
||||
import { useTreeNode } from '../treeNode';
|
||||
const { cusAddNodes } = useTreeNode();
|
||||
let show: any = ref(false);
|
||||
const baseDialog: any = ref(null);
|
||||
let flyRoam: any = reactive([]);
|
||||
// 获取组件实例
|
||||
const instance = getCurrentInstance();
|
||||
instance.proxy['$recvChanel']('flyRoamDialog', () => {
|
||||
show.value = true;
|
||||
baseDialog.value?.open();
|
||||
setTimeout(() => {
|
||||
flyRoam = window['YJ'].Global.FlyRoam.open(window['Earth1'], { repeat: Infinity }, {}, draw);
|
||||
}, 100);
|
||||
});
|
||||
const draw = (data) => {
|
||||
if (data.points.length != 0) {
|
||||
let selectedNodes = window['treeObj'].getSelectedNodes();
|
||||
let node = selectedNodes && selectedNodes[selectedNodes.length - 1];
|
||||
let parentId;
|
||||
if (node) {
|
||||
if (node.sourceType === 'directory') {
|
||||
parentId = node.id;
|
||||
} else {
|
||||
parentId = node.parentId;
|
||||
}
|
||||
}
|
||||
let id = new window['YJ'].Tools().randomString();
|
||||
let paramsData: any = {
|
||||
params: data,
|
||||
id,
|
||||
sourceName: '漫游路径',
|
||||
sourceType: 'roam',
|
||||
parentId: parentId
|
||||
};
|
||||
|
||||
addOtherSource(paramsData);
|
||||
paramsData.isShow = true;
|
||||
paramsData.params = JSON.stringify(paramsData.params);
|
||||
cusAddNodes(window['treeObj'], paramsData.parentId, [paramsData]);
|
||||
baseDialog.value?.close();
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '请添加数据',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
|
||||
console.log(data);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog ref="baseDialog" class="fly-roam" title="飞行漫游" width="382px" left="180px" top="100px" :closeCallback="closeCallBack">
|
||||
<template #content v-if="show">
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 205px">
|
||||
<span class="label">名称</span>
|
||||
<input class="input" type="text" name="name" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="repeat"
|
||||
style="width: 16px; line-height: 15px; height: 15px; cursor: pointer; width: auto; margin-right: 5px"
|
||||
/>
|
||||
<span class="label">循环播放</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button class="afreshPlay">
|
||||
<svg class="icon-play"><use xlink:href="#yj-icon-play"></use></svg>全局播放
|
||||
</button>
|
||||
<button class="cease" style="margin-left: 10px">
|
||||
<svg-icon name="stop" :size="12" color="rgba(255, 255, 255, 1)"></svg-icon>结束播放
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 200px">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="isTotalTime"
|
||||
style="width: 16px; line-height: 15px; height: 15px; cursor: pointer; width: auto; margin-right: 5px"
|
||||
/>
|
||||
<span class="label">设置总时长</span>
|
||||
<div class="input-number input-number-unit-3">
|
||||
<input class="input total-time" type="number" title="" min="0" max="999999.99" step="0.01" name="totalTime" value="0" />
|
||||
<span class="unit" style="top: 6px">s</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-head">
|
||||
<div class="tr">
|
||||
<div class="th">序号</div>
|
||||
<div class="th">时长(s)</div>
|
||||
<div class="th">操作</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="table-empty">
|
||||
<div class="empty-img"></div>
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div style="position: absolute; left: 24px; display: flex">
|
||||
<button class="add-point">
|
||||
<svg class="icon-add"><use xlink:href="#yj-icon-add"></use></svg>增加视点
|
||||
</button>
|
||||
</div>
|
||||
<button class="saveRoam" @click="draw">保存</button>
|
||||
<button @click="close">取消</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.afreshPlay {
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
|
||||
linear-gradient(180deg, rgba(27, 248, 195, 0.2) 0%, rgba(27, 248, 195, 0) 100%) !important;
|
||||
border: 1px solid rgba(27, 248, 195, 1) !important;
|
||||
}
|
||||
.cease {
|
||||
background: linear-gradient(180deg, rgba(241, 108, 85, 0.2) 0%, rgba(241, 108, 85, 0) 100%), rgba(0, 0, 0, 0.5) !important;
|
||||
border: 1px solid rgba(241, 108, 85, 1) !important;
|
||||
}
|
||||
::v-deep .content input.YJ-custom-checkbox[type='checkbox'] {
|
||||
border: 1px solid rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
258
src/views/largeScreen/components/newMap/dialog/RoutePlanning.vue
Normal file
258
src/views/largeScreen/components/newMap/dialog/RoutePlanning.vue
Normal file
@ -0,0 +1,258 @@
|
||||
<script setup lang="ts">
|
||||
import Dialog from './baseDialog.vue';
|
||||
import { ref, reactive, getCurrentInstance } from 'vue';
|
||||
import { routePlan,getSousceList,loadMapData } from '@/views/largeScreen/components/api';
|
||||
// 获取组件实例
|
||||
const instance = getCurrentInstance();
|
||||
const baseDialog: any = ref(null);
|
||||
let svgHover: any = reactive([false, false]);
|
||||
//属性
|
||||
let startLng: any = ref(null);
|
||||
let startLat: any = ref(null);
|
||||
let endLng: any = ref(null);
|
||||
let endLat: any = ref(null);
|
||||
|
||||
var routePlanning: any = reactive([]);
|
||||
|
||||
instance.proxy['$recvChanel']('routePlanningDialog', () => {
|
||||
baseDialog.value?.open();
|
||||
startLng.value = null;
|
||||
startLat.value = null;
|
||||
endLng.value = null;
|
||||
endLat.value = null;
|
||||
setTimeout(() => {
|
||||
//加载路网数据
|
||||
let host = import.meta.env.VITE_APP_MAP_API; // 'http://192.168.110.232:8848';
|
||||
// if (!window['routePlanning']) {
|
||||
routePlanning = new window['YJ'].Obj.RoutePlanning(window['Earth1'], {
|
||||
gps: false,
|
||||
host
|
||||
});
|
||||
|
||||
window['routePlanning'] = routePlanning;
|
||||
|
||||
getPbf();
|
||||
// routePlanning.Dialog.queryCallBack = (v) => {
|
||||
// routePlan({
|
||||
// startLng: startLng.value,
|
||||
// startLat: startLat.value,
|
||||
// endLng: endLng.value,
|
||||
// endLat: endLat.value,
|
||||
// waypoints: []
|
||||
// }).then((res) => {
|
||||
// console.log('查询路线API的结果', res);
|
||||
// if (res.code == 200) routePlanning.createRoute(res.data.pathPoints);
|
||||
// else {
|
||||
// console.log(instance);
|
||||
// instance.proxy['$message'].warning(res['message']);
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
// } else routePlanning = window['routePlanning'];
|
||||
}, 200);
|
||||
});
|
||||
|
||||
// 获取pbf数据
|
||||
const getPbf = async () => {
|
||||
let res = await getSousceList({type:'pbf'})
|
||||
console.log(res);
|
||||
if (res.code == 200) {
|
||||
let pbfurl = res.data[1].path
|
||||
let res2 = await loadMapData({path:pbfurl})
|
||||
}
|
||||
}
|
||||
|
||||
// 拾取起点坐标
|
||||
const pickStartPos = () => {
|
||||
routePlanning.pickStartPos((position) => {
|
||||
console.log(position, 'position');
|
||||
startLng.value = position.lng;
|
||||
startLat.value = position.lat;
|
||||
});
|
||||
};
|
||||
// 拾取终点坐标
|
||||
const pickEndPos = () => {
|
||||
routePlanning.pickEndPos((position) => {
|
||||
endLng.value = position.lng;
|
||||
endLat.value = position.lat;
|
||||
});
|
||||
};
|
||||
const changeStartLng = () => {
|
||||
routePlanning.startLng = startLng.value;
|
||||
};
|
||||
const inputStartLng = () => {
|
||||
let dom: any = document.getElementById('startLng');
|
||||
if (startLng.value < dom.min * 1) {
|
||||
startLng.value = dom.min * 1;
|
||||
} else if (startLng.value > dom.max * 1) {
|
||||
startLng.value = dom.max * 1;
|
||||
}
|
||||
};
|
||||
const changeStartLat = () => {
|
||||
routePlanning.startLat = startLat.value;
|
||||
};
|
||||
const inputStartLat = () => {
|
||||
let dom: any = document.getElementById('startLat');
|
||||
if (startLat.value < dom.min * 1) {
|
||||
startLat.value = dom.min * 1;
|
||||
} else if (startLat.value > dom.max * 1) {
|
||||
startLat.value = dom.max * 1;
|
||||
}
|
||||
};
|
||||
const changeEndLng = () => {
|
||||
routePlanning.endLng = endLng.value;
|
||||
};
|
||||
const inputEndLng = () => {
|
||||
let dom: any = document.getElementById('endLng');
|
||||
if (endLng.value < dom.min * 1) {
|
||||
endLng.value = dom.min * 1;
|
||||
} else if (endLng.value > dom.max * 1) {
|
||||
endLng.value = dom.max * 1;
|
||||
}
|
||||
};
|
||||
const changeEndLat = () => {
|
||||
routePlanning.endLat = endLat.value;
|
||||
};
|
||||
const inputEndLat = () => {
|
||||
let dom: any = document.getElementById('endLat');
|
||||
if (endLat.value < dom.min * 1) {
|
||||
endLat.value = dom.min * 1;
|
||||
} else if (endLat.value > dom.max * 1) {
|
||||
endLat.value = dom.max * 1;
|
||||
}
|
||||
};
|
||||
// 查询路线
|
||||
const routeQuery = () => {
|
||||
routePlan({
|
||||
startLng: startLng.value,
|
||||
startLat: startLat.value,
|
||||
endLng: endLng.value,
|
||||
endLat: endLat.value,
|
||||
waypoints: []
|
||||
}).then((res) => {
|
||||
console.log('查询路线API的结果', res);
|
||||
if (res.code == 200){
|
||||
routePlanning.createRoute(res.data.pathPoints);
|
||||
}else{
|
||||
instance.proxy['$message'].warning(res['message']);
|
||||
}
|
||||
});
|
||||
};
|
||||
const close = (e) => {
|
||||
clearRoute();
|
||||
// baseDialog.value?.close();
|
||||
};
|
||||
const clearRoute = () => {
|
||||
console.log('clearRoute');
|
||||
routePlanning.clear();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog :closeCallback="close" ref="baseDialog" title="路径规划" left="180px" top="100px" width="527px" class="RoutePlanning">
|
||||
<template #content>
|
||||
<!-- <div class="row" style="align-items: flex-start">-->
|
||||
<!-- <div class="col start-col">-->
|
||||
<!-- <button class="crossPoint" @mouseenter="svgHover[0] = true" @mouseleave="svgHover[0] = false">-->
|
||||
<!-- <svg-icon class-name="add" :size="12" :color="svgHover[0] ? 'rgba(0, 255, 255, 1)' : 'rgba(255, 255, 255, 1)'"></svg-icon>-->
|
||||
<!-- 途径点-->
|
||||
<!-- </button>-->
|
||||
<!-- <button class="crossPoint" @mouseenter="svgHover[1] = true" @mouseleave="svgHover[1] = false" style="margin-left: 10px">-->
|
||||
<!-- <svg-icon class-name="add" :size="12" :color="svgHover[1] ? 'rgba(0, 255, 255, 1)' : 'rgba(255, 255, 255, 1)'"></svg-icon>避让点-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<div class="row">
|
||||
<p class="lable-left-line">路径规划</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 50px">
|
||||
<span class="label">起点</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">经度</span>
|
||||
<input
|
||||
class="input"
|
||||
id="startLng"
|
||||
type="number"
|
||||
title=""
|
||||
min="-180"
|
||||
max="180"
|
||||
@model="startLng"
|
||||
v-model="startLng"
|
||||
@change="changeStartLng"
|
||||
@input="inputStartLng"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">纬度</span>
|
||||
<input
|
||||
class="input"
|
||||
id="startLat"
|
||||
type="number"
|
||||
title=""
|
||||
min="-90"
|
||||
max="90"
|
||||
@model="startLat"
|
||||
v-model="startLat"
|
||||
@change="changeStartLat"
|
||||
@input="inputStartLat"
|
||||
/>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 80px">
|
||||
<button class="end-pick-btn" @click="pickStartPos" style="margin-left: 10px">拾取</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 50px">
|
||||
<span class="label">终点</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">经度</span>
|
||||
<input
|
||||
class="input"
|
||||
id="endLng"
|
||||
type="number"
|
||||
title=""
|
||||
min="-180"
|
||||
max="180"
|
||||
@model="endLng"
|
||||
v-model="endLng"
|
||||
@change="changeEndLng"
|
||||
@input="inputEndLng"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">纬度</span>
|
||||
<input
|
||||
class="input"
|
||||
id="endLat"
|
||||
type="number"
|
||||
title=""
|
||||
min="-180"
|
||||
max="180"
|
||||
@model="endLat"
|
||||
v-model="endLat"
|
||||
@change="changeEndLat"
|
||||
@input="inputEndLat"
|
||||
/>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 80px">
|
||||
<button class="end-pick-btn" @click="pickEndPos" style="margin-left: 10px">拾取</button>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button id="routeQuery" @click="routeQuery">
|
||||
<svg class="icon-query"><use xlink:href="#yj-icon-query"></use></svg>查询
|
||||
</button>
|
||||
<button id="clearRoute" @click="clearRoute">
|
||||
<svg class="icon-route"><use xlink:href="#yj-icon-route"></use></svg>清除路线
|
||||
</button>
|
||||
<button @click="close">取消</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" title="贴地文字" left="calc(50% - 160px)" top="calc(50% - 120px)">
|
||||
<template #content>
|
||||
<textarea style="height: 76px; width: 270px" v-model="text"></textarea>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="confirm">确定</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, inject } from 'vue';
|
||||
import { addOtherSource } from '@/views/largeScreen/components/api';
|
||||
import Dialog from './baseDialog.vue';
|
||||
import { initMapData } from '../initMapData';
|
||||
import { useTreeNode } from '../treeNode';
|
||||
|
||||
const { cusAddNodes } = useTreeNode();
|
||||
|
||||
const baseDialog: any = ref(null);
|
||||
const eventBus: any = inject('bus');
|
||||
const text = ref('');
|
||||
// eventBus.on('openStandTextAdd', () => {
|
||||
// baseDialog.value?.open();
|
||||
// });
|
||||
const open = () => {
|
||||
baseDialog.value?.open();
|
||||
};
|
||||
const confirm = () => {
|
||||
baseDialog.value?.close();
|
||||
let name = text.value;
|
||||
text.value = '';
|
||||
let Draw = new window['YJ'].Draw.DrawPolyline(window['Earth1'], { number: 2 });
|
||||
Draw.start(async (a, positions) => {
|
||||
if (!positions || positions.length < 2) {
|
||||
return;
|
||||
}
|
||||
let id = new window['YJ'].Tools().randomString();
|
||||
let options: any = await initMapData(
|
||||
'groundText',
|
||||
{
|
||||
id: id,
|
||||
text: name,
|
||||
positions: positions
|
||||
},
|
||||
null
|
||||
);
|
||||
delete options.host;
|
||||
delete options.positions;
|
||||
let selectedNodes = window['treeObj'].getSelectedNodes();
|
||||
let node = selectedNodes && selectedNodes[selectedNodes.length - 1];
|
||||
let parentId;
|
||||
if (node) {
|
||||
if (node.sourceType === 'directory') {
|
||||
parentId = node.id;
|
||||
} else {
|
||||
parentId = node.parentId;
|
||||
}
|
||||
}
|
||||
let params: any = {
|
||||
id: id,
|
||||
sourceName: name,
|
||||
sourceType: 'groundText',
|
||||
parentId: parentId,
|
||||
// "treeIndex": 0,
|
||||
params: options
|
||||
};
|
||||
addOtherSource(params);
|
||||
params.params = JSON.stringify(params.params);
|
||||
params.isShow = true;
|
||||
cusAddNodes(window['treeObj'], params.parentId, [params]);
|
||||
});
|
||||
};
|
||||
defineExpose({
|
||||
open
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" title="立体文字" left="calc(50% - 160px)" top="calc(50% - 120px)">
|
||||
<template #content>
|
||||
<textarea style="height: 76px; width: 270px" v-model="text"></textarea>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="confirm">确定</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, inject } from 'vue';
|
||||
import { addOtherSource } from '@/views/largeScreen/components/api';
|
||||
import Dialog from './baseDialog.vue';
|
||||
import { initMapData } from '../initMapData';
|
||||
import { useTreeNode } from '../treeNode';
|
||||
|
||||
const { cusAddNodes } = useTreeNode();
|
||||
const eventBus: any = inject('bus');
|
||||
|
||||
const baseDialog: any = ref(null);
|
||||
const text = ref('');
|
||||
|
||||
const open = () => {
|
||||
baseDialog.value?.open();
|
||||
};
|
||||
const confirm = () => {
|
||||
baseDialog.value?.close();
|
||||
let name = text.value;
|
||||
text.value = '';
|
||||
let Draw = new window['YJ'].Draw.DrawPolyline(window['Earth1']);
|
||||
Draw.start(async (a, positions) => {
|
||||
if (!positions || positions.length < 2) {
|
||||
return;
|
||||
}
|
||||
let id = new window['YJ'].Tools().randomString();
|
||||
let options: any = await initMapData(
|
||||
'standText',
|
||||
{
|
||||
id: id,
|
||||
name: name,
|
||||
text: name,
|
||||
positions: positions
|
||||
},
|
||||
null
|
||||
);
|
||||
delete options.host;
|
||||
console.log('options', options);
|
||||
let selectedNodes = window['treeObj'].getSelectedNodes();
|
||||
let node = selectedNodes && selectedNodes[selectedNodes.length - 1];
|
||||
let parentId;
|
||||
if (node) {
|
||||
if (node.sourceType === 'directory') {
|
||||
parentId = node.id;
|
||||
} else {
|
||||
parentId = node.parentId;
|
||||
}
|
||||
}
|
||||
|
||||
let params: any = {
|
||||
id: id,
|
||||
sourceName: name,
|
||||
sourceType: 'standText',
|
||||
parentId: parentId,
|
||||
// "treeIndex": 0,
|
||||
params: options
|
||||
};
|
||||
addOtherSource(params);
|
||||
params.params = JSON.stringify(params.params);
|
||||
params.isShow = true;
|
||||
cusAddNodes(window['treeObj'], params.parentId, [params]);
|
||||
});
|
||||
};
|
||||
defineExpose({
|
||||
open
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
375
src/views/largeScreen/components/newMap/dialog/attackArrow.vue
Normal file
375
src/views/largeScreen/components/newMap/dialog/attackArrow.vue
Normal file
@ -0,0 +1,375 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" :title="title + '属性'" left="180px" top="100px" className="attackArrow"
|
||||
:closeCallback="closeCallback">
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<div class="col">
|
||||
<span class="label">名称</span>
|
||||
<input class="input" maxlength="40" type="text" v-model="entityOptions.name">
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 60%;">
|
||||
<div class="row">
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label" style="margin-right: 0px;">投影面积:</span>
|
||||
<input class="input input-text" readonly type="text" v-model="area">
|
||||
<el-select v-model="areaUnit">
|
||||
<el-option label="平方米" value="m2"></el-option>
|
||||
<el-option label="平方千米" value="km2"></el-option>
|
||||
<el-option label="亩" value="mu"></el-option>
|
||||
<el-option label="公顷" value="ha"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">动画时长</span>
|
||||
<div class="input-number input-number-unit-3">
|
||||
<input class="input" type="number" title="" min="500" max="9999999" v-model="entityOptions.spreadTime">
|
||||
<span class="unit">ms</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 60%;">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">动画</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.spreadState">
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">动画重复</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.loop">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<el-tabs v-model="activeName">
|
||||
<!-- <el-tab-pane label="属性信息" name="1">
|
||||
<attribute :entityOptions="entityOptions"></attribute>
|
||||
</el-tab-pane> -->
|
||||
<el-tab-pane label="空间信息" name="2">
|
||||
<div class="row">
|
||||
<div class="col height-mode-box">
|
||||
<span class="label" style="flex: 0 0 56px;">高度模式</span>
|
||||
<el-select class="input input-select height-mode-scelect" style="width: 155px;margin-left: 20px"
|
||||
v-model="heightMode" @change="heightModeChange" placeholder="请选择">
|
||||
<el-option v-for="item in heightModeData" :key="item.key" :label="item.name" :value="item.key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">Z值统一增加</span>
|
||||
<div class="input-number input-number-unit-1 height-box" :class="{ 'disabled': heightMode == 2 }">
|
||||
<input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height">
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
<button class="confirm height-confirm" style="margin-left: 5px;" @click="heightConfirm"
|
||||
:disabled="heightMode == 2">应用</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="table spatial-info-table">
|
||||
<div class="table-head">
|
||||
<div class="tr">
|
||||
<div class="th"></div>
|
||||
<div class="th">经度（X）</div>
|
||||
<div class="th">纬度（Y）</div>
|
||||
<div class="th">高度（Z）</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="tr" v-for="(item, i) in entityOptions.options.positions" :key="i">
|
||||
<div class="td">{{ i + 1 }}</div>
|
||||
<div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')">
|
||||
<input class="input" @blur="inputBlurCallBack($event, i, 'lng', 8)" type="number"
|
||||
v-model="item.lng" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lng'">
|
||||
<span style="pointer-events: none;" v-else>{{ (item.lng).toFixed(8) }}</span>
|
||||
</div>
|
||||
<div class="td lat align-center" @dblclick="inputDblclick($event, i, 'lat')">
|
||||
<input class="input" @blur="inputBlurCallBack($event, i, 'lat', 8)" type="number"
|
||||
v-model="item.lat" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lat'">
|
||||
<span style="pointer-events: none;" v-else>{{ (item.lat).toFixed(8) }}</span>
|
||||
</div>
|
||||
<div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')">
|
||||
<input class="input" @blur="inputBlurCallBack($event, i, 'alt', 2)" type="number"
|
||||
v-model="entityOptions.height" min="-9999999" max="999999999"
|
||||
v-if="activeTd.index == i && activeTd.name == 'alt'">
|
||||
<span style="pointer-events: none;" v-else>{{ (entityOptions.height).toFixed(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="面风格" name="3">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">面颜色</span>
|
||||
<div class="color" ref="colorRef"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">描边颜色</span>
|
||||
<div class="lineColor" ref="lineColorRef"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">描边宽度</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="0" max="99" v-model="entityOptions.lineWidth">
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="标签风格" name="4">
|
||||
<labelStyle :type="title" :entityOptions="entityOptions"></labelStyle>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div style="position: absolute; left: 24px; display: flex;">
|
||||
<button @click="nodeEdit"><svg class="icon-edit">
|
||||
<use xlink:href="#yj-icon-edit"></use>
|
||||
</svg>二次编辑</button>
|
||||
<button style="margin-left: 10px;" @click="translate"><svg class="icon-py">
|
||||
<use xlink:href="#yj-icon-py"></use>
|
||||
</svg>平移</button>
|
||||
</div>
|
||||
<button @click="remove">删除</button>
|
||||
<button @click="confirm">确定</button>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { inject } from "vue";
|
||||
import { updateInfo } from '@/views/largeScreen/components/api';
|
||||
import Dialog from './baseDialog.vue'
|
||||
import attribute from './attribute.vue'
|
||||
import labelStyle from './labelStyle.vue'
|
||||
import { useTreeNode } from '../treeNode'
|
||||
|
||||
const { cusUpdateNode } = useTreeNode()
|
||||
|
||||
const title = ref('箭头')
|
||||
const baseDialog: any = ref(null);
|
||||
const eventBus: any = inject("bus");
|
||||
const options = ref({});
|
||||
const colorRef = ref(null)
|
||||
const lineColorRef = ref(null)
|
||||
// eventBus.on("openPolygonEdit", () => {
|
||||
// baseDialog.value?.open()
|
||||
// });
|
||||
|
||||
const area = ref(0)
|
||||
const areaUnit = ref('m2')
|
||||
const height = ref(10)
|
||||
const heightModeData = ref([
|
||||
{
|
||||
name: '海拔高度',
|
||||
value: '海拔高度',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
name: '相对地表',
|
||||
value: '相对地表',
|
||||
key: 1
|
||||
},
|
||||
{
|
||||
name: '依附模型',
|
||||
value: '依附模型',
|
||||
key: 2
|
||||
}
|
||||
])
|
||||
|
||||
const activeName = ref('2')
|
||||
const activeTd = ref({
|
||||
index: -1,
|
||||
name: ''
|
||||
})
|
||||
const positions = ref([])
|
||||
const heightMode = ref(0)
|
||||
const entityOptions: any = ref({});
|
||||
let originalOptions: any
|
||||
let that: any
|
||||
|
||||
const open = async (id: any, type: any) => {
|
||||
if(type && type === 'pincerArrow') {
|
||||
title.value = '双箭头'
|
||||
}
|
||||
that = window['Earth1'].entityMap.get(id)
|
||||
originalOptions = structuredClone(that.options)
|
||||
entityOptions.value = that
|
||||
heightMode.value = entityOptions.value.heightMode
|
||||
area.value = entityOptions.value.areaByMeter
|
||||
positions.value = structuredClone(that.options.positions)
|
||||
that.areaChangeCallBack = () => {
|
||||
switch (areaUnit.value) {
|
||||
case 'm2'://平方米
|
||||
area.value = entityOptions.value.areaByMeter
|
||||
break
|
||||
case 'km2'://平方千米
|
||||
area.value = Number((entityOptions.value.areaByMeter / 1000000).toFixed(8))
|
||||
break
|
||||
case 'mu'://亩
|
||||
area.value = Number(
|
||||
(entityOptions.value.areaByMeter / 666.6666667).toFixed(4)
|
||||
)
|
||||
break
|
||||
case 'ha'://公顷
|
||||
area.value = Number((entityOptions.value.areaByMeter / 10000).toFixed(6))
|
||||
break
|
||||
default:
|
||||
area.value = entityOptions.value.areaByMeter
|
||||
}
|
||||
}
|
||||
let spreadState = entityOptions.value.spreadState
|
||||
heightModeChange(heightMode.value)
|
||||
setTimeout(() => {
|
||||
entityOptions.value.spreadState = spreadState
|
||||
}, 50);
|
||||
baseDialog.value?.open()
|
||||
|
||||
await nextTick()
|
||||
let colorPicker = new window['YJColorPicker']({
|
||||
el: colorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.color,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: color => {
|
||||
entityOptions.value.color = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.color = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
let linecolorPicker = new window['YJColorPicker']({
|
||||
el: lineColorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.lineColor,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: color => {
|
||||
entityOptions.value.lineColor = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.lineColor = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
}
|
||||
|
||||
const heightModeChange = (val) => {
|
||||
that.heightMode = heightMode.value
|
||||
}
|
||||
|
||||
const heightConfirm = () => {
|
||||
if (entityOptions.value.operate.positionEditing) {
|
||||
that.positionEditing = false
|
||||
entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
|
||||
}
|
||||
else {
|
||||
that.closeNodeEdit(this)
|
||||
that.heightMode = that.heightMode
|
||||
setTimeout(() => {
|
||||
entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
const inputDblclick = async (event, i, anme) => {
|
||||
if (heightMode.value == 2) {
|
||||
return
|
||||
}
|
||||
activeTd.value = {
|
||||
index: i,
|
||||
name: anme
|
||||
}
|
||||
await nextTick()
|
||||
let inputElm = event.target.getElementsByClassName('input')[0]
|
||||
if (inputElm) {
|
||||
inputElm.focus()
|
||||
}
|
||||
}
|
||||
const inputBlurCallBack = (event, i, name, digit = 2) => {
|
||||
activeTd.value = {
|
||||
index: -1,
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
|
||||
const translate = () => {
|
||||
entityOptions.value.spreadState = false
|
||||
that.openPositionEditing(() => {
|
||||
entityOptions.value.options.positions = structuredClone(that.options.positions)
|
||||
})
|
||||
}
|
||||
|
||||
const closeCallback = () => {
|
||||
entityOptions.value.originalOptions = structuredClone(originalOptions)
|
||||
that.positionEditing = false
|
||||
entityOptions.value.closeNodeEdit()
|
||||
entityOptions.value.reset()
|
||||
// eventBus.emit("destroyComponent")
|
||||
}
|
||||
|
||||
const nodeEdit = () => {
|
||||
entityOptions.value.spreadState = false
|
||||
that.nodeEdit((e, positions, areaByMeter) => {
|
||||
entityOptions.value.options.positions = structuredClone(positions)
|
||||
})
|
||||
}
|
||||
|
||||
const confirm = () => {
|
||||
originalOptions = structuredClone(that.options)
|
||||
let params = structuredClone(that.options)
|
||||
baseDialog.value?.close()
|
||||
delete params.host
|
||||
let params2 = {
|
||||
"id": params.id,
|
||||
"sourceName": params.name,
|
||||
"params": params,
|
||||
"isShow": params.show ? 1 : 0,
|
||||
}
|
||||
updateInfo(params2)
|
||||
cusUpdateNode({ "id": params.id, "sourceName": params.name, "params": JSON.stringify(params) })
|
||||
}
|
||||
const close = () => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => areaUnit.value,
|
||||
(val) => {
|
||||
if ((entityOptions.value.areaByMeter || entityOptions.value.areaByMeter == 0) && that) {
|
||||
that.areaChangeCallBack()
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const remove = () => {
|
||||
that.remove()
|
||||
close()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
439
src/views/largeScreen/components/newMap/dialog/attribute.vue
Normal file
439
src/views/largeScreen/components/newMap/dialog/attribute.vue
Normal file
@ -0,0 +1,439 @@
|
||||
<template>
|
||||
<div class="attribute">
|
||||
<div class="row">
|
||||
<div class="col attribute-select-box">
|
||||
<span class="label" style="line-height: 32px">内容类型</span>
|
||||
<el-select style="width: 175px" v-model="attributeType" @change="attributeChange" placeholder="请选择">
|
||||
<el-option v-for="item in attributeSelect" :key="item.key" :label="item.name" :value="item.key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="attribute-content attribute-content-richText" v-show="attributeType === 'richText'">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">编辑内容</span>
|
||||
<button @click="openRichTextEditor">打开文本编辑器</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row attribute-content attribute-content-link" v-show="attributeType === 'link'">
|
||||
<div class="col">
|
||||
<span class="label">添加链接</span>
|
||||
<div style="flex: 1; position: relative">
|
||||
<input class="input link_add" type="text" v-model="addlinkInput" />
|
||||
<i class="link_add_btn" @click="_addLink"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="attribute-content attribute-content-link" v-show="attributeType === 'link'">
|
||||
<div class="table">
|
||||
<div class="table-head">
|
||||
<div class="tr">
|
||||
<div class="th">名称</div>
|
||||
<div class="th">链接</div>
|
||||
<div class="th">操作</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body" v-if="attribute.link && attribute.link.content && attribute.link.content.length > 0">
|
||||
<div class="tr" v-for="(item, index) in attribute.link.content">
|
||||
<div class="td" v-if="linkEditActive.index === index">
|
||||
<input class="input" type="text" v-model="linkEditActive.name" />
|
||||
</div>
|
||||
<div class="td" v-else>{{ item.name }}</div>
|
||||
<div class="td" v-if="linkEditActive.index === index">
|
||||
<textarea class="input link-edit" type="text" v-model="linkEditActive.url"></textarea>
|
||||
</div>
|
||||
<div class="td" v-else>{{ item.url }}</div>
|
||||
<div class="td" v-if="linkEditActive.index === index">
|
||||
<button @click="linkConfirmEdit(index)">确认</button>
|
||||
<button @click="linkCancelEdit">取消</button>
|
||||
</div>
|
||||
<div class="td" v-else>
|
||||
<button @click="linkEdit(index, item)">编辑</button>
|
||||
<button @click="linkDelete(index)">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-empty" v-else>
|
||||
<div class="empty-img"></div>
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="attribute-content attribute-content-camera" v-show="attributeType === 'camera'">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">编辑内容</span>
|
||||
<input class="input" type="text" v-model="cameraName" style="width: 100px" />
|
||||
<button class="select btn" @click="cameraSelect">搜索</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="table camera-table">
|
||||
<div class="table-head">
|
||||
<div class="tr">
|
||||
<div class="th">操作</div>
|
||||
<div class="th">设备名称</div>
|
||||
<div class="th" style="width: 80px; flex: 0 80px; min-width: 80px">设备类型</div>
|
||||
<div class="th" style="width: 126px; flex: 0 126px; min-width: 126px">设备IP</div>
|
||||
<div class="th" style="width: 80px; flex: 0 80px; min-width: 80px">设备端口</div>
|
||||
<div class="th" style="width: 80px; flex: 0 80px; min-width: 80px">用户名</div>
|
||||
<div class="th">密码</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body" style="display: none">
|
||||
<div class="tr">
|
||||
<div class="td">
|
||||
<input type="checkbox" value="2" />
|
||||
<span>绑定</span>
|
||||
</div>
|
||||
<div class="td">设备名称</div>
|
||||
<div class="td">设备类型</div>
|
||||
<div class="td">设备IP</div>
|
||||
<div class="td">设备端口</div>
|
||||
<div class="td">用户名</div>
|
||||
<div class="td">密码</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-empty">
|
||||
<div class="empty-img"></div>
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="" row>
|
||||
<ul class="pagination"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="attribute-content attribute-content-isc" v-show="attributeType === 'isc'">
|
||||
<!-- <div class="row">
|
||||
<div class="col">
|
||||
<span class="label">编辑内容</span>
|
||||
<input class="input" type="text" @model="ISCName" style="width: 100px;">
|
||||
<button class="select btn" @click="ISCSelect">搜索</button>
|
||||
</div>
|
||||
</div> -->
|
||||
<div>
|
||||
<div class="table isc-table">
|
||||
<div class="table-head">
|
||||
<div class="tr">
|
||||
<div class="th" style="width: 74px; flex: 0 74px; min-width: 74px">操作</div>
|
||||
<div class="th">设备名称</div>
|
||||
<div class="th" style="width: 180px; flex: 0 180px; min-width: 180px">设备状态</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body" style="display: none">
|
||||
<div class="tr">
|
||||
<div class="td">
|
||||
<input type="checkbox" value="2" />
|
||||
<span>绑定</span>
|
||||
</div>
|
||||
<div class="td">设备名称</div>
|
||||
<div class="td" style="width: 180px; flex: 0 180px; min-width: 180px">设备状态</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-empty">
|
||||
<div class="empty-img"></div>
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="" row>
|
||||
<ul class="pagination"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row attribute-content attribute-content-vr" v-show="attributeType === 'vr'">
|
||||
<div class="col">
|
||||
<span class="label">添加链接</span>
|
||||
<div style="flex: 1; position: relative">
|
||||
<input class="input vr_add" type="text" v-model="addvrInput" />
|
||||
<i class="vr_add_btn" @click="_addRr"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="attribute-content attribute-content-vr" v-show="attributeType === 'vr'">
|
||||
<div class="table">
|
||||
<div class="table-head">
|
||||
<div class="tr">
|
||||
<div class="th">名称</div>
|
||||
<div class="th">链接</div>
|
||||
<div class="th">操作</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body" v-if="attribute.vr && attribute.vr.content && attribute.vr.content.length > 0">
|
||||
<div class="tr" v-for="(item, index) in attribute.vr.content">
|
||||
<div class="td" v-if="vrEditActive.index === index">
|
||||
<input class="input" type="text" v-model="vrEditActive.name" />
|
||||
</div>
|
||||
<div class="td" v-else>{{ item.name }}</div>
|
||||
<div class="td" v-if="vrEditActive.index === index">
|
||||
<textarea class="input link-edit" type="text" v-model="vrEditActive.url"></textarea>
|
||||
</div>
|
||||
<div class="td" v-else>{{ item.url }}</div>
|
||||
<div class="td" v-if="vrEditActive.index === index">
|
||||
<button @click="vrConfirmEdit(index)">确认</button>
|
||||
<button @click="vrCancelEdit">取消</button>
|
||||
</div>
|
||||
<div class="td" v-else>
|
||||
<button @click="vrEdit(index, item)">编辑</button>
|
||||
<button @click="vrDelete(index)">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-empty" v-else>
|
||||
<div class="empty-img"></div>
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
|
||||
let ipcRenderer;
|
||||
if (window && window.process && window.process.type === 'renderer') {
|
||||
ipcRenderer = require('electron').ipcRenderer
|
||||
}
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
const attributeType = ref('richText')
|
||||
|
||||
const props = defineProps({
|
||||
entityOptions: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
})
|
||||
|
||||
const attribute = ref(props.entityOptions.options.attribute)
|
||||
if(!props.entityOptions.options.richTextContent)
|
||||
{
|
||||
props.entityOptions.options.richTextContent = ''
|
||||
}
|
||||
const richTextContent = ref(props.entityOptions.options.richTextContent)
|
||||
|
||||
let attributeSelect = ref([
|
||||
{
|
||||
name: '富文本',
|
||||
value: '富文本',
|
||||
key: 'richText'
|
||||
},
|
||||
{
|
||||
name: '链接',
|
||||
value: '链接',
|
||||
key: 'link'
|
||||
}
|
||||
])
|
||||
|
||||
if (props.entityOptions.type === 'BillboardObject') {
|
||||
attributeSelect.value.push(
|
||||
// {
|
||||
// name: 'IP摄像头',
|
||||
// value: 'IP摄像头',
|
||||
// key: 'camera'
|
||||
// },
|
||||
// {
|
||||
// name: 'ISC摄像头',
|
||||
// value: 'ISC摄像头',
|
||||
// key: 'isc'
|
||||
// },
|
||||
// {
|
||||
// name: '传感器',
|
||||
// value: '传感器',
|
||||
// key: 'sensor'
|
||||
// },
|
||||
{
|
||||
name: '全景图',
|
||||
value: '全景图',
|
||||
key: 'vr'
|
||||
},
|
||||
// {
|
||||
// name: '物资',
|
||||
// value: '物资',
|
||||
// key: 'goods'
|
||||
// },
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const cameraName = ref('')
|
||||
const addlinkInput = ref('')
|
||||
const addvrInput = ref('')
|
||||
const linkEditActive: any = ref({})
|
||||
const vrEditActive: any = ref({})
|
||||
|
||||
const openRichTextEditor = () => {
|
||||
eventBus.emit('openRichText', props.entityOptions.name, richTextContent.value, (val: any) => {
|
||||
richTextContent.value = val
|
||||
props.entityOptions.options.richTextContent = richTextContent.value
|
||||
})
|
||||
}
|
||||
const _addLink = async () => {
|
||||
if (addlinkInput.value) {
|
||||
let link = {
|
||||
name: '链接',
|
||||
url: addlinkInput.value
|
||||
}
|
||||
attribute.value.link.content.push(link)
|
||||
addlinkInput.value = ''
|
||||
} else {
|
||||
const options = {
|
||||
properties: ['openFile', 'multiSelections'], // 允许选择多个文件
|
||||
filters: [
|
||||
{ name: '图片', extensions: ['jpg', 'jpeg', 'png', 'webp', 'svg', 'bmp'] },
|
||||
{ name: '音视频', extensions: ['mp4', 'mp3'] },
|
||||
{ name: 'pdf', extensions: ['pdf'] },
|
||||
]
|
||||
};
|
||||
if (ipcRenderer) {
|
||||
ipcRenderer.send('open-directory-dialog', options);
|
||||
// 监听主进程返回的结果
|
||||
ipcRenderer.once('selectedItem', (event, filePaths) => {
|
||||
if (filePaths.length > 0) {
|
||||
filePaths.forEach((item) => {
|
||||
attribute.value.link.content.push({
|
||||
name: '链接',
|
||||
url: item
|
||||
})
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
// const pickerOpts = {
|
||||
// types: [
|
||||
// {
|
||||
// description: '图片',
|
||||
// accept:
|
||||
// {
|
||||
// 'image/jpg': ['.jpg', '.jpeg'],
|
||||
// 'image/gif': ['.gif'],
|
||||
// 'image/webp': ['.webp'],
|
||||
// 'image/png': ['.png'],
|
||||
// 'image/svg+xml': ['.svg'],
|
||||
// 'image/x-ms-bmp': ['.bmp'],
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// description: '音视频',
|
||||
// accept:
|
||||
// {
|
||||
// 'video/mp4': ['.mp4'],
|
||||
// 'audio/mpeg': ['.mp3'],
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// description: 'pdf',
|
||||
// accept:
|
||||
// {
|
||||
// 'application/pdf': ['.pdf'],
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// excludeAcceptAllOption: true,
|
||||
// multiple: true
|
||||
// };
|
||||
// if ((window as any).showOpenFilePicker) {
|
||||
// const fileHandles = await (window as any).showOpenFilePicker(pickerOpts);
|
||||
// // const files = await Promise.all(fileHandles.map(fileHandle => fileHandle.getFile()));
|
||||
// // const dataTransfer = new DataTransfer();
|
||||
// // handleFileImgInput(files, parentId, 'vr')
|
||||
// }
|
||||
}
|
||||
|
||||
// $sendElectronChanel('open-directory-dialog', (a: any,b: any)=>{
|
||||
// console.log(a,b)
|
||||
// })
|
||||
|
||||
}
|
||||
}
|
||||
const linkEdit = (index: any, item: { name: any; url: any; }) => {
|
||||
let active = {
|
||||
index: index,
|
||||
name: item.name,
|
||||
url: item.url
|
||||
}
|
||||
linkEditActive.value = active
|
||||
}
|
||||
const linkDelete = (index: any) => {
|
||||
attribute.value.link.content.splice(index, 1)
|
||||
}
|
||||
const linkConfirmEdit = (index: string | number) => {
|
||||
attribute.value.link.content[index] = {
|
||||
name: linkEditActive.value.name,
|
||||
url: linkEditActive.value.url
|
||||
}
|
||||
linkEditActive.value = {}
|
||||
}
|
||||
const linkCancelEdit = () => {
|
||||
linkEditActive.value = {}
|
||||
}
|
||||
const cameraSelect = () => { }
|
||||
const _addRr = () => {
|
||||
if (addvrInput.value) {
|
||||
let link = {
|
||||
name: '全景图',
|
||||
url: addvrInput.value
|
||||
}
|
||||
attribute.value.vr.content.push(link)
|
||||
addvrInput.value = ''
|
||||
} else {
|
||||
const options = {
|
||||
properties: ['openFile', 'multiSelections'],
|
||||
filters: [
|
||||
{ name: '全景图', extensions: ['jpg'] },
|
||||
]
|
||||
};
|
||||
ipcRenderer.send('open-directory-dialog', options);
|
||||
// 监听主进程返回的结果
|
||||
ipcRenderer.once('selectedItem', (event, filePaths) => {
|
||||
if (filePaths.length > 0) {
|
||||
filePaths.forEach((item) => {
|
||||
attribute.value.link.content.push({
|
||||
name: '全景图',
|
||||
url: item
|
||||
})
|
||||
})
|
||||
}
|
||||
});
|
||||
// document.getElementById('fileInputlink')?.click()
|
||||
// eventBus.emit('defineClickAddLinkCb', (list: any[]) => {
|
||||
// list.forEach((item: { previewUrl: any; }) => {
|
||||
// attribute.value.vr.content.push({
|
||||
// name: '全景图',
|
||||
// url: item.previewUrl
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
}
|
||||
}
|
||||
|
||||
const vrEdit = (index: any, item: { name: any; url: any; }) => {
|
||||
let active = {
|
||||
index: index,
|
||||
name: item.name,
|
||||
url: item.url
|
||||
}
|
||||
vrEditActive.value = active
|
||||
}
|
||||
const vrDelete = (index: any) => {
|
||||
attribute.value.vr.content.splice(index, 1)
|
||||
}
|
||||
const vrConfirmEdit = (index: string | number) => {
|
||||
attribute.value.vr.content[index] = vrEditActive.value
|
||||
vrEditActive.value = {}
|
||||
}
|
||||
const vrCancelEdit = () => {
|
||||
vrEditActive.value = {}
|
||||
}
|
||||
const goodsFilter = () => { }
|
||||
const attributeChange = () => { }
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
269
src/views/largeScreen/components/newMap/dialog/baseDialog.vue
Normal file
269
src/views/largeScreen/components/newMap/dialog/baseDialog.vue
Normal file
@ -0,0 +1,269 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted, nextTick } from 'vue';
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
top: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
left: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
bodyId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
clearAnimation: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fix: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
className: {
|
||||
type: String
|
||||
},
|
||||
nofold: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isfold: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
noClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
closeCallback: {
|
||||
type: Function,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
// 内部状态
|
||||
const first = ref(false);
|
||||
const dialogVisible = ref(false);
|
||||
const FontChart = ref(undefined);
|
||||
const callback = ref(undefined);
|
||||
const baseDialog = ref(null);
|
||||
const titleBox = ref(null);
|
||||
const dialogContent = ref(null);
|
||||
const tableData = ref([]);
|
||||
// 方法定义
|
||||
const open = (data) => {
|
||||
if (!first.value) {
|
||||
first.value = true;
|
||||
dialogVisible.value = true;
|
||||
nextTick(() => {
|
||||
moveDiv();
|
||||
});
|
||||
}
|
||||
dialogVisible.value = true;
|
||||
nextTick(() => {
|
||||
// setTimeout(() => {
|
||||
// openPosition()
|
||||
// }, 0)
|
||||
if (baseDialog.value) {
|
||||
baseDialog.value.style.width = props.width;
|
||||
baseDialog.value.style.height = props.height;
|
||||
baseDialog.value.style.top = props.top;
|
||||
baseDialog.value.style.left = props.left;
|
||||
baseDialog.value.style.position = props.fix ? 'fixed' : 'absolute';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogVisible.value = false;
|
||||
if (props.clearAnimation) {
|
||||
// 假设mapService是全局可用的
|
||||
// window.mapService?.removeAnimation();
|
||||
}
|
||||
callback.value && callback.value();
|
||||
|
||||
props.closeCallback && props.closeCallback();
|
||||
};
|
||||
|
||||
const moveDiv = () => {
|
||||
let x = 0;
|
||||
let y = 0;
|
||||
let l = 0;
|
||||
let t = 0;
|
||||
|
||||
const oClickDiv = baseDialog.value;
|
||||
const oMoveDiv = titleBox.value;
|
||||
if (oClickDiv) {
|
||||
// console.log(oMoveDiv);
|
||||
oMoveDiv.onmousedown = (e) => {
|
||||
// 获取对话框尺寸
|
||||
const oMoveDivHeight = baseDialog.value.offsetHeight;
|
||||
const oMoveDivWidth = baseDialog.value.offsetWidth;
|
||||
|
||||
x = e.clientX;
|
||||
y = e.clientY;
|
||||
|
||||
const leftPx = window.getComputedStyle(baseDialog.value).left;
|
||||
const topPx = window.getComputedStyle(baseDialog.value).top;
|
||||
|
||||
l = parseFloat(leftPx);
|
||||
t = parseFloat(topPx);
|
||||
|
||||
// 获取视口大小
|
||||
const container = props.bodyId ? document.getElementById(props.bodyId) : document.body;
|
||||
const windowHeight = container.clientHeight;
|
||||
const windowWidth = container.clientWidth;
|
||||
|
||||
// 鼠标移动事件处理
|
||||
const handleMouseMove = (e) => {
|
||||
e.preventDefault();
|
||||
const nx = e.clientX;
|
||||
const ny = e.clientY;
|
||||
|
||||
// 计算新位置
|
||||
let newLeft = nx - (x - l);
|
||||
let newTop = ny - (y - t);
|
||||
|
||||
// 边界检查
|
||||
if (newLeft < 0) {
|
||||
newLeft = 0;
|
||||
} else if (newLeft + oMoveDivWidth > windowWidth) {
|
||||
newLeft = windowWidth - oMoveDivWidth;
|
||||
}
|
||||
|
||||
if (newTop <= 0) {
|
||||
newTop = 0;
|
||||
} else if (newTop + oMoveDivHeight > windowHeight) {
|
||||
newTop = windowHeight - oMoveDivHeight;
|
||||
}
|
||||
|
||||
// 更新位置
|
||||
if (baseDialog.value) {
|
||||
baseDialog.value.style.left = newLeft + 'px';
|
||||
baseDialog.value.style.top = newTop + 'px';
|
||||
baseDialog.value.style.bottom = 'unset';
|
||||
baseDialog.value.style.right = 'unset';
|
||||
}
|
||||
};
|
||||
|
||||
// 鼠标抬起事件处理
|
||||
const handleMouseUp = () => {
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
window.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
|
||||
// 添加事件监听
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const openPosition = () => {
|
||||
const oMoveDiv = baseDialog.value;
|
||||
if (!oMoveDiv) return;
|
||||
|
||||
// 获取对话框尺寸
|
||||
const oMoveDivHeight = oMoveDiv.offsetHeight;
|
||||
const oMoveDivWidth = oMoveDiv.offsetWidth;
|
||||
|
||||
// 获取当前位置
|
||||
const leftPx = parseFloat(window.getComputedStyle(oMoveDiv).left);
|
||||
const topPx = parseFloat(window.getComputedStyle(oMoveDiv).top);
|
||||
|
||||
// 获取视口大小
|
||||
const container = props.bodyId ? document.getElementById(props.bodyId) : document.body;
|
||||
const windowHeight = container.clientHeight;
|
||||
const windowWidth = container.clientWidth;
|
||||
|
||||
// 边界检查
|
||||
let newLeft = leftPx;
|
||||
let newTop = topPx;
|
||||
|
||||
if (newLeft < 0) {
|
||||
newLeft = 0;
|
||||
} else if (newLeft + oMoveDivWidth > windowWidth) {
|
||||
newLeft = windowWidth - oMoveDivWidth;
|
||||
}
|
||||
|
||||
if (newTop - 10 <= 0) {
|
||||
newTop = -10;
|
||||
} else if (newTop + oMoveDivHeight > windowHeight) {
|
||||
newTop = windowHeight - oMoveDivHeight;
|
||||
}
|
||||
|
||||
// 更新位置
|
||||
oMoveDiv.style.left = newLeft + 'px';
|
||||
oMoveDiv.style.top = newTop + 'px';
|
||||
};
|
||||
|
||||
// 暴露公共方法
|
||||
defineExpose({
|
||||
open,
|
||||
close,
|
||||
moveDiv,
|
||||
openPosition
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="YJ-custom-base-dialog" :class="className" ref="baseDialog" :id="id" v-if="dialogVisible" v-show="dialogVisible">
|
||||
<div class="title-box" ref="titleBox">
|
||||
<span class="title">{{ title }}</span
|
||||
><span class="close-box" @click="close"><span class="close"></span><i>✕</i></span>
|
||||
</div>
|
||||
<div class="content" style="padding: 0 24px 0 24px">
|
||||
<div>
|
||||
<slot name="content"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.YJ-custom-base-dialog {
|
||||
::v-deep .el-tabs {
|
||||
width: 100%;
|
||||
.el-tabs__item {
|
||||
padding: 0 8px;
|
||||
color: #fff;
|
||||
}
|
||||
.el-tabs__item:nth-child(2) {
|
||||
padding-left: 0;
|
||||
}
|
||||
.el-tabs__item.is-active,
|
||||
.el-tabs__item:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.el-tabs__active-bar {
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
.el-tabs__nav-wrap:after {
|
||||
background-color: rgba(204, 204, 204, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,450 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, inject } from 'vue';
|
||||
import { updateInfo } from '@/views/largeScreen/components/api';
|
||||
import Dialog from './baseDialog.vue';
|
||||
import { initMapData } from '../initMapData';
|
||||
import { useTreeNode } from '../treeNode';
|
||||
const { cusUpdateNode, getSelectedNodes } = useTreeNode();
|
||||
const baseDialog: any = ref(null);
|
||||
const text = ref('');
|
||||
const entityOptions: any = ref({});
|
||||
const coordinate = ref('EPSG:4326');
|
||||
const x = ref();
|
||||
const y = ref();
|
||||
const z = ref();
|
||||
const heightMode = ref(0);
|
||||
const height = ref(0);
|
||||
|
||||
let entity;
|
||||
let originalOptions;
|
||||
const open = async (id) => {
|
||||
console.log('open');
|
||||
console.log(id);
|
||||
console.log(window['Earth1'].entityMap.get(id));
|
||||
entity = window['Earth1'].entityMap.get(id);
|
||||
originalOptions = structuredClone(entity.options);
|
||||
entityOptions.value = entity;
|
||||
x.value = entity.lng;
|
||||
y.value = entity.lat;
|
||||
z.value = entity.alt;
|
||||
console.log('entityOptions', entityOptions);
|
||||
baseDialog.value?.open();
|
||||
await nextTick();
|
||||
};
|
||||
const translate = () => {
|
||||
entity.openPositionEditing(() => {
|
||||
changAlt();
|
||||
});
|
||||
};
|
||||
const changeName = (e) => {
|
||||
entityOptions.value.labelText = e.target.value;
|
||||
};
|
||||
const changAlt = () => {
|
||||
heightModeChange(heightMode.value);
|
||||
// coordinateChange();
|
||||
};
|
||||
const heightModeChange = (val) => {
|
||||
switch (val) {
|
||||
case 0:
|
||||
case '0':
|
||||
height.value = entityOptions.value.alt;
|
||||
entityOptions.value.alt = entityOptions.value.alt;
|
||||
break;
|
||||
case 1:
|
||||
case '1':
|
||||
if (window['Earth1'].viewer.scene.terrainProvider.availability) {
|
||||
window['Cesium']
|
||||
.sampleTerrainMostDetailed(window['Earth'].viewer.scene.terrainProvider, [
|
||||
window['Cesium'].Cartographic.fromDegrees(entityOptions.value.lng, entityOptions.value.lat)
|
||||
])
|
||||
.then((position) => {
|
||||
height.value = entityOptions.value.alt - Number(position[0].height.toFixed(2));
|
||||
});
|
||||
} else {
|
||||
height.value = entityOptions.value.alt;
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
case '2':
|
||||
break;
|
||||
case 3:
|
||||
case '3':
|
||||
const objectsToExclude: any[] = [];
|
||||
for (let [key, value] of window['Earth'].entityMap) {
|
||||
if (value.type === 'RadarScanStereoscopic' && value.entity) {
|
||||
objectsToExclude.push((value as any).entity);
|
||||
}
|
||||
}
|
||||
entityOptions.value.getClampToHeight(entityOptions.value.options.position, objectsToExclude).then((h) => {
|
||||
height.value = Number(h.toFixed(2));
|
||||
entityOptions.value.alt = Number(h.toFixed(2));
|
||||
});
|
||||
break;
|
||||
}
|
||||
entity.heightMode = val;
|
||||
};
|
||||
const changLng = () => {
|
||||
// projConvert();
|
||||
// coordinateChange();
|
||||
};
|
||||
const changLat = () => {
|
||||
// projConvert();
|
||||
// coordinateChange();
|
||||
};
|
||||
const coordinateChange = () => {
|
||||
let position = window['Earth1'].proj.convert(
|
||||
[
|
||||
{
|
||||
x: entityOptions.value.lng,
|
||||
y: entityOptions.value.lat,
|
||||
z: entityOptions.value.alt
|
||||
}
|
||||
],
|
||||
'EPSG:4326',
|
||||
coordinate.value
|
||||
).points;
|
||||
x.value = position[0].x;
|
||||
y.value = position[0].y;
|
||||
z.value = position[0].z;
|
||||
};
|
||||
const confirm = () => {
|
||||
originalOptions = structuredClone(entity.options);
|
||||
|
||||
let params = structuredClone(entity.options);
|
||||
delete params.host;
|
||||
let params2 = {
|
||||
id: params.id,
|
||||
sourceName: params.name,
|
||||
params: params,
|
||||
isShow: params.show ? 1 : 0
|
||||
};
|
||||
updateInfo(params2).then((res) => {
|
||||
console.log('updateInfo', res);
|
||||
baseDialog.value?.close();
|
||||
if (res.code === 200) {
|
||||
cusUpdateNode({ id: params.id, sourceName: params.name, params: JSON.stringify(params) });
|
||||
}
|
||||
});
|
||||
};
|
||||
const close = () => {
|
||||
baseDialog.value?.close();
|
||||
};
|
||||
const closeCallback = () => {
|
||||
entityOptions.value.originalOptions = structuredClone(originalOptions);
|
||||
entity.positionEditing = false;
|
||||
entity.reset();
|
||||
// eventBus?.emit('destroyComponent');
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog ref="baseDialog" title="点标注" left="180px" top="100px" :className="'billboard-object'" :closeCallback="closeCallback">
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label" style="flex: unset">名称</span>
|
||||
<input class="input" type="text" v-model="entityOptions.name" @change="changeName" />
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div style="width: 46%">
|
||||
<div class="row">
|
||||
<p class="lable-left-line">WGS84坐标</p>
|
||||
</div>
|
||||
<div class="row" style="margin-bottom: 5px">
|
||||
<div class="col">
|
||||
<span class="label">经度</span>
|
||||
<input class="input" type="number" title="" min="-180" max="180" v-model="entityOptions.lng" @change="changLng" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-bottom: 5px">
|
||||
<div class="col">
|
||||
<span class="label">纬度</span>
|
||||
<input class="input" type="number" title="" min="-90" max="90" v-model="entityOptions.lat" @change="changLat" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">海拔高度</span>
|
||||
<div class="input-number input-number-unit-1 alt-box" :class="{ disabled: heightMode == 2 || heightMode === 3 }">
|
||||
<input class="input" type="number" title="" min="-9999999" max="999999999" v-model="entityOptions.alt" @change="changAlt" />
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div style="width: 50%">
|
||||
<div class="row coordinate-select-box">
|
||||
<div class="lable-left-line">
|
||||
转换坐标选择
|
||||
<el-select
|
||||
class="input input-select coordinate-select"
|
||||
style="width: 155px; margin-left: 20px"
|
||||
v-model="coordinate"
|
||||
@change="coordinateChange"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option v-for="item in epsg_map" :key="item.epsg" :label="item.name" :value="item.epsg"> </el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-bottom: 5px">
|
||||
<div class="col">
|
||||
<span class="label">X轴:</span>
|
||||
<input style="border: none; background: none" class="input convert-x" readonly v-model="x" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-bottom: 5px">
|
||||
<div class="col">
|
||||
<span class="label">Y轴:</span>
|
||||
<input style="border: none; background: none" class="input convert-y" readonly v-model="y" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">Z轴:</span>
|
||||
<input style="border: none; background: none" class="input convert-z" readonly v-model="z" />
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
<!-- <span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 120px">
|
||||
<span class="label">视野缩放</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.scaleByDistance" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">最近距离</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="1" max="99999999" v-model="entityOptions.near" />
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">最远距离</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="1" max="99999999" v-model="entityOptions.far" />
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="属性信息" name="1">
|
||||
<attribute :entityOptions="entityOptions"></attribute>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="空间信息" name="2">
|
||||
<div class="row">
|
||||
<div class="col height-mode-box">
|
||||
<span class="label" style="flex: 0 0 56px">高度模式</span>
|
||||
<el-select
|
||||
class="input input-select height-mode-scelect"
|
||||
style="width: 155px; margin-left: 20px"
|
||||
v-model="heightMode"
|
||||
@change="heightModeChange"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option v-for="item in heightModeData" :key="item.key" :label="item.name" :value="item.key"> </el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="col height-box" v-show="heightMode == 0 || heightMode == 1">
|
||||
<span class="label" style="flex: 0 0 56px">高度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height" @change="changHeight" />
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="YJ-custom-checkbox-box" style="display: flex; align-items: center; cursor: pointer" @click="formatChange(1)">
|
||||
<input type="checkbox" class="YJ-custom-checkbox" v-model="format1" />
|
||||
<span style="margin-left: 10px; margin-bottom: 1px; user-select: none">小数格式</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="YJ-custom-checkbox-box" style="display: flex; align-items: center; cursor: pointer" @click="formatChange(2)">
|
||||
<input type="checkbox" class="YJ-custom-checkbox" v-model="format2" />
|
||||
<span style="margin-left: 10px; margin-bottom: 1px; user-select: none">度分格式</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="YJ-custom-checkbox-box" style="display: flex; align-items: center; cursor: pointer" @click="formatChange(3)">
|
||||
<input type="checkbox" class="YJ-custom-checkbox" v-model="format3" />
|
||||
<span style="margin-left: 10px; margin-bottom: 1px; user-select: none">度分秒格式</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 1">
|
||||
<div class="proj-input-box" v-show="format1">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span style="flex: 0 0 40px">经度</span>
|
||||
<input class="input lng" readonly :value="entityOptions.lng" />
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span style="flex: 0 0 40px">纬度</span>
|
||||
<input class="input lat" readonly :value="entityOptions.lat" />
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="proj-input-box" style="width: 56%" v-show="format2">
|
||||
<div class="row">
|
||||
<div class="col" style="flex-direction: column">
|
||||
<div class="row" style="margin-bottom: 15px">
|
||||
<span style="flex: 0 0 40px">经度</span>
|
||||
<input class="input lng-dm-d" style="flex: 1" readonly :value="lngDmD" />
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">度</span>
|
||||
<input class="input lng-dm-m" style="flex: 1" readonly :value="lngDmM" />
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">分</span>
|
||||
<span class="top-line"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span style="flex: 0 0 40px">纬度</span>
|
||||
<input class="input lat-dm-d" style="flex: 1" readonly :value="latDmD" />
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">度</span>
|
||||
<input class="input lat-dm-m" style="flex: 1" readonly :value="latDmM" />
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">分</span>
|
||||
<span class="bottom-line"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="proj-input-box" style="width: 70%" v-show="format3">
|
||||
<div class="row">
|
||||
<div class="col" style="flex-direction: column">
|
||||
<div class="row" style="margin-bottom: 15px">
|
||||
<span style="flex: 0 0 40px">经度</span>
|
||||
<input class="input lng-dms-d" style="flex: 1" readonly :value="lngDmsD" />
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">度</span>
|
||||
<input class="input lng-dms-m" style="flex: 1" readonly :value="lngDmsM" />
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">分</span>
|
||||
<input class="input lng-dms-s" style="flex: 1" readonly :value="lngDmsS" />
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">秒</span>
|
||||
<span class="top-line"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span style="flex: 0 0 40px">纬度</span>
|
||||
<input class="input lat-dms-d" style="flex: 1" readonly :value="latDmsD" />
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">度</span>
|
||||
<input class="input lat-dms-m" style="flex: 1" readonly :value="latDmsM" />
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">分</span>
|
||||
<input class="input lat-dms-s" style="flex: 1" readonly :value="latDmsS" />
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">秒</span>
|
||||
<span class="bottom-line"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="标注风格" name="3">
|
||||
<div>
|
||||
<h4>图标设置</h4>
|
||||
<div class="row" style="margin-bottom: 10px">
|
||||
<div class="col" style="flex: 0 0 80px">
|
||||
<span class="label" style="flex: none">显隐</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.billboardShow" />
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 90px">
|
||||
<span class="label" style="flex: none">图标</span>
|
||||
<div class="image-box" @click="clickChangeImage">
|
||||
<img class="image" :src="entityOptions.billboardImage" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 90px">
|
||||
<span class="label" style="flex: none">默认图标</span>
|
||||
<div class="image-box" @click="clickChangeDefaultImage">
|
||||
<img class="image" :src="entityOptions.billboardDefaultImage" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">图标倍数</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="0.1" max="99" v-model="entityOptions.billboardScale" />
|
||||
<span class="unit">倍</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4>文字设置</h4>
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 80px">
|
||||
<span class="label" style="flex: none">显隐</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.labelShow" />
|
||||
</div>
|
||||
<div class="col font-select-box">
|
||||
<span class="label" style="flex: none">字体选择</span>
|
||||
<el-select class="input input-select font-select" style="width: 100px" v-model="entityOptions.labelFontFamily">
|
||||
<el-option v-for="item in fontList" :key="item.key" :label="item.name" :value="item.key"> </el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">文字大小</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="1" max="99" v-model="entityOptions.labelFontSize" style="width: 70px" />
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">文字颜色</span>
|
||||
<div class="labelColor" ref="labelColorRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>-->
|
||||
</template>
|
||||
<template #footer>
|
||||
<div style="position: absolute; left: 24px; display: flex">
|
||||
<!-- <button @click="updateHeight">
|
||||
<svg class="icon-updateheigh">
|
||||
<use xlink:href="#yj-icon-updateheight"></use></svg
|
||||
>更新高程
|
||||
</button>-->
|
||||
<button style="margin-left: 10px" @click="translate">平移</button>
|
||||
</div>
|
||||
<!-- <button @click="remove">删除</button>-->
|
||||
<button @click="confirm">确定</button>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.billboard-object {
|
||||
.YJ-custom-checkbox {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,620 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
title="曲线标注"
|
||||
left="180px"
|
||||
top="100px"
|
||||
className="polyline"
|
||||
:closeCallback="closeCallback"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col">
|
||||
<span class="label">名称</span>
|
||||
<input class="input" maxlength="40" type="text" v-model="entityOptions.name" />
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 56%">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col input-select-unit-box">
|
||||
<el-select v-model="entityOptions.wordsName">
|
||||
<el-option label="空间长度" value="0"></el-option>
|
||||
<el-option label="投影长度" value="1"></el-option>
|
||||
<el-option label="地表长度" value="2"></el-option>
|
||||
</el-select>
|
||||
<input v-model="length" class="input-text" readonly />
|
||||
<el-select v-model="lengthUnit">
|
||||
<el-option label="米" value="m"></el-option>
|
||||
<el-option label="千米" value="km"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<el-tabs v-model="activeName">
|
||||
<!-- <el-tab-pane label="属性信息" name="1">
|
||||
<attribute :entityOptions="entityOptions"></attribute>
|
||||
</el-tab-pane> -->
|
||||
<el-tab-pane label="空间信息" name="2">
|
||||
<div class="row">
|
||||
<div class="col height-mode-box">
|
||||
<span class="label" style="flex: 0 0 56px">高度模式</span>
|
||||
<el-select
|
||||
class="input input-select height-mode-scelect"
|
||||
style="width: 155px; margin-left: 20px"
|
||||
v-model="heightMode"
|
||||
@change="heightModeChange"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in heightModeData"
|
||||
:key="item.key"
|
||||
:label="item.name"
|
||||
:value="item.key"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">Z值统一增加</span>
|
||||
<div
|
||||
class="input-number input-number-unit-1 height-box"
|
||||
:class="{ disabled: heightMode == 2 }"
|
||||
>
|
||||
<input
|
||||
class="input height"
|
||||
type="number"
|
||||
title=""
|
||||
min="-9999999"
|
||||
max="999999999"
|
||||
v-model="height"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
<button
|
||||
class="confirm height-confirm"
|
||||
style="margin-left: 5px"
|
||||
@click="heightConfirm"
|
||||
:disabled="heightMode == 2"
|
||||
>
|
||||
应用
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="table spatial-info-table">
|
||||
<div class="table-head">
|
||||
<div class="tr">
|
||||
<div class="th"></div>
|
||||
<div class="th">经度（X）</div>
|
||||
<div class="th">纬度（Y）</div>
|
||||
<div class="th">高度（Z）</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="tr" v-for="(item, i) in entityOptions.options.positions" :key="i">
|
||||
<div class="td">{{ i + 1 }}</div>
|
||||
<div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')">
|
||||
<input
|
||||
class="input"
|
||||
@blur="inputBlurCallBack($event, i, 'lng', 8)"
|
||||
type="number"
|
||||
v-model="item.lng"
|
||||
min="-180"
|
||||
max="180"
|
||||
v-if="activeTd.index == i && activeTd.name == 'lng'"
|
||||
/>
|
||||
<span style="pointer-events: none" v-else>{{ item.lng.toFixed(8) }}</span>
|
||||
</div>
|
||||
<div class="td lat align-center" @dblclick="inputDblclick($event, i, 'lat')">
|
||||
<input
|
||||
class="input"
|
||||
@blur="inputBlurCallBack($event, i, 'lat', 8)"
|
||||
type="number"
|
||||
v-model="item.lat"
|
||||
min="-180"
|
||||
max="180"
|
||||
v-if="activeTd.index == i && activeTd.name == 'lat'"
|
||||
/>
|
||||
<span style="pointer-events: none" v-else>{{ item.lat.toFixed(8) }}</span>
|
||||
</div>
|
||||
<div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')">
|
||||
<input
|
||||
class="input"
|
||||
@blur="inputBlurCallBack($event, i, 'alt', 2)"
|
||||
type="number"
|
||||
v-model="item.alt"
|
||||
min="-9999999"
|
||||
max="999999999"
|
||||
v-if="activeTd.index == i && activeTd.name == 'alt'"
|
||||
/>
|
||||
<span style="pointer-events: none" v-else>{{ item.alt.toFixed(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="线条风格" name="3">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">线条颜色</span>
|
||||
<div class="color" ref="colorRef"></div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%">
|
||||
<span class="label">线条宽度</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="999"
|
||||
v-model="entityOptions.lineWidth"
|
||||
/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col input-select-line-type-box" style="flex: 0 0 37%">
|
||||
<span class="label">线条形式</span>
|
||||
<el-select
|
||||
class="input input-select input-select-line-type"
|
||||
style="margin-left: 20px"
|
||||
v-model="entityOptions.lineType"
|
||||
@change="lineTypechange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in lineTypeData"
|
||||
:key="item.key"
|
||||
:label="item.name"
|
||||
:value="item.key"
|
||||
>
|
||||
<i class="yj-custom-icon" :class="item.icon"></i>
|
||||
{{ item.name }}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">线段缓冲</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.extend" />
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%">
|
||||
<span class="label">缓冲宽度</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
data-min="0.01"
|
||||
max="999999"
|
||||
v-model="entityOptions.extendWidth"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 37%">
|
||||
<span class="label">缓冲颜色</span>
|
||||
<div class="extendColor" ref="extendColorRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-show="entityOptions.lineType > 2 && entityOptions.lineType < 13">
|
||||
<div class="col">
|
||||
<span class="label">首尾反向</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.rotate" />
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%">
|
||||
<span class="label">流动速率</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="999999"
|
||||
step="1"
|
||||
v-model="entityOptions.speed"
|
||||
/>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 37%">
|
||||
<span
|
||||
class="label lineSpace"
|
||||
v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5"
|
||||
>线条间距</span
|
||||
>
|
||||
<div
|
||||
class="input-number input-number-unit-1 lineSpace"
|
||||
style="width: 80px"
|
||||
v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5"
|
||||
>
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="4.5"
|
||||
step="0.1"
|
||||
v-model="entityOptions.space"
|
||||
/>
|
||||
<span class="unit">倍</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">首尾相连</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.noseToTail" />
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="标签风格" name="4">
|
||||
<labelStyle type="线" :entityOptions="entityOptions"></labelStyle>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div style="position: absolute; left: 24px; display: flex">
|
||||
<button @click="nodeEdit">
|
||||
<svg class="icon-edit">
|
||||
<use xlink:href="#yj-icon-edit"></use></svg>二次编辑
|
||||
</button>
|
||||
<button style="margin-left: 10px" @click="translate">平移</button>
|
||||
</div>
|
||||
<button @click="remove">删除</button>
|
||||
<button @click="confirm">确定</button>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, getCurrentInstance } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import { updateInfo, deleteSource} from '@/views/largeScreen/components/api'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import Dialog from './baseDialog.vue'
|
||||
import { getFontList } from './fontSelect'
|
||||
// import attribute from './attribute.vue'
|
||||
import labelStyle from './labelStyle.vue'
|
||||
import { useTreeNode } from '../treeNode'
|
||||
|
||||
const { cusUpdateNode, getSelectedNodes, cusRemoveNode } = useTreeNode()
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
|
||||
const length = ref(0)
|
||||
const lengthUnit = ref('m')
|
||||
const fontList = ref(getFontList())
|
||||
const height = ref(10)
|
||||
const heightModeData = ref([
|
||||
{
|
||||
name: '海拔高度',
|
||||
value: '海拔高度',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
name: '相对地表',
|
||||
value: '相对地表',
|
||||
key: 1
|
||||
},
|
||||
{
|
||||
name: '依附模型',
|
||||
value: '依附模型',
|
||||
key: 2
|
||||
}
|
||||
])
|
||||
const lineTypeData = ref([
|
||||
{
|
||||
name: '实线',
|
||||
value: '实线',
|
||||
key: 0,
|
||||
icon: 'line'
|
||||
},
|
||||
{
|
||||
name: '虚线',
|
||||
value: '虚线',
|
||||
key: 1,
|
||||
icon: 'dash-line'
|
||||
},
|
||||
{
|
||||
name: '泛光',
|
||||
value: '泛光',
|
||||
key: 2,
|
||||
icon: 'light-line'
|
||||
},
|
||||
{
|
||||
name: '尾迹光线',
|
||||
value: '尾迹光线',
|
||||
key: 3,
|
||||
icon: 'tail-line'
|
||||
},
|
||||
{
|
||||
name: '多尾迹光线',
|
||||
value: '多尾迹光线',
|
||||
key: 4,
|
||||
icon: 'mult-tail-line'
|
||||
},
|
||||
{
|
||||
name: '流动虚线1',
|
||||
value: '流动虚线1',
|
||||
key: 5,
|
||||
icon: 'flow-dash-line1'
|
||||
},
|
||||
{
|
||||
name: '流动虚线2',
|
||||
value: '流动虚线2',
|
||||
key: 6,
|
||||
icon: 'flow-dash-line2'
|
||||
},
|
||||
{
|
||||
name: '流动箭头1',
|
||||
value: '流动箭头1',
|
||||
key: 7,
|
||||
icon: 'pic-line1'
|
||||
},
|
||||
{
|
||||
name: '流动箭头2',
|
||||
value: '流动箭头2',
|
||||
key: 8,
|
||||
icon: 'pic-line2'
|
||||
},
|
||||
{
|
||||
name: '流动箭头3',
|
||||
value: '流动箭头3',
|
||||
key: 9,
|
||||
icon: 'pic-line3'
|
||||
},
|
||||
{
|
||||
name: '流动箭头4',
|
||||
value: '流动箭头4',
|
||||
key: 10,
|
||||
icon: 'pic-line4'
|
||||
},
|
||||
{
|
||||
name: '流动箭头5',
|
||||
value: '流动箭头5',
|
||||
key: 11,
|
||||
icon: 'pic-line5'
|
||||
},
|
||||
{
|
||||
name: '流动箭头6',
|
||||
value: '流动箭头6',
|
||||
key: 12,
|
||||
icon: 'pic-line6'
|
||||
}
|
||||
])
|
||||
const activeName = ref('2')
|
||||
const activeTd = ref({
|
||||
index: -1,
|
||||
name: ''
|
||||
})
|
||||
const entityOptions: any = ref({})
|
||||
const linePositions = ref([])
|
||||
const colorRef = ref(null)
|
||||
const extendColorRef = ref(null)
|
||||
const heightMode = ref(0)
|
||||
|
||||
let originalOptions
|
||||
let that
|
||||
|
||||
const open = async (id) => {
|
||||
that = window['Earth1'].entityMap.get(id)
|
||||
originalOptions = structuredClone(that.options)
|
||||
entityOptions.value = that
|
||||
heightMode.value = entityOptions.value.heightMode
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
linePositions.value = structuredClone(that.options.positions)
|
||||
that.lengthChangeCallBack = () => {
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = entityOptions.value.lengthByMeter / 1000
|
||||
} else {
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
}
|
||||
}
|
||||
heightModeChange(heightMode.value)
|
||||
baseDialog.value?.open()
|
||||
|
||||
await nextTick()
|
||||
let colorPicker = new (window as any).YJColorPicker({
|
||||
el: colorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.color,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
entityOptions.value.color = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.color = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
let extendColorPicker = new (window as any).YJColorPicker({
|
||||
el: extendColorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.extendColor,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
entityOptions.value.extendColor = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.extendColor = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
}
|
||||
const heightModeChange = (val) => {
|
||||
that.heightMode = heightMode.value
|
||||
}
|
||||
const heightConfirm = () => {
|
||||
that.positionEditing = false
|
||||
for (let i = 0; i < entityOptions.value.options.positions.length; i++) {
|
||||
entityOptions.value.options.positions[i].alt = Number(
|
||||
(entityOptions.value.options.positions[i].alt + Number(height.value)).toFixed(2)
|
||||
)
|
||||
}
|
||||
}
|
||||
const inputDblclick = async (event, i, anme) => {
|
||||
if (heightMode.value == 2) {
|
||||
return
|
||||
}
|
||||
activeTd.value = {
|
||||
index: i,
|
||||
name: anme
|
||||
}
|
||||
await nextTick()
|
||||
let inputElm = event.target.getElementsByClassName('input')[0]
|
||||
if (inputElm) {
|
||||
inputElm.focus()
|
||||
}
|
||||
}
|
||||
const inputBlurCallBack = (event, i, name, digit = 2) => {
|
||||
entityOptions.value.options.positions[i][name] = Number(Number(event.target.value).toFixed(digit))
|
||||
entityOptions.value.positionEditing = false
|
||||
activeTd.value = {
|
||||
index: -1,
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
|
||||
const lineTypechange = () => {}
|
||||
const nodeEdit = () => {
|
||||
entityOptions.value.positionEditing = false
|
||||
entityOptions.value.noseToTail = false
|
||||
heightMode.value = 0
|
||||
that.heightMode = 0
|
||||
that.nodeEdit((positions, lenByMeter) => {
|
||||
entityOptions.value.options.positions = structuredClone(positions)
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = lenByMeter / 1000
|
||||
} else {
|
||||
length.value = lenByMeter
|
||||
}
|
||||
})
|
||||
}
|
||||
const translate = () => {
|
||||
that.openPositionEditing(() => {
|
||||
entityOptions.value.options.positions = structuredClone(that.options.positions)
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = entityOptions.value.lengthByMeter / 1000
|
||||
} else {
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const closeCallback = () => {
|
||||
entityOptions.value.originalOptions = structuredClone(originalOptions)
|
||||
that.positionEditing = false
|
||||
entityOptions.value.closeNodeEdit()
|
||||
entityOptions.value.reset()
|
||||
// eventBus.emit('destroyComponent')
|
||||
}
|
||||
const confirm = () => {
|
||||
originalOptions = structuredClone(that.options)
|
||||
baseDialog.value?.close()
|
||||
let params = structuredClone(that.options)
|
||||
delete params.host
|
||||
let params2 = {
|
||||
id: params.id,
|
||||
sourceName: params.name,
|
||||
params: params,
|
||||
isShow: params.show ? 1 : 0
|
||||
}
|
||||
updateInfo(params2)
|
||||
cusUpdateNode({ id: params.id, sourceName: params.name, params: JSON.stringify(params) })
|
||||
}
|
||||
const close = () => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
|
||||
const remove = () => {
|
||||
close()
|
||||
ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
let selectNodes = getSelectedNodes(window['treeObj'])
|
||||
let source_ids = cusRemoveNode(window['treeObj'], selectNodes)
|
||||
const res = await deleteSource({ ids: source_ids })
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
that.remove()
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.msg || '删除失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
})
|
||||
}
|
||||
|
||||
watch(
|
||||
() => lengthUnit.value,
|
||||
(val) => {
|
||||
if (entityOptions.value.lengthByMeter || entityOptions.value.lengthByMeter == 0) {
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = entityOptions.value.lengthByMeter / 1000
|
||||
} else {
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.polyline {
|
||||
::v-deep .input-select-unit-box {
|
||||
.el-input-group__prepend {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
width: 130px;
|
||||
padding: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
box-shadow: unset;
|
||||
|
||||
.el-input__inner {
|
||||
border-radius: 0;
|
||||
background: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input-group__append {
|
||||
width: 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
51
src/views/largeScreen/components/newMap/dialog/fontSelect.ts
Normal file
51
src/views/largeScreen/components/newMap/dialog/fontSelect.ts
Normal file
@ -0,0 +1,51 @@
|
||||
let fontData = [
|
||||
{
|
||||
name: '黑体',
|
||||
value: '黑体',
|
||||
font: 'SimHei',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
name: '思源黑体',
|
||||
value: '思源黑体',
|
||||
font: 'SourceHanSansTi',
|
||||
key: 1
|
||||
},
|
||||
{
|
||||
name: '庞门正道标题体',
|
||||
value: '庞门正道标题体',
|
||||
font: 'PMZDBTTi',
|
||||
key: 2
|
||||
},
|
||||
{
|
||||
name: '数黑体',
|
||||
value: '数黑体',
|
||||
font: 'AlimamaShuHeiTi',
|
||||
key: 3
|
||||
}
|
||||
]
|
||||
|
||||
function getFontList() {
|
||||
return fontData
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
function getFontFamily(key: any) {
|
||||
for (let i = 0; i < fontData.length; i++) {
|
||||
if (fontData[i].key == key) {
|
||||
return fontData[i].font;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
function getFontFamilyName(key: any) {
|
||||
for (let i = 0; i < fontData.length; i++) {
|
||||
if (fontData[i].key == key) {
|
||||
return fontData[i].name;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { getFontList, getFontFamily, getFontFamilyName }
|
||||
190
src/views/largeScreen/components/newMap/dialog/groundText.vue
Normal file
190
src/views/largeScreen/components/newMap/dialog/groundText.vue
Normal file
@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" title="贴地文字属性" left="180px" top="100px" className="ground-text"
|
||||
:closeCallback="closeCallback">
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">名称</span>
|
||||
<textarea v-model="entityOptions.text"></textarea>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">颜色</span>
|
||||
<div class="color" ref="colorRef" </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">经度</span>
|
||||
<input class="input" type="number" title="" min="-180" max="180"
|
||||
v-model="entityOptions.lng">
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">纬度</span>
|
||||
<input class="input" type="number" title="" min="-90" max="90" v-model="entityOptions.lat">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">旋转角度</span>
|
||||
<input type="range" max="360" min="0" step="1" v-model="entityOptions.angle">
|
||||
<div class="input-number input-number-unit"
|
||||
style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
|
||||
<input class="input" type="number" title="" min="0" max="360" step="1"
|
||||
v-model="entityOptions.angle">
|
||||
<span class="unit">°</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">调整大小</span>
|
||||
<input type="range" max="100000" min="0" step="0.01" v-model="entityOptions.scale">
|
||||
<div class="input-number" style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
|
||||
<input class="input" type="number" title="" min="0" max="100000" step="0.01"
|
||||
v-model="entityOptions.scale">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">滚动速度</span>
|
||||
<input type="range" max="100" min="0" step="1" v-model="entityOptions.speed">
|
||||
<div class="input-number" style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
|
||||
<input class="input" type="number" title="" min="0" max="100" step="1"
|
||||
v-model="entityOptions.speed">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div style="position: absolute; left: 24px; display: flex;">
|
||||
<button style="margin-left: 10px;" @click="translate"><svg class="icon-py">
|
||||
<use xlink:href="#yj-icon-py"></use>
|
||||
</svg>平移</button>
|
||||
</div>
|
||||
<button @click="remove">删除</button>
|
||||
<button @click="confirm">确定</button>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { inject } from "vue";
|
||||
import { updateInfo, deleteSource} from '@/views/largeScreen/components/api'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import Dialog from './baseDialog.vue'
|
||||
import { useTreeNode } from '../treeNode'
|
||||
const { cusUpdateNode, getSelectedNodes, cusRemoveNode } = useTreeNode()
|
||||
|
||||
const baseDialog: any = ref(null);
|
||||
const eventBus: any = inject("bus");
|
||||
const text = ref("")
|
||||
// eventBus.on("openStandTextAdd", () => {
|
||||
// baseDialog.value?.open()
|
||||
// });
|
||||
const entityOptions: any = ref({});
|
||||
let originalOptions: any
|
||||
let that: any
|
||||
const colorRef = ref(null)
|
||||
const open = async (id: any) => {
|
||||
console.log('id', id)
|
||||
that = window['Earth1'].entityMap.get(id)
|
||||
originalOptions = structuredClone(that.options)
|
||||
entityOptions.value = that
|
||||
baseDialog.value?.open()
|
||||
await nextTick()
|
||||
let colorPicker = new window['YJColorPicker']({
|
||||
el: colorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.color,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: color => {
|
||||
entityOptions.value.color = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.color = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
}
|
||||
const confirm = () => {
|
||||
originalOptions = structuredClone(that.options)
|
||||
baseDialog.value?.close()
|
||||
let params = structuredClone(that.options)
|
||||
// 删除不必要的属性
|
||||
delete params.host
|
||||
delete params.name
|
||||
let params2 = {
|
||||
"id": params.id,
|
||||
"sourceName": params.text,
|
||||
"params": params,
|
||||
"isShow": params.show ? 1 : 0,
|
||||
}
|
||||
updateInfo(params2)
|
||||
cusUpdateNode({ "id": params.id, "sourceName": params.text, "params": JSON.stringify(params) })
|
||||
}
|
||||
const close = () => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
const remove = () => {
|
||||
close()
|
||||
ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
let selectNodes = getSelectedNodes(window['treeObj'])
|
||||
let source_ids = cusRemoveNode(window['treeObj'], selectNodes)
|
||||
const res = await deleteSource({ ids: source_ids })
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
entityOptions.value.remove()
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.msg || '删除失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 用户点击取消，不执行任何操作
|
||||
})
|
||||
}
|
||||
const translate = () => {
|
||||
entityOptions.value.positionEditing = true
|
||||
}
|
||||
|
||||
const closeCallback = () => {
|
||||
entityOptions.value.originalOptions = structuredClone(originalOptions)
|
||||
that.positionEditing = false
|
||||
that.reset()
|
||||
// eventBus?.emit("destroyComponent")
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
240
src/views/largeScreen/components/newMap/dialog/labelStyle.vue
Normal file
240
src/views/largeScreen/components/newMap/dialog/labelStyle.vue
Normal file
@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">新增{{ type }}标签风格设置</span>
|
||||
<button style="margin-right: 56px">初始风格</button>
|
||||
<button>当前风格</button>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="row"></div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label" style="margin-right: 42px">标签设置</span>
|
||||
<span class="label">标签显示</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.labelShow" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 114px">
|
||||
<span class="label">视野缩放</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.labelScaleByDistance" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">最近距离</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="99999999"
|
||||
v-model="entityOptions.labelNear"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">最远距离</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="99999999"
|
||||
v-model="entityOptions.labelFar"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="row"></div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">字体样式</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 114px">
|
||||
<span class="label">字体颜色</span>
|
||||
<div class="labelColor" ref="labelColorRef"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">字体大小</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="99"
|
||||
v-model="entityOptions.labelFontSize"
|
||||
/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col font-select-box">
|
||||
<span class="label" style="flex: none">字体选择</span>
|
||||
<el-select class="input input-select font-select" v-model="entityOptions.labelFontFamily">
|
||||
<el-option v-for="item in fontList" :key="item.key" :label="item.name" :value="item.key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="row">
|
||||
<div class="col" style="flex: 0 0 114px;">
|
||||
<span class="label">轮廓颜色</span>
|
||||
<div class="outlineColor"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">标签样式</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">引线颜色</span>
|
||||
<div class="labelLineColor" ref="labelLineColorRef"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">背景颜色</span>
|
||||
<div class="labelBackgroundColorStart" ref="labelBackgroundColorStartRef" style="margin-right: 10px;"></div>
|
||||
<div class="labelBackgroundColorEnd" ref="labelBackgroundColorEndRef"></div>
|
||||
</div>
|
||||
<!-- <div class="col font-select-box">
|
||||
<span class="label" style="flex: none">字体选择</span>
|
||||
<el-select class="input input-select font-select" v-model="entityOptions.labelFontFamily">
|
||||
<el-option v-for="item in fontList" :key="item.key" :label="item.name" :value="item.key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">引线宽度</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="999"
|
||||
v-model="entityOptions.labelLineWidth"
|
||||
/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">引线长度</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="999"
|
||||
v-model="entityOptions.labelPixelOffset"
|
||||
/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import { getFontList } from './fontSelect'
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
entityOptions: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
})
|
||||
const entityOptions = ref(props.entityOptions)
|
||||
const fontList = ref(getFontList())
|
||||
const labelColorRef = ref(null)
|
||||
const labelLineColorRef = ref(null)
|
||||
const labelBackgroundColorStartRef = ref(null)
|
||||
const labelBackgroundColorEndRef = ref(null)
|
||||
|
||||
const fontChange = (val) => {
|
||||
entityOptions.value.labelFontFamily = val
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
new (window as any).YJColorPicker({
|
||||
el: labelColorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.labelColor,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
entityOptions.value.labelColor = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.labelColor = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
new (window as any).YJColorPicker({
|
||||
el: labelLineColorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.labelLineColor,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
entityOptions.value.labelLineColor = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.labelLineColor = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
new (window as any).YJColorPicker({
|
||||
el: labelBackgroundColorStartRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.labelBackgroundColorStart,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
entityOptions.value.labelBackgroundColorStart = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.labelBackgroundColorStart = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
new (window as any).YJColorPicker({
|
||||
el: labelBackgroundColorEndRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.labelBackgroundColorEnd,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
entityOptions.value.labelBackgroundColorEnd = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.labelBackgroundColorEnd = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
547
src/views/largeScreen/components/newMap/dialog/model.vue
Normal file
547
src/views/largeScreen/components/newMap/dialog/model.vue
Normal file
@ -0,0 +1,547 @@
|
||||
<script setup lang="ts">
|
||||
import { getCurrentInstance } from 'vue';
|
||||
import { getModelList, getModelTypeList, addOtherSource } from '@/views/largeScreen/components/api';
|
||||
import { useTreeNode } from '../treeNode';
|
||||
const isShowPup = ref(false);
|
||||
const categories = ref<any[]>([]);
|
||||
const loading = ref(false);
|
||||
const { cusAddNodes } = useTreeNode();
|
||||
//-----------类型树-----------
|
||||
|
||||
interface TypeNode {
|
||||
id: string;
|
||||
label: string;
|
||||
parentId: string | null;
|
||||
children?: TypeNode[];
|
||||
}
|
||||
let typeArr = {
|
||||
point: '点',
|
||||
line: '线',
|
||||
area: '面'
|
||||
};
|
||||
const currentTypeId = ref<string>('');
|
||||
const typeTreeData = ref<TypeNode[]>([]);
|
||||
|
||||
let activeIndex: any = ref(null);
|
||||
// 获取组件实例
|
||||
const instance = getCurrentInstance();
|
||||
instance.proxy['$recvChanel']('open-model', () => {
|
||||
console.log('open-model');
|
||||
isShowPup.value = true;
|
||||
typeList();
|
||||
});
|
||||
const typeList = async () => {
|
||||
const res: any = await getModelTypeList();
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
console.log('typeList', res);
|
||||
let data = transformNestedJson(res.data, 'name', 'label');
|
||||
typeTreeData.value = data;
|
||||
}
|
||||
};
|
||||
const transformNestedJson = (data, oldKey, newKey) => {
|
||||
if (Array.isArray(data)) {
|
||||
return data.map((item) => transformNestedJson(item, oldKey, newKey));
|
||||
} else if (data && typeof data === 'object') {
|
||||
const newObj = {};
|
||||
for (const key in data) {
|
||||
// 替换键名
|
||||
const currentKey = key === oldKey ? newKey : key;
|
||||
// 递归处理子元素
|
||||
newObj[currentKey] = transformNestedJson(data[key], oldKey, newKey);
|
||||
}
|
||||
return newObj;
|
||||
}
|
||||
return data;
|
||||
};
|
||||
const handleTypeClick = (row: TypeNode) => {
|
||||
getModelListByType(row.id);
|
||||
currentTypeId.value = row['$treeNodeId'];
|
||||
};
|
||||
const getModelListByType = (id) => {
|
||||
let formData = new FormData();
|
||||
formData.append('modelTypeId', id);
|
||||
console.log('formData', formData.get('modelTypeId'));
|
||||
getModelList(formData).then((res) => {
|
||||
categories.value = res.data;
|
||||
});
|
||||
};
|
||||
const filterNode: any = (value, data) => {
|
||||
if (!value) return true;
|
||||
return data.label.includes(value);
|
||||
};
|
||||
const modelClick = (index, row) => {
|
||||
activeIndex.value = index;
|
||||
console.log('modelClick', row);
|
||||
|
||||
// 轨迹运动选择模型
|
||||
// if (selectCallback && typeof selectCallback === 'function' && addType.value === 'trajectoryMotion') {
|
||||
// selectCallback('http://127.0.0.1:8848' + row.data);
|
||||
// close();
|
||||
// return;
|
||||
// }
|
||||
|
||||
// if (!isSetting) {
|
||||
// ElMessage.warning('请先设置模型默认参数');
|
||||
// return;
|
||||
// }
|
||||
|
||||
isShowPup.value = false;
|
||||
let id = new window['YJ'].Tools().randomString();
|
||||
new window['YJ'].Obj.BatchModel(window['Earth1'], { id, type: typeArr['point'] }, function (data) {
|
||||
console.log(data);
|
||||
renderModel(data, row);
|
||||
});
|
||||
const renderModel = async (option, model) => {
|
||||
let selectedNode = window['treeObj'].getSelectedNodes()[0];
|
||||
// 存在坐标
|
||||
if (option.positions.length > 0) {
|
||||
let id = new window['YJ'].Tools().randomString();
|
||||
let params = {
|
||||
id: id,
|
||||
position: option.positions[0],
|
||||
name: model.modelName,
|
||||
show: true,
|
||||
scale: { x: 1, y: 1, z: 1 },
|
||||
url: getURL(model.modelDataUrl),
|
||||
maximumScale: 1,
|
||||
rotate: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
z: 0
|
||||
}
|
||||
};
|
||||
await new window['YJ'].Obj.Model(window['Earth1'], params);
|
||||
let DbOption: any = {
|
||||
params,
|
||||
id,
|
||||
sourceName: model.modelName,
|
||||
sourceType: 'model',
|
||||
parentId: selectedNode ? (selectedNode.sourceType == 'directory' ? selectedNode.id : selectedNode.parentId) : undefined
|
||||
};
|
||||
|
||||
addOtherSource(DbOption);
|
||||
DbOption.params = JSON.stringify(DbOption.params);
|
||||
DbOption.isShow = true;
|
||||
cusAddNodes(window['treeObj'], DbOption.parentId, [DbOption]);
|
||||
}
|
||||
};
|
||||
};
|
||||
const getURL = (url) => {
|
||||
// 'http://192.168.110.2:3456';
|
||||
return import.meta.env.VITE_APP_MAP_API + url;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="set_pup">
|
||||
<el-dialog :close-on-click-modal="false" v-model="isShowPup" :modal="false" draggable>
|
||||
<template #header>
|
||||
<div class="set_pup_header">
|
||||
<div class="system_title">模型选择</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="set_detail">
|
||||
<!-- 搜索和参数设置-->
|
||||
<!-- <div class="top">
|
||||
<el-input v-model="modelName" class="w-50 m-2" placeholder="请输入模型名称进行搜索" :suffix-icon="Search" />
|
||||
<button @click="setting" class="btn">
|
||||
<svg-icon name="sys_set" class="setIcon" :size="12" color="rgba(255,255,255, 1)" style="margin-right: 5px"></svg-icon>默认模型参数设置
|
||||
</button>
|
||||
</div>-->
|
||||
<div class="content">
|
||||
<!-- 左侧Tab导航 -->
|
||||
<div class="treeCon">
|
||||
<el-tree
|
||||
style="max-width: 600px"
|
||||
:data="typeTreeData"
|
||||
ref="treeRef"
|
||||
node-key="id"
|
||||
@node-click="handleTypeClick"
|
||||
:filter-node-method="filterNode"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<!-- <span> {{ node.label }}</span> -->
|
||||
<!-- @click.stop="toggleExpand(node)" @click.stop="toggleExpand(node)" -->
|
||||
<span
|
||||
:class="{
|
||||
'primary-type': !(node.childNodes.length != 0),
|
||||
'selected-text': node.id === currentTypeId
|
||||
}"
|
||||
|
||||
class="allowDrag"
|
||||
>
|
||||
<svg-icon
|
||||
:name="node.expanded ? 'arrow' : 'more'"
|
||||
:size="12"
|
||||
color="rgba(0, 255, 255, 1)"
|
||||
style="margin-right: 5px; margin-left: 5px"
|
||||
v-if="node.childNodes.length != 0"
|
||||
|
||||
></svg-icon>
|
||||
{{ node.label }}</span
|
||||
>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
|
||||
<div class="model-gallery" ref="galleryRef">
|
||||
<div class="model-section">
|
||||
<!-- <h2 class="section-title">{{ categories[Number(currentTypeId)].name }}</h2> -->
|
||||
<div class="model-grid">
|
||||
<div v-for="(model, mIndex) in categories" :key="mIndex" class="model-item" @click="modelClick(mIndex, model)">
|
||||
<div class="imgbg">
|
||||
<el-image :src="getURL(model.posterDataUrl)" fit="cover" class="thumbnail">
|
||||
<!-- <template #error>-->
|
||||
<!-- <div class="image-error">加载失败</div>-->
|
||||
<!-- </template>-->
|
||||
</el-image>
|
||||
</div>
|
||||
|
||||
<div class="model-name" :class="{ isactive: activeIndex == mIndex }">
|
||||
{{ model.modelName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="loading" class="loading-more">加载中...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:root {
|
||||
--color-sdk-base-rgb: 0, 255, 255;
|
||||
--color-sdk-auxiliary: 0, 66, 66;
|
||||
--color-sdk-auxiliary-public: #ffffff;
|
||||
--color-sdk-warning-0: #1bf8c3;
|
||||
--color-sdk-warning-1: #f16c55;
|
||||
--color-sdk-warning-2: #ffa145;
|
||||
--color-sdk-warning-3: #ffdf53;
|
||||
--color-sdk-text-head: #ffffff;
|
||||
--color-sdk-text-head-1: #e6f7ff;
|
||||
--color-sdk-text-head-2: #adf1ff;
|
||||
--color-sdk-gradual: rgb(0, 255, 255) 6.25%, rgb(0, 200, 255) 100%;
|
||||
--color-sdk-bg-gradual: #00ffff33 0%, #00ffff00 100%;
|
||||
--color-sdk-text-shadow: rgba(20, 118, 255, 1);
|
||||
}
|
||||
.set_pup {
|
||||
position: fixed;
|
||||
width: 40vw;
|
||||
height: 50vh;
|
||||
:deep(.el-dialog) {
|
||||
background: linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.6);
|
||||
border: 1px solid #00c9ff;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
:deep(.el-dialog__headerbtn) {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-bottom-left-radius: 80%;
|
||||
background-color: #008989;
|
||||
&:hover {
|
||||
background-color: #00ffff;
|
||||
.el-dialog__close {
|
||||
color: rgba(0, 66, 66, 1); // 悬停时改变关闭图标为红色
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-dialog__headerbtn .el-dialog__close) {
|
||||
color: #fff;
|
||||
}
|
||||
.set_pup_header {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-color: #00ffff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 20px;
|
||||
.system_title {
|
||||
background: url('@/assets/images/map/titlebg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 229px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
font-family: 'alimamashuheiti';
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.set_detail {
|
||||
box-sizing: border-box;
|
||||
// height: 50vh;
|
||||
:deep(
|
||||
.el-tabs--left .el-tabs__active-bar.is-left,
|
||||
.el-tabs--left .el-tabs__active-bar.is-right,
|
||||
.el-tabs--right .el-tabs__active-bar.is-left,
|
||||
.el-tabs--right .el-tabs__active-bar.is-right
|
||||
) {
|
||||
width: 3px;
|
||||
background: rgba(0, 255, 255, 1);
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
:deep(
|
||||
.el-tabs--left .el-tabs__nav-wrap.is-left::after,
|
||||
.el-tabs--left .el-tabs__nav-wrap.is-right::after,
|
||||
.el-tabs--right .el-tabs__nav-wrap.is-left::after,
|
||||
.el-tabs--right .el-tabs__nav-wrap.is-right::after
|
||||
) {
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav-wrap::after) {
|
||||
background: rgba(204, 204, 204, 0.5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
// .switchmy {
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// margin-top: 15px;
|
||||
|
||||
// .center {
|
||||
// width: 33%;
|
||||
// margin-bottom: 15px;
|
||||
// }
|
||||
// }
|
||||
:deep(.el-tabs__content) {
|
||||
height: 50vh;
|
||||
width: 80%;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// 美化滚动条
|
||||
:deep(.el-tabs__content::-webkit-scrollbar) {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
:deep(.el-tabs__content::-webkit-scrollbar-thumb) {
|
||||
background-color: #0ff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
:deep(.el-tabs__content::-webkit-scrollbar-track) {
|
||||
background-color: rgba(0, 255, 255, 0.2);
|
||||
}
|
||||
:deep(.el-tabs__item) {
|
||||
width: 8vw;
|
||||
color: #fff !important;
|
||||
font-size: 1.1rem;
|
||||
font-family: 黑体;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 3px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:deep(.el-tabs__item:hover) {
|
||||
background: linear-gradient(90deg, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 0.5) 48.91%, rgba(0, 255, 255, 0) 100%);
|
||||
border: 1px solid;
|
||||
box-sizing: border-box;
|
||||
border-image: linear-gradient(90deg, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 1) 55.55%, rgba(0, 255, 255, 0) 100%) 1;
|
||||
}
|
||||
:deep(.el-tabs__item.is-active) {
|
||||
background: linear-gradient(90deg, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 0.5) 48.91%, rgba(0, 255, 255, 0) 100%) !important;
|
||||
border: 0.1px solid;
|
||||
// box-sizing: border-box;
|
||||
border-image: linear-gradient(90deg, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 1) 55.55%, rgba(0, 255, 255, 0) 100%) 1 !important;
|
||||
}
|
||||
:deep(.el-tabs__header) {
|
||||
height: 50vh !important;
|
||||
width: 8vw;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
:deep(.el-tabs__nav-next, .el-tabs__nav-prev) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.el-input {
|
||||
width: 300px;
|
||||
margin-left: 30px;
|
||||
|
||||
--el-input-placeholder-color: rgba(173, 241, 255, 1) !important;
|
||||
--el-input-placeholder-font-size: 14px;
|
||||
--el-input-text-color: #fff;
|
||||
--el-input-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
--el-input-hover-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
--el-input-focus-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
}
|
||||
::v-deep .el-input__wrapper {
|
||||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
.btn {
|
||||
float: right;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: rgba(var(--color-sdk-base-rgb), 0.2) !important;
|
||||
border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
border-radius: 4px;
|
||||
color: #fff !important;
|
||||
padding: 0 15px;
|
||||
}
|
||||
.btn:hover {
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
border: 1px solid rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
.setIcon {
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 20px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
.model-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
.model-tabs {
|
||||
width: 130px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
.treeCon {
|
||||
width: 140px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
border-right: 1px solid rgba(204, 204, 204, 0.2);
|
||||
}
|
||||
.model-gallery {
|
||||
flex: 1;
|
||||
/* padding: 20px; */
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
width: calc(100% - 160px);
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.model-section {
|
||||
min-height: 10vh;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.model-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* justify-content: space-around; */
|
||||
//justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
.model-name {
|
||||
width: 100%;
|
||||
//height: 30px;
|
||||
//line-height: 30px;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
/* overflow-wrap: break-word; */
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
.isactive {
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
.model-item {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
width: 18%;
|
||||
/* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
|
||||
}
|
||||
.model-item:hover {
|
||||
cursor: pointer !important;
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
.model-name {
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.imgbg {
|
||||
//width: 70px;
|
||||
//height: 70px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
background: url('@/assets/images/map/model-bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.thumbnail {
|
||||
width: 100%;
|
||||
//width: 66px;
|
||||
//height: 66px;
|
||||
//margin-left: 2px;
|
||||
//margin-top: 2px;
|
||||
}
|
||||
.loading-more {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__content {
|
||||
display: none !important;
|
||||
}
|
||||
/* 修改滚动条轨道的颜色 */
|
||||
::v-deep ::-webkit-scrollbar-track {
|
||||
background: rgba(var(--color-sdk-base-rgb), 0.1) !important;
|
||||
}
|
||||
/* 修改滚动条滑块的样式 */
|
||||
::v-deep ::-webkit-scrollbar-thumb {
|
||||
background: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* 当滑块被激活（用户点击或拖动时） */
|
||||
::v-deep ::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
/* 定义背景颜色和圆角 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 1em;
|
||||
background-color: rgba(50, 50, 50, 0.3);
|
||||
}
|
||||
/* //定义滚动条轨道 内阴影+圆角 */
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 1em;
|
||||
background-color: rgba(50, 50, 50, 0.1);
|
||||
}
|
||||
|
||||
/* tree */
|
||||
.el-tree-node__content > .el-tree-node__expand-icon {
|
||||
display: none !important;
|
||||
}
|
||||
.el-tree {
|
||||
background: transparent !important;
|
||||
--el-tree-node-hover-bg-color: rgba(var(--color-sdk-base-rgb), 0.2) !important;
|
||||
color: rgba(255, 255, 255, 1) !important;
|
||||
/* font-size: 12px !important; */
|
||||
width: 130px;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
}
|
||||
::v-deep .el-text {
|
||||
color: rgba(255, 255, 255, 1) !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.selected-text {
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important; /* Element UI主色，可自定义 */
|
||||
}
|
||||
::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
||||
border-right: 1px solid rgba(var(--color-sdk-base-rgb), 0.2) !important;
|
||||
}
|
||||
</style>
|
||||
573
src/views/largeScreen/components/newMap/dialog/modelObject.vue
Normal file
573
src/views/largeScreen/components/newMap/dialog/modelObject.vue
Normal file
@ -0,0 +1,573 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" :title="title + '属性'" left="180px" top="100px" className="polygon"
|
||||
:closeCallback="closeCallback">
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col">
|
||||
<span class="label">名称</span>
|
||||
<input class="input" maxlength="40" type="text" v-model="entityOptions.name" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">颜色</span>
|
||||
<div class="color" ref="colorRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col">
|
||||
<span class="label">经度</span>
|
||||
<input class="input" type="number" title="" min="-180" max="180" v-model="entityOptions.lng" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">最大比例</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input height" type="number" title="" min="0.1" max="99999"
|
||||
v-model="entityOptions.maximumScale" />
|
||||
<span class="unit">倍</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col">
|
||||
<span class="label">纬度</span>
|
||||
<input class="input" type="number" title="" min="-90" max="90" v-model="entityOptions.lat" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">最小像素</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="1" max="99999"
|
||||
v-model="entityOptions.minimumPixelSize" />
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col">
|
||||
<span class="label">高度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input height" type="number" title="" min="-99999" max="9999999"
|
||||
v-model="entityOptions.alt" />
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">固定大小</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.scaleByDistance" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<el-tabs v-model="activeName">
|
||||
<!-- <el-tab-pane label="属性信息" name="1">
|
||||
<attribute :entityOptions="entityOptions"></attribute>
|
||||
</el-tab-pane> -->
|
||||
<el-tab-pane label="方向信息" name="2">
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<p class="lable-left-line">旋转</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">x 轴</span>
|
||||
<input type="range" min="0" max="360" step="0.01" v-model="entityOptions.rotateX" />
|
||||
<div class="input-number input-number-unit-1" style="width: auto; margin-left: 10px">
|
||||
<input style="width: 100px" type="number" title="" min="0" max="360"
|
||||
v-model="entityOptions.rotateX" />
|
||||
<span class="unit">°</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">y 轴</span>
|
||||
<input type="range" min="0" max="360" step="0.01" v-model="entityOptions.rotateY" />
|
||||
<div class="input-number input-number-unit-1" style="width: auto; margin-left: 10px">
|
||||
<input style="width: 100px" type="number" title="" min="0" max="360"
|
||||
v-model="entityOptions.rotateY" />
|
||||
<span class="unit">°</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">z 轴</span>
|
||||
<input type="range" min="0" max="360" step="0.01" v-model="entityOptions.rotateZ" />
|
||||
<div class="input-number input-number-unit-1" style="width: auto; margin-left: 10px">
|
||||
<input style="width: 100px" type="number" title="" min="0" max="360"
|
||||
v-model="entityOptions.rotateZ" />
|
||||
<span class="unit">°</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 50px">
|
||||
<p class="lable-left-line">缩放</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<el-checkbox v-model="equalSwitch" label="是否等比例缩放" size="large" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-if="equalSwitch">
|
||||
<div class="col">
|
||||
<span class="label">等比例缩放</span>
|
||||
<input type="range" min="0" max="99999" step="1" @change="scaleChange"
|
||||
v-model="entityOptions.scaleX" />
|
||||
<div class="input-number input-number-unit-1" style="width: auto; margin-left: 10px">
|
||||
<input style="width: 100px" type="number" title="" min="0" max="360" @change="scaleChange"
|
||||
v-model="entityOptions.scaleX" />
|
||||
<span class="unit">倍</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" v-if="!equalSwitch">
|
||||
<div class="col">
|
||||
<span class="label">x 轴</span>
|
||||
<input type="range" min="0" max="99999" step="0.01" v-model="entityOptions.scaleX" />
|
||||
<div class="input-number input-number-unit-1" style="width: auto; margin-left: 10px">
|
||||
<input style="width: 100px" type="number" title="" min="0" max="360"
|
||||
v-model="entityOptions.scaleX" />
|
||||
<span class="unit">°</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-if="!equalSwitch">
|
||||
<div class="col">
|
||||
<span class="label">y 轴</span>
|
||||
<input type="range" min="0" max="99999" step="0.01" v-model="entityOptions.scaleY" />
|
||||
<div class="input-number input-number-unit-1" style="width: auto; margin-left: 10px">
|
||||
<input style="width: 100px" type="number" title="" min="0" max="360"
|
||||
v-model="entityOptions.scaleY" />
|
||||
<span class="unit">°</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-if="!equalSwitch">
|
||||
<div class="col">
|
||||
<span class="label">z 轴</span>
|
||||
<input type="range" min="0" max="99999" step="0.01" v-model="entityOptions.scaleZ" />
|
||||
<div class="input-number input-number-unit-1" style="width: auto; margin-left: 10px">
|
||||
<input style="width: 100px" type="number" title="" min="0" max="360"
|
||||
v-model="entityOptions.scaleZ" />
|
||||
<span class="unit">°</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<p class="lable-left-line">高度</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">高度</span>
|
||||
<input type="range" min="-99999" max="999999" step="0.01" v-model="entityOptions.alt" />
|
||||
<div class="input-number input-number-unit-1" style="width: auto; margin-left: 10px">
|
||||
<input style="width: 100px" type="number" title="" min="0" max="360"
|
||||
v-model="entityOptions.alt" />
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="标注风格" name="3">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">标注开关</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.labelShow" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">字体颜色</span>
|
||||
<div class="labelColor" ref="labelColorRef"></div>
|
||||
</div>
|
||||
<div class="col font-select-box">
|
||||
<span class="label" style="flex: none">字体选择</span>
|
||||
<el-select class="input input-select font-select" style="width: 100px"
|
||||
v-model="entityOptions.labelFontFamily">
|
||||
<el-option v-for="item in fontList" :key="item.key" :label="item.name" :value="item.key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">字体大小</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="1" max="99"
|
||||
v-model="entityOptions.labelFontSize" />
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="col">
|
||||
<span class="label">视野缩放</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.labelScaleByDistance" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">最近距离</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="1" max="99999999"
|
||||
v-model="entityOptions.labelNear" />
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">最远距离</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="1" max="99999999"
|
||||
v-model="entityOptions.labelFar" />
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="标签风格" name="4">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">引线颜色</span>
|
||||
<div class="labelLineColor" ref="labelLineColorRef"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">背景颜色</span>
|
||||
<div class="labelBackgroundColorStart" ref="labelBackgroundColorStartRef"></div>
|
||||
<div class="labelBackgroundColorEnd" ref="labelBackgroundColorEndRef" style="margin-left: 10px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">引线宽度</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="1" max="999"
|
||||
v-model="entityOptions.labelLineWidth" />
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">引线长度</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="0" max="999"
|
||||
v-model="entityOptions.labelPixelOffset" />
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div style="position: absolute; left: 24px; display: flex">
|
||||
<button @click="nodeEdit">
|
||||
<svg class="icon-edit">
|
||||
<use xlink:href="#yj-icon-edit"></use>
|
||||
</svg>二次编辑
|
||||
</button>
|
||||
<button style="margin-left: 10px" v-if="!moveFlag" @click="translate">
|
||||
<svg class="icon-py">
|
||||
<use xlink:href="#yj-icon-py"></use>
|
||||
</svg>平移
|
||||
</button>
|
||||
<button style="margin-left: 10px" v-if="moveFlag" @click="translate">
|
||||
<svg class="icon-py">
|
||||
<use xlink:href="#yj-icon-py"></use>
|
||||
</svg>结束平移
|
||||
</button>
|
||||
</div>
|
||||
<button @click="remove">删除</button>
|
||||
<button @click="confirm">确定</button>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref ,getCurrentInstance} from 'vue';
|
||||
import { inject } from 'vue';
|
||||
import { updateInfo, deleteSource } from '../../api'
|
||||
import Dialog from './baseDialog.vue'
|
||||
import attribute from './attribute.vue'
|
||||
import labelStyle from './labelStyle.vue'
|
||||
import { useTreeNode } from '../treeNode'
|
||||
import { getFontList } from './fontSelect'
|
||||
|
||||
const { cusUpdateNode } = useTreeNode()
|
||||
|
||||
const fontList = ref(getFontList())
|
||||
const instance = getCurrentInstance();
|
||||
const title = ref('模型')
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
const options = ref({})
|
||||
const equalSwitch = ref(true) //是否等比例缩放
|
||||
const colorRef = ref(null)
|
||||
const labelColorRef = ref(null)
|
||||
const labelLineColorRef = ref(null)
|
||||
const labelBackgroundColorStartRef = ref(null)
|
||||
const labelBackgroundColorEndRef = ref(null)
|
||||
// eventBus.on('openPolygonEdit', () => {
|
||||
// baseDialog.value?.open()
|
||||
// })
|
||||
|
||||
const area = ref(0)
|
||||
const height = ref(10)
|
||||
|
||||
const activeName = ref('2')
|
||||
const activeTd = ref({
|
||||
index: -1,
|
||||
name: ''
|
||||
})
|
||||
const positions = ref([])
|
||||
const heightMode = ref(0)
|
||||
const entityOptions: any = ref({})
|
||||
let originalOptions: any
|
||||
let that: any
|
||||
|
||||
const scaleChange = () => {
|
||||
entityOptions.value.scaleY = entityOptions.value.scaleX
|
||||
entityOptions.value.scaleZ = entityOptions.value.scaleX
|
||||
}
|
||||
|
||||
const open = async (id: any, type: any) => {
|
||||
that = window['Earth1'].entityMap.get(id)
|
||||
originalOptions = structuredClone(that.options)
|
||||
entityOptions.value = that
|
||||
heightMode.value = entityOptions.value.heightMode
|
||||
area.value = entityOptions.value.areaByMeter
|
||||
positions.value = structuredClone(that.options.positions)
|
||||
heightModeChange(heightMode.value)
|
||||
baseDialog.value?.open()
|
||||
|
||||
await nextTick()
|
||||
let colorPicker = new window['YJColorPicker']({
|
||||
el: colorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.color,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
entityOptions.value.color = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.color = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
let linecolorPicker = new window['YJColorPicker']({
|
||||
el: labelColorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.labelColor,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
entityOptions.value.labelColor = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.labelColor = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
let ylinecolorPicker = new window['YJColorPicker']({
|
||||
el: labelLineColorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.labelLineColor,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
entityOptions.value.labelLineColor = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.labelLineColor = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
let bgcolorPicker1 = new window['YJColorPicker']({
|
||||
el: labelBackgroundColorStartRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.labelBackgroundColorStart,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
entityOptions.value.labelBackgroundColorStart = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.labelBackgroundColorStart = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
let bgcolorPicker2 = new window['YJColorPicker']({
|
||||
el: labelBackgroundColorEndRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.labelBackgroundColorEnd,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
entityOptions.value.labelBackgroundColorEnd = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.labelBackgroundColorEnd = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
}
|
||||
|
||||
const heightModeChange = (val) => {
|
||||
that.heightMode = heightMode.value
|
||||
}
|
||||
|
||||
const heightConfirm = () => {
|
||||
if (entityOptions.value.operate.positionEditing) {
|
||||
that.positionEditing = false
|
||||
entityOptions.value.height = Number(
|
||||
(entityOptions.value.height + Number(height.value)).toFixed(2)
|
||||
)
|
||||
} else {
|
||||
that.closeNodeEdit(this)
|
||||
that.heightMode = that.heightMode
|
||||
setTimeout(() => {
|
||||
entityOptions.value.height = Number(
|
||||
(entityOptions.value.height + Number(height.value)).toFixed(2)
|
||||
)
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
const inputDblclick = async (event, i, anme) => {
|
||||
if (heightMode.value == 2) {
|
||||
return
|
||||
}
|
||||
activeTd.value = {
|
||||
index: i,
|
||||
name: anme
|
||||
}
|
||||
await nextTick()
|
||||
let inputElm = event.target.getElementsByClassName('input')[0]
|
||||
if (inputElm) {
|
||||
inputElm.focus()
|
||||
}
|
||||
}
|
||||
const inputBlurCallBack = (event, i, name, digit = 2) => {
|
||||
activeTd.value = {
|
||||
index: -1,
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
|
||||
var moveFlag: any = ref(false)
|
||||
const translate = () => {
|
||||
moveFlag.value = !moveFlag.value
|
||||
that.positionEditing = moveFlag.value
|
||||
if (moveFlag.value) {
|
||||
that.rotationEditingCallBack = (res) => {
|
||||
entityOptions.value.options.positions = structuredClone(res)
|
||||
that.options.positions = res
|
||||
}
|
||||
}
|
||||
|
||||
// that.openPositionEditing(() => {
|
||||
// entityOptions.value.options.positions = structuredClone(that.options.positions)
|
||||
// })
|
||||
}
|
||||
|
||||
const closeCallback = () => {
|
||||
entityOptions.value.originalOptions = structuredClone(originalOptions)
|
||||
that.positionEditing = false
|
||||
// entityOptions.value.closeNodeEdit()
|
||||
entityOptions.value.reset()
|
||||
console.log('eventBus',eventBus,entityOptions);
|
||||
// eventBus.emit('destroyComponent')
|
||||
instance.proxy['$sendChanel']('destroyComponent')
|
||||
}
|
||||
|
||||
const nodeEdit = () => {
|
||||
that.nodeEdit((e, positions, areaByMeter) => {
|
||||
entityOptions.value.options.positions = structuredClone(positions)
|
||||
})
|
||||
}
|
||||
|
||||
const confirm = () => {
|
||||
originalOptions = structuredClone(that.options)
|
||||
baseDialog.value?.close()
|
||||
let params = structuredClone(that.options)
|
||||
delete params.attributeType
|
||||
delete params.attribute.ISC
|
||||
delete params.attribute.camera
|
||||
delete params.attribute.goods
|
||||
delete params.attribute.vr
|
||||
|
||||
let params2 = {
|
||||
id: params.id,
|
||||
sourceName: params.name,
|
||||
params: params,
|
||||
isShow: params.show ? 1 : 0
|
||||
}
|
||||
updateInfo(params2)
|
||||
cusUpdateNode({ id: params.id, sourceName: params.name, params: JSON.stringify(params) })
|
||||
}
|
||||
const close = () => {
|
||||
that.positionEditing = false
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
|
||||
const remove = () => {
|
||||
that.remove()
|
||||
close()
|
||||
}
|
||||
|
||||
//-----------------方法-----------------------
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-checkbox.el-checkbox--large .el-checkbox__label {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
::v-deep .el-select__wrapper {
|
||||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
box-shadow: 0 0 0 1px rgba(var(--color-sdk-base-rgb), 0.5) inset !important;
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
--el-select-input-focus-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
--el-select-text-color: #fff;
|
||||
--el-select-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
--el-select-hover-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
--el-select-multiple-input-color: #fff !important;
|
||||
}
|
||||
|
||||
::v-deep .el-select__placeholder {
|
||||
color: rgba(204, 204, 204, 1) !important;
|
||||
}
|
||||
</style>
|
||||
375
src/views/largeScreen/components/newMap/dialog/polygonObject.vue
Normal file
375
src/views/largeScreen/components/newMap/dialog/polygonObject.vue
Normal file
@ -0,0 +1,375 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" :title="title+'属性'" left="180px" top="100px" className="polygon" :closeCallback="closeCallback">
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<div class="col">
|
||||
<span class="label">名称</span>
|
||||
<input class="input" maxlength="40" type="text" v-model="entityOptions.name">
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 60%;">
|
||||
<div class="row">
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label" style="margin-right: 0px;">投影面积:</span>
|
||||
<input class="input input-text" readonly type="text" v-model="area">
|
||||
<el-select v-model="areaUnit">
|
||||
<el-option label="平方米" value="m2"></el-option>
|
||||
<el-option label="平方千米" value="km2"></el-option>
|
||||
<el-option label="亩" value="mu"></el-option>
|
||||
<el-option label="公顷" value="ha"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<el-tabs v-model="activeName">
|
||||
<!-- <el-tab-pane label="属性信息" name="1">
|
||||
<attribute :entityOptions="entityOptions"></attribute>
|
||||
</el-tab-pane> -->
|
||||
<el-tab-pane label="空间信息" name="2">
|
||||
<div class="row">
|
||||
<div class="col height-mode-box">
|
||||
<span class="label" style="flex: 0 0 56px;">高度模式</span>
|
||||
<el-select class="input input-select height-mode-scelect" style="width: 155px;margin-left: 20px"
|
||||
v-model="heightMode" @change="heightModeChange" placeholder="请选择">
|
||||
<el-option v-for="item in heightModeData" :key="item.key" :label="item.name" :value="item.key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">Z值统一增加</span>
|
||||
<div class="input-number input-number-unit-1 height-box" :class="{ 'disabled': heightMode == 2 }">
|
||||
<input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height">
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
<button class="confirm height-confirm" style="margin-left: 5px;" @click="heightConfirm"
|
||||
:disabled="heightMode == 2">应用</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="table spatial-info-table">
|
||||
<div class="table-head">
|
||||
<div class="tr">
|
||||
<div class="th"></div>
|
||||
<div class="th">经度（X）</div>
|
||||
<div class="th">纬度（Y）</div>
|
||||
<div class="th">高度（Z）</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="tr" v-for="(item, i) in entityOptions.options.positions" :key="i">
|
||||
<div class="td">{{ i + 1 }}</div>
|
||||
<div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')">
|
||||
<input class="input" @blur="inputBlurCallBack($event, i, 'lng', 8)" type="number"
|
||||
v-model="item.lng" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lng'">
|
||||
<span style="pointer-events: none;" v-else>{{ (item.lng).toFixed(8) }}</span>
|
||||
</div>
|
||||
<div class="td lat align-center" @dblclick="inputDblclick($event, i, 'lat')">
|
||||
<input class="input" @blur="inputBlurCallBack($event, i, 'lat', 8)" type="number"
|
||||
v-model="item.lat" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lat'">
|
||||
<span style="pointer-events: none;" v-else>{{ (item.lat).toFixed(8) }}</span>
|
||||
</div>
|
||||
<div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')">
|
||||
<input class="input" @blur="inputBlurCallBack($event, i, 'alt', 2)" type="number"
|
||||
v-model="entityOptions.height" min="-9999999" max="999999999"
|
||||
v-if="activeTd.index == i && activeTd.name == 'alt'">
|
||||
<span style="pointer-events: none;" v-else>{{ (entityOptions.height).toFixed(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="面风格" name="3">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">面颜色</span>
|
||||
<div class="color" ref="colorRef"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">描边颜色</span>
|
||||
<div class="lineColor" ref="lineColorRef"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">描边宽度</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="0" max="99" v-model="entityOptions.lineWidth">
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="标签风格" name="4">
|
||||
<labelStyle :type="title" :entityOptions="entityOptions"></labelStyle>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div style="position: absolute; left: 24px; display: flex;">
|
||||
<button @click="nodeEdit"><svg class="icon-edit">
|
||||
<use xlink:href="#yj-icon-edit"></use>
|
||||
</svg>二次编辑</button>
|
||||
<button style="margin-left: 10px;" @click="translate"><svg class="icon-py">
|
||||
<use xlink:href="#yj-icon-py"></use>
|
||||
</svg>平移</button>
|
||||
</div>
|
||||
<button @click="remove">删除</button>
|
||||
<button @click="confirm">确定</button>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { inject } from "vue";
|
||||
import { updateInfo, deleteSource} from '@/views/largeScreen/components/api'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import Dialog from './baseDialog.vue'
|
||||
// import attribute from './attribute.vue'
|
||||
import labelStyle from './labelStyle.vue'
|
||||
import { useTreeNode } from '../treeNode'
|
||||
|
||||
const { cusUpdateNode, getSelectedNodes, cusRemoveNode } = useTreeNode()
|
||||
|
||||
const title = ref('面')
|
||||
const baseDialog: any = ref(null);
|
||||
const eventBus: any = inject('bus')
|
||||
const options = ref({});
|
||||
const colorRef = ref(null)
|
||||
const lineColorRef = ref(null)
|
||||
// eventBus.on("openPolygonEdit", () => {
|
||||
// baseDialog.value?.open()
|
||||
// });
|
||||
|
||||
const area = ref(0)
|
||||
const areaUnit = ref('m2')
|
||||
const height = ref(10)
|
||||
const heightModeData = ref([
|
||||
{
|
||||
name: '海拔高度',
|
||||
value: '海拔高度',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
name: '相对地表',
|
||||
value: '相对地表',
|
||||
key: 1
|
||||
},
|
||||
{
|
||||
name: '依附模型',
|
||||
value: '依附模型',
|
||||
key: 2
|
||||
}
|
||||
])
|
||||
|
||||
const activeName = ref('2')
|
||||
const activeTd = ref({
|
||||
index: -1,
|
||||
name: ''
|
||||
})
|
||||
const positions = ref([])
|
||||
const heightMode = ref(0)
|
||||
const entityOptions: any = ref({});
|
||||
let originalOptions: any
|
||||
let that: any
|
||||
|
||||
const open = async (id: any, type: any) => {
|
||||
if(type && type === 'rectangle') {
|
||||
title.value = '矩形'
|
||||
}
|
||||
else if(type && type === 'rendezvous') {
|
||||
title.value = '集结地'
|
||||
}
|
||||
that = window['Earth1'].entityMap.get(id)
|
||||
originalOptions = structuredClone(that.options)
|
||||
entityOptions.value = that
|
||||
heightMode.value = entityOptions.value.heightMode
|
||||
area.value = entityOptions.value.areaByMeter
|
||||
positions.value = structuredClone(that.options.positions)
|
||||
that.areaChangeCallBack = () => {
|
||||
switch (areaUnit.value) {
|
||||
case 'm2'://平方米
|
||||
area.value = entityOptions.value.areaByMeter
|
||||
break
|
||||
case 'km2'://平方千米
|
||||
area.value = Number((entityOptions.value.areaByMeter / 1000000).toFixed(8))
|
||||
break
|
||||
case 'mu'://亩
|
||||
area.value = Number(
|
||||
(entityOptions.value.areaByMeter / 666.6666667).toFixed(4)
|
||||
)
|
||||
break
|
||||
case 'ha'://公顷
|
||||
area.value = Number((entityOptions.value.areaByMeter / 10000).toFixed(6))
|
||||
break
|
||||
default:
|
||||
area.value = entityOptions.value.areaByMeter
|
||||
}
|
||||
}
|
||||
heightModeChange(heightMode.value)
|
||||
baseDialog.value?.open()
|
||||
|
||||
await nextTick()
|
||||
let colorPicker = new window['YJColorPicker']({
|
||||
el: colorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.color,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: color => {
|
||||
entityOptions.value.color = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.color = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
let linecolorPicker = new window['YJColorPicker']({
|
||||
el: lineColorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.lineColor,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: color => {
|
||||
entityOptions.value.lineColor = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.lineColor = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
}
|
||||
|
||||
const heightModeChange = (val) => {
|
||||
that.heightMode = heightMode.value
|
||||
}
|
||||
|
||||
const heightConfirm = () => {
|
||||
if (entityOptions.value.operate.positionEditing) {
|
||||
that.positionEditing = false
|
||||
entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
|
||||
}
|
||||
else {
|
||||
that.closeNodeEdit(this)
|
||||
that.heightMode = that.heightMode
|
||||
setTimeout(() => {
|
||||
entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
const inputDblclick = async (event, i, anme) => {
|
||||
if(heightMode.value == 2) {
|
||||
return
|
||||
}
|
||||
activeTd.value = {
|
||||
index: i,
|
||||
name: anme
|
||||
}
|
||||
await nextTick()
|
||||
let inputElm = event.target.getElementsByClassName('input')[0]
|
||||
if (inputElm) {
|
||||
inputElm.focus()
|
||||
}
|
||||
}
|
||||
const inputBlurCallBack = (event, i, name, digit = 2) => {
|
||||
activeTd.value = {
|
||||
index: -1,
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
|
||||
const translate = () => {
|
||||
that.openPositionEditing(() => {
|
||||
entityOptions.value.options.positions = structuredClone(that.options.positions)
|
||||
})
|
||||
}
|
||||
|
||||
const closeCallback = () => {
|
||||
entityOptions.value.originalOptions = structuredClone(originalOptions)
|
||||
that.positionEditing = false
|
||||
entityOptions.value.closeNodeEdit()
|
||||
entityOptions.value.reset()
|
||||
// eventBus.emit("destroyComponent")
|
||||
}
|
||||
|
||||
const nodeEdit = () => {
|
||||
that.nodeEdit((e, positions, areaByMeter) => {
|
||||
console.log('positions', positions)
|
||||
entityOptions.value.options.positions = structuredClone(positions)
|
||||
})
|
||||
}
|
||||
|
||||
const confirm = () => {
|
||||
originalOptions = structuredClone(that.options)
|
||||
baseDialog.value?.close()
|
||||
let params = structuredClone(that.options)
|
||||
delete params.host
|
||||
let params2 = {
|
||||
"id": params.id,
|
||||
"sourceName": params.name,
|
||||
"params": params,
|
||||
"isShow": params.show ? 1 : 0,
|
||||
}
|
||||
updateInfo(params2)
|
||||
cusUpdateNode({ "id": params.id, "sourceName": params.name, "params": JSON.stringify(params) })
|
||||
}
|
||||
const close = () => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
|
||||
const remove = () => {
|
||||
close()
|
||||
ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
let selectNodes = getSelectedNodes(window['treeObj'])
|
||||
let source_ids = cusRemoveNode(window['treeObj'], selectNodes)
|
||||
const res = await deleteSource({ ids: source_ids })
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
that.remove()
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.msg || '删除失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 用户点击取消，不执行任何操作
|
||||
})
|
||||
}
|
||||
|
||||
watch(
|
||||
() => areaUnit.value,
|
||||
(val) => {
|
||||
if ((entityOptions.value.areaByMeter || entityOptions.value.areaByMeter == 0) && that) {
|
||||
that.areaChangeCallBack()
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,629 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
title="线标注"
|
||||
left="180px"
|
||||
top="100px"
|
||||
className="polyline"
|
||||
:closeCallback="closeCallback"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col">
|
||||
<span class="label">名称</span>
|
||||
<input class="input" maxlength="40" type="text" v-model="entityOptions.name" />
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 56%">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col input-select-unit-box">
|
||||
<el-select v-model="entityOptions.wordsName">
|
||||
<el-option label="空间长度" :value="0"></el-option>
|
||||
<el-option label="投影长度" :value="1"></el-option>
|
||||
<el-option label="地表长度" :value="2"></el-option>
|
||||
</el-select>
|
||||
<input v-model="length" class="input-text" readonly />
|
||||
<el-select v-model="lengthUnit">
|
||||
<el-option label="米" value="m"></el-option>
|
||||
<el-option label="千米" value="km"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<el-tabs v-model="activeName">
|
||||
<!-- <el-tab-pane label="属性信息" name="1">
|
||||
<attribute :entityOptions="entityOptions"></attribute>
|
||||
</el-tab-pane> -->
|
||||
<el-tab-pane label="空间信息" name="2">
|
||||
<div class="row">
|
||||
<div class="col height-mode-box">
|
||||
<span class="label" style="flex: 0 0 56px">高度模式</span>
|
||||
<el-select
|
||||
class="input input-select height-mode-scelect"
|
||||
style="width: 155px; margin-left: 20px"
|
||||
v-model="heightMode"
|
||||
@change="heightModeChange"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in heightModeData"
|
||||
:key="item.key"
|
||||
:label="item.name"
|
||||
:value="item.key"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">Z值统一增加</span>
|
||||
<div
|
||||
class="input-number input-number-unit-1 height-box"
|
||||
:class="{ disabled: heightMode == 2 }"
|
||||
>
|
||||
<input
|
||||
class="input height"
|
||||
type="number"
|
||||
title=""
|
||||
min="-9999999"
|
||||
max="999999999"
|
||||
v-model="height"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
<button
|
||||
class="confirm height-confirm"
|
||||
style="margin-left: 5px"
|
||||
@click="heightConfirm"
|
||||
:disabled="heightMode == 2"
|
||||
>
|
||||
应用
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="table spatial-info-table">
|
||||
<div class="table-head">
|
||||
<div class="tr">
|
||||
<div class="th"></div>
|
||||
<div class="th">经度（X）</div>
|
||||
<div class="th">纬度（Y）</div>
|
||||
<div class="th">高度（Z）</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="tr" v-for="(item, i) in entityOptions.options.positions" :key="i">
|
||||
<div class="td">{{ i + 1 }}</div>
|
||||
<div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')">
|
||||
<input
|
||||
class="input"
|
||||
@blur="inputBlurCallBack($event, i, 'lng', 8)"
|
||||
type="number"
|
||||
v-model="item.lng"
|
||||
min="-180"
|
||||
max="180"
|
||||
v-if="activeTd.index == i && activeTd.name == 'lng'"
|
||||
/>
|
||||
<span style="pointer-events: none" v-else>{{ item.lng.toFixed(8) }}</span>
|
||||
</div>
|
||||
<div class="td lat align-center" @dblclick="inputDblclick($event, i, 'lat')">
|
||||
<input
|
||||
class="input"
|
||||
@blur="inputBlurCallBack($event, i, 'lat', 8)"
|
||||
type="number"
|
||||
v-model="item.lat"
|
||||
min="-180"
|
||||
max="180"
|
||||
v-if="activeTd.index == i && activeTd.name == 'lat'"
|
||||
/>
|
||||
<span style="pointer-events: none" v-else>{{ item.lat.toFixed(8) }}</span>
|
||||
</div>
|
||||
<div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')">
|
||||
<input
|
||||
class="input"
|
||||
@blur="inputBlurCallBack($event, i, 'alt', 2)"
|
||||
type="number"
|
||||
v-model="item.alt"
|
||||
min="-9999999"
|
||||
max="999999999"
|
||||
v-if="activeTd.index == i && activeTd.name == 'alt'"
|
||||
/>
|
||||
<span style="pointer-events: none" v-else>{{ item.alt.toFixed(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="线条风格" name="3">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">线条颜色</span>
|
||||
<div class="color" ref="colorRef"></div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%">
|
||||
<span class="label">线条宽度</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="999"
|
||||
v-model="entityOptions.lineWidth"
|
||||
/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col input-select-line-type-box" style="flex: 0 0 37%">
|
||||
<span class="label">线条形式</span>
|
||||
<el-select
|
||||
class="input input-select input-select-line-type"
|
||||
style="margin-left: 20px"
|
||||
v-model="entityOptions.lineType"
|
||||
@change="lineTypechange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in lineTypeData"
|
||||
:key="item.key"
|
||||
:label="item.name"
|
||||
:value="item.key"
|
||||
>
|
||||
<i class="yj-custom-icon" :class="item.icon"></i>
|
||||
{{ item.name }}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">首尾相连</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.noseToTail" />
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%">
|
||||
<span class="label">线段圆滑</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.smooth" />
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 37%"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">线段缓冲</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.extend" />
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%">
|
||||
<span class="label">缓冲宽度</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
data-min="0.01"
|
||||
max="999999"
|
||||
v-model="entityOptions.extendWidth"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 37%">
|
||||
<span class="label">缓冲颜色</span>
|
||||
<div class="extendColor" ref="extendColorRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-show="entityOptions.lineType > 2 && entityOptions.lineType < 13">
|
||||
<div class="col">
|
||||
<span class="label">首尾反向</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.rotate" />
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%">
|
||||
<span class="label">流动速率</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="999999"
|
||||
step="1"
|
||||
v-model="entityOptions.speed"
|
||||
/>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 37%">
|
||||
<span
|
||||
class="label lineSpace"
|
||||
v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5"
|
||||
>线条间距</span
|
||||
>
|
||||
<div
|
||||
class="input-number input-number-unit-1 lineSpace"
|
||||
style="width: 80px"
|
||||
v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5"
|
||||
>
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="4.5"
|
||||
step="0.1"
|
||||
v-model="entityOptions.space"
|
||||
/>
|
||||
<span class="unit">倍</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="标签风格" name="4">
|
||||
<labelStyle type="线" :entityOptions="entityOptions"></labelStyle>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div style="position: absolute; left: 24px; display: flex">
|
||||
<button @click="nodeEdit">
|
||||
<svg class="icon-edit">
|
||||
<use xlink:href="#yj-icon-edit"></use></svg>二次编辑
|
||||
</button>
|
||||
<button style="margin-left: 10px" @click="translate">
|
||||
<svg class="icon-py">
|
||||
<use xlink:href="#yj-icon-py"></use></svg>平移
|
||||
</button>
|
||||
</div>
|
||||
<button @click="remove">删除</button>
|
||||
<button @click="confirm">确定</button>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, getCurrentInstance } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import { updateInfo, deleteSource} from '@/views/largeScreen/components/api'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import Dialog from './baseDialog.vue'
|
||||
// import attribute from './attribute.vue'
|
||||
import labelStyle from './labelStyle.vue'
|
||||
import { useTreeNode } from '../treeNode'
|
||||
import { de } from 'element-plus/es/locale/index.mjs'
|
||||
|
||||
const { cusUpdateNode, getSelectedNodes, cusRemoveNode } = useTreeNode()
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
|
||||
const length = ref(0)
|
||||
const lengthUnit = ref('m')
|
||||
const height = ref(10)
|
||||
const heightModeData = ref([
|
||||
{
|
||||
name: '海拔高度',
|
||||
value: '海拔高度',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
name: '相对地表',
|
||||
value: '相对地表',
|
||||
key: 1
|
||||
},
|
||||
{
|
||||
name: '依附模型',
|
||||
value: '依附模型',
|
||||
key: 2
|
||||
}
|
||||
])
|
||||
const lineTypeData = ref([
|
||||
{
|
||||
name: '实线',
|
||||
value: '实线',
|
||||
key: 0,
|
||||
icon: 'line'
|
||||
},
|
||||
{
|
||||
name: '虚线',
|
||||
value: '虚线',
|
||||
key: 1,
|
||||
icon: 'dash-line'
|
||||
},
|
||||
{
|
||||
name: '泛光',
|
||||
value: '泛光',
|
||||
key: 2,
|
||||
icon: 'light-line'
|
||||
},
|
||||
{
|
||||
name: '尾迹光线',
|
||||
value: '尾迹光线',
|
||||
key: 3,
|
||||
icon: 'tail-line'
|
||||
},
|
||||
{
|
||||
name: '多尾迹光线',
|
||||
value: '多尾迹光线',
|
||||
key: 4,
|
||||
icon: 'mult-tail-line'
|
||||
},
|
||||
{
|
||||
name: '流动虚线1',
|
||||
value: '流动虚线1',
|
||||
key: 5,
|
||||
icon: 'flow-dash-line1'
|
||||
},
|
||||
{
|
||||
name: '流动虚线2',
|
||||
value: '流动虚线2',
|
||||
key: 6,
|
||||
icon: 'flow-dash-line2'
|
||||
},
|
||||
{
|
||||
name: '流动箭头1',
|
||||
value: '流动箭头1',
|
||||
key: 7,
|
||||
icon: 'pic-line1'
|
||||
},
|
||||
{
|
||||
name: '流动箭头2',
|
||||
value: '流动箭头2',
|
||||
key: 8,
|
||||
icon: 'pic-line2'
|
||||
},
|
||||
{
|
||||
name: '流动箭头3',
|
||||
value: '流动箭头3',
|
||||
key: 9,
|
||||
icon: 'pic-line3'
|
||||
},
|
||||
{
|
||||
name: '流动箭头4',
|
||||
value: '流动箭头4',
|
||||
key: 10,
|
||||
icon: 'pic-line4'
|
||||
},
|
||||
{
|
||||
name: '流动箭头5',
|
||||
value: '流动箭头5',
|
||||
key: 11,
|
||||
icon: 'pic-line5'
|
||||
},
|
||||
{
|
||||
name: '流动箭头6',
|
||||
value: '流动箭头6',
|
||||
key: 12,
|
||||
icon: 'pic-line6'
|
||||
}
|
||||
])
|
||||
const activeName = ref('2')
|
||||
const activeTd = ref({
|
||||
index: -1,
|
||||
name: ''
|
||||
})
|
||||
const entityOptions: any = ref({})
|
||||
const linePositions = ref([])
|
||||
const colorRef = ref(null)
|
||||
const extendColorRef = ref(null)
|
||||
const heightMode = ref(0)
|
||||
|
||||
let originalOptions: any
|
||||
let that: any
|
||||
|
||||
const open = async (id: any) => {
|
||||
that = window['Earth1'].entityMap.get(id)
|
||||
originalOptions = structuredClone(that.options)
|
||||
entityOptions.value = that
|
||||
heightMode.value = entityOptions.value.heightMode
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
linePositions.value = structuredClone(that.options.positions)
|
||||
that.lengthChangeCallBack = () => {
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = entityOptions.value.lengthByMeter / 1000
|
||||
} else {
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
}
|
||||
}
|
||||
heightModeChange(heightMode.value)
|
||||
baseDialog.value?.open()
|
||||
|
||||
await nextTick()
|
||||
let colorPicker = new (window as any).YJColorPicker({
|
||||
el: colorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.color,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
entityOptions.value.color = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.color = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
let extendColorPicker = new (window as any).YJColorPicker({
|
||||
el: extendColorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.extendColor,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
entityOptions.value.extendColor = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.extendColor = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
}
|
||||
const heightModeChange = (val) => {
|
||||
that.heightMode = heightMode.value
|
||||
}
|
||||
const heightConfirm = () => {
|
||||
that.positionEditing = false
|
||||
for (let i = 0; i < entityOptions.value.options.positions.length; i++) {
|
||||
entityOptions.value.options.positions[i].alt = Number(
|
||||
(entityOptions.value.options.positions[i].alt + Number(height.value)).toFixed(2)
|
||||
)
|
||||
}
|
||||
that.smooth = that.smooth
|
||||
}
|
||||
const inputDblclick = async (event, i, anme) => {
|
||||
if (heightMode.value == 2) {
|
||||
return
|
||||
}
|
||||
activeTd.value = {
|
||||
index: i,
|
||||
name: anme
|
||||
}
|
||||
await nextTick()
|
||||
let inputElm = event.target.getElementsByClassName('input')[0]
|
||||
if (inputElm) {
|
||||
inputElm.focus()
|
||||
}
|
||||
}
|
||||
const inputBlurCallBack = (event, i, name, digit = 2) => {
|
||||
entityOptions.value.options.positions[i][name] = Number(Number(event.target.value).toFixed(digit))
|
||||
entityOptions.value.positionEditing = false
|
||||
activeTd.value = {
|
||||
index: -1,
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
|
||||
const lineTypechange = () => {}
|
||||
const nodeEdit = () => {
|
||||
entityOptions.value.positionEditing = false
|
||||
entityOptions.value.noseToTail = false
|
||||
heightMode.value = 0
|
||||
that.heightMode = 0
|
||||
that.nodeEdit((positions, lenByMeter) => {
|
||||
entityOptions.value.options.positions = structuredClone(positions)
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = lenByMeter / 1000
|
||||
} else {
|
||||
length.value = lenByMeter
|
||||
}
|
||||
})
|
||||
}
|
||||
const translate = () => {
|
||||
that.openPositionEditing(() => {
|
||||
entityOptions.value.options.positions = structuredClone(that.options.positions)
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = entityOptions.value.lengthByMeter / 1000
|
||||
} else {
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const closeCallback = () => {
|
||||
entityOptions.value.originalOptions = structuredClone(originalOptions)
|
||||
that.positionEditing = false
|
||||
entityOptions.value.closeNodeEdit()
|
||||
entityOptions.value.reset()
|
||||
// eventBus.emit('destroyComponent')
|
||||
}
|
||||
const confirm = () => {
|
||||
originalOptions = structuredClone(that.options)
|
||||
baseDialog.value?.close()
|
||||
let params = structuredClone(that.options)
|
||||
delete params.host
|
||||
let params2 = {
|
||||
id: params.id,
|
||||
sourceName: params.name,
|
||||
params: params,
|
||||
isShow: params.show ? 1 : 0
|
||||
}
|
||||
updateInfo(params2)
|
||||
cusUpdateNode({ id: params.id, sourceName: params.name, params: JSON.stringify(params) })
|
||||
}
|
||||
const close = () => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
|
||||
const remove = () => {
|
||||
close()
|
||||
ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
let selectNodes = getSelectedNodes(window['treeObj'])
|
||||
let source_ids = cusRemoveNode(window['treeObj'], selectNodes)
|
||||
const res = await deleteSource({ ids: source_ids })
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
that.remove()
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.msg || '删除失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 用户点击取消，不执行任何操作
|
||||
})
|
||||
}
|
||||
|
||||
watch(
|
||||
() => lengthUnit.value,
|
||||
(val) => {
|
||||
if (entityOptions.value.lengthByMeter || entityOptions.value.lengthByMeter == 0) {
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = entityOptions.value.lengthByMeter / 1000
|
||||
} else {
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.polyline {
|
||||
::v-deep .input-select-unit-box {
|
||||
.el-input-group__prepend {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
width: 130px;
|
||||
padding: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
box-shadow: unset;
|
||||
|
||||
.el-input__inner {
|
||||
border-radius: 0;
|
||||
background: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input-group__append {
|
||||
width: 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
124
src/views/largeScreen/components/newMap/dialog/rightMenu.vue
Normal file
124
src/views/largeScreen/components/newMap/dialog/rightMenu.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<script setup lang="ts">
|
||||
import { useRightOperate } from '../rightOperate';
|
||||
const menus: any = ref([]); //右侧菜单
|
||||
const { rightMenus, itemClick } = useRightOperate();
|
||||
const rightClickTreeNode: any = ref();
|
||||
// 初始化菜单
|
||||
const initMenus = (arr: any, treeNode: any) => {
|
||||
let rightMenu: any = [];
|
||||
console.log('rightMenu2222', rightMenu);
|
||||
if (treeNode) {
|
||||
rightClickTreeNode.value = treeNode;
|
||||
arr.forEach((menuId: any) => {
|
||||
rightMenu.push(rightMenus[menuId]);
|
||||
});
|
||||
} else rightMenu = [rightMenus.addDirectory];
|
||||
console.log('rightMenu', rightMenu);
|
||||
menus.value = rightMenu;
|
||||
};
|
||||
const hideRightMenu = () => {
|
||||
window['$']('#rMenu')[0].style.visibility = 'hidden';
|
||||
};
|
||||
defineExpose({
|
||||
initMenus
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="rightMenu" id="rMenu">
|
||||
<div class="menuItem custom_scroll_bar">
|
||||
<div v-if="menus.length > 0">
|
||||
<div v-for="item in menus" class="itemBox" :key="item.key" @click="itemClick(item)" @mouseup="hideRightMenu">
|
||||
<!-- <div class="itemIcon">
|
||||
<svg-icon :class-name="item.key" :size="14"></svg-icon>
|
||||
</div> -->
|
||||
<div class="itemText">
|
||||
<!-- {{ t(`rightMenu.${item.key}`) }} -->
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="itemBox">
|
||||
<div class="itemText">无操作权限</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.rightMenu {
|
||||
user-select: none;
|
||||
width: 8.5vw;
|
||||
height: 23vh;
|
||||
visibility: hidden;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border: 1.5px solid;
|
||||
box-sizing: border-box;
|
||||
border-image: linear-gradient(137.95deg, rgba(0, 255, 255, 1) 6.25%, rgba(0, 200, 255, 1) 100%) 1.5;
|
||||
|
||||
.menuItem {
|
||||
//padding: 1vh .5vw;
|
||||
font-size: 12px;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
// margin-top: 16px;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
//span{
|
||||
line-height: 20px;
|
||||
|
||||
.itemBox {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 默认文字颜色 */
|
||||
color: #fff;
|
||||
// transition: all 0.2s ease; /* 添加过渡动画使效果更平滑 */
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.itemBox:hover {
|
||||
width: 100%;
|
||||
background: rgba(0, 255, 255, 0.2);
|
||||
/* 悬停时的文字颜色 */
|
||||
color: rgba(0, 255, 255, 1);
|
||||
}
|
||||
|
||||
.itemText {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.itemIcon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* 关键：通过currentColor继承父元素的文字颜色 */
|
||||
.itemIcon svg {
|
||||
color: inherit; /* 继承itemIcon的颜色 */
|
||||
}
|
||||
|
||||
/* 确保SVG图标正确继承颜色 */
|
||||
.svg-icon {
|
||||
fill: currentColor !important;
|
||||
stroke: currentColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
149
src/views/largeScreen/components/newMap/dialog/standText.vue
Normal file
149
src/views/largeScreen/components/newMap/dialog/standText.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" title="立体文字属性" left="180px" top="100px" className="ground-text"
|
||||
:closeCallback="closeCallback">
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">名称</span>
|
||||
<textarea v-model="entityOptions.text"></textarea>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">颜色</span>
|
||||
<div class="color" ref="colorRef" </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">滚动速度</span>
|
||||
<input type="range" max="100" min="0" step="1" v-model="entityOptions.speed">
|
||||
<div class="input-number" style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
|
||||
<input class="input" type="number" title="" min="0" max="100" step="1" v-model="entityOptions.speed">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div style="position: absolute; left: 24px; display: flex;">
|
||||
<button @click="nodeEdit"><svg class="icon-edit">
|
||||
<use xlink:href="#yj-icon-edit"></use>
|
||||
</svg>二次编辑</button>
|
||||
</div>
|
||||
<button @click="remove">删除</button>
|
||||
<button @click="confirm">确定</button>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { inject } from "vue";
|
||||
import { updateInfo, deleteSource} from '@/views/largeScreen/components/api'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import Dialog from './baseDialog.vue'
|
||||
import { useTreeNode } from '../treeNode'
|
||||
const { cusUpdateNode, getSelectedNodes, cusRemoveNode } = useTreeNode()
|
||||
|
||||
const baseDialog: any = ref(null);
|
||||
const eventBus: any = inject("bus");
|
||||
// eventBus.on("openStandTextAdd", () => {
|
||||
// baseDialog.value?.open()
|
||||
// });
|
||||
const entityOptions: any = ref({});
|
||||
let originalOptions: any
|
||||
let that: any
|
||||
const colorRef = ref(null)
|
||||
const open = async (id: any) => {
|
||||
that = window['Earth1'].entityMap.get(id)
|
||||
originalOptions = structuredClone(that.options)
|
||||
entityOptions.value = that
|
||||
baseDialog.value?.open()
|
||||
await nextTick()
|
||||
let colorPicker = new window['YJColorPicker']({
|
||||
el: colorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.color,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: color => {
|
||||
entityOptions.value.color = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.color = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
}
|
||||
const confirm = () => {
|
||||
originalOptions = structuredClone(that.options)
|
||||
baseDialog.value?.close()
|
||||
let params = structuredClone(that.options)
|
||||
// 删除不必要的属性
|
||||
delete params.host
|
||||
delete params.name
|
||||
let params2 = {
|
||||
"id": params.id,
|
||||
"sourceName": params.text,
|
||||
"params": params,
|
||||
"isShow": params.show ? 1 : 0,
|
||||
}
|
||||
updateInfo(params2)
|
||||
cusUpdateNode({ "id": params.id, "sourceName": params.text, "params": JSON.stringify(params) })
|
||||
}
|
||||
const close = () => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
const remove = () => {
|
||||
close()
|
||||
ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
let selectNodes = getSelectedNodes(window['treeObj'])
|
||||
let source_ids = cusRemoveNode(window['treeObj'], selectNodes)
|
||||
const res = await deleteSource({ ids: source_ids })
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
that.remove()
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.msg || '删除失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 用户点击取消，不执行任何操作
|
||||
})
|
||||
}
|
||||
const nodeEdit = () => {
|
||||
that.nodeEdit()
|
||||
}
|
||||
|
||||
const closeCallback = () => {
|
||||
entityOptions.value.originalOptions = structuredClone(originalOptions)
|
||||
that.positionEditing = false
|
||||
that.reset()
|
||||
// eventBus?.emit("destroyComponent")
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
10
src/views/largeScreen/components/newMap/entityClick.ts
Normal file
10
src/views/largeScreen/components/newMap/entityClick.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import app from '@/main';
|
||||
|
||||
function leftClick(options) {
|
||||
console.log('leftClick', options);
|
||||
if (options && options.entityType === 'monitor') {
|
||||
console.log('标注为监控点，即将弹出视频框', app);
|
||||
app.config.globalProperties['$sendChanel']('openVideo', options);
|
||||
}
|
||||
}
|
||||
export { leftClick };
|
||||
392
src/views/largeScreen/components/newMap/index.js
Normal file
392
src/views/largeScreen/components/newMap/index.js
Normal file
@ -0,0 +1,392 @@
|
||||
export class ModelPathMover {
|
||||
/**
|
||||
* 构造函数
|
||||
* @param {Cesium.Viewer} viewer - Cesium viewer实例
|
||||
* @param {Object} options - 配置选项
|
||||
* @param {Number} [options.baseHeight=0] - 外部传入的统一高度（米），将叠加到所有位置点上
|
||||
*/
|
||||
constructor(viewer, options) {
|
||||
this.viewer = viewer;
|
||||
this.modelUrl = options.modelUrl;
|
||||
this.positions = options.positions || [];
|
||||
this.speed = options.speed || 10; // 米/秒
|
||||
this.loop = options.loop !== undefined ? options.loop : true;
|
||||
this.pathStyle = options.pathStyle || {
|
||||
color: Cesium.Color.YELLOW,
|
||||
width: 3
|
||||
};
|
||||
this.markerStyle = options.markerStyle || {
|
||||
color: Cesium.Color.RED,
|
||||
pixelSize: 10,
|
||||
outlineColor: Cesium.Color.WHITE,
|
||||
outlineWidth: 2
|
||||
};
|
||||
this.iconUrl = options.iconUrl;
|
||||
this.iconSize = options.iconSize || 32;
|
||||
this.iconOffset = options.iconOffset || 0;
|
||||
this.headingOffset = options.headingOffset || 0;
|
||||
// 新增：接收外部传入的统一高度（默认0米）
|
||||
this.baseHeight = options.baseHeight || 0;
|
||||
|
||||
// 内部状态（保持不变）
|
||||
this.modelEntity = null;
|
||||
this.pathEntity = null;
|
||||
this.markerEntities = [];
|
||||
this.iconEntity = null;
|
||||
this.currentIndex = 0;
|
||||
this.isMoving = false;
|
||||
this.lastTime = 0;
|
||||
this.animationFrameId = null;
|
||||
this.currentPosition = null;
|
||||
this.progress = 0;
|
||||
this.modelHeight = 0;
|
||||
|
||||
// 初始化
|
||||
this.init();
|
||||
|
||||
// 调试信息（增加baseHeight打印）
|
||||
console.log('ModelPathMover初始化完成', {
|
||||
positionCount: this.positions.length,
|
||||
speed: this.speed,
|
||||
loop: this.loop,
|
||||
baseHeight: this.baseHeight // 打印传入的统一高度
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化（保持不变）
|
||||
*/
|
||||
init() {
|
||||
if (this.positions.length < 2) {
|
||||
console.warn('至少需要2个位置点才能进行移动');
|
||||
}
|
||||
this.createPath();
|
||||
this.createMarkers();
|
||||
this.createModel();
|
||||
if (this.iconUrl) {
|
||||
this.createIcon();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建模型（修改：叠加baseHeight）
|
||||
*/
|
||||
createModel() {
|
||||
if (this.positions.length === 0) return;
|
||||
|
||||
const firstPos = this.positions[0];
|
||||
// 关键修改：在原始高度基础上叠加baseHeight
|
||||
const finalHeight = (firstPos.height || 0) + this.baseHeight;
|
||||
this.currentPosition = Cesium.Cartesian3.fromDegrees(
|
||||
firstPos.lon,
|
||||
firstPos.lat,
|
||||
finalHeight // 使用叠加后的高度
|
||||
);
|
||||
|
||||
// 初始朝向计算（保持不变）
|
||||
let initialOrientation = Cesium.Transforms.headingPitchRollQuaternion(this.currentPosition, new Cesium.HeadingPitchRoll(0, 0, 0));
|
||||
|
||||
if (this.positions.length > 1) {
|
||||
const nextPos = this.positions[1];
|
||||
// 计算下一个点时同样叠加baseHeight
|
||||
const nextFinalHeight = (nextPos.height || 0) + this.baseHeight;
|
||||
const nextCartesian = Cesium.Cartesian3.fromDegrees(nextPos.lon, nextPos.lat, nextFinalHeight);
|
||||
const heading = this.calculateHeading(this.currentPosition, nextCartesian);
|
||||
initialOrientation = Cesium.Transforms.headingPitchRollQuaternion(this.currentPosition, new Cesium.HeadingPitchRoll(heading, 0, 0));
|
||||
}
|
||||
|
||||
this.modelEntity = this.viewer.entities.add({
|
||||
name: 'Moving Model',
|
||||
position: this.currentPosition,
|
||||
orientation: initialOrientation,
|
||||
model: {
|
||||
uri: this.modelUrl,
|
||||
minimumPixelSize: 64,
|
||||
readyPromise: (model) => {
|
||||
const boundingSphere = model.boundingSphere;
|
||||
if (boundingSphere) {
|
||||
this.modelHeight = boundingSphere.radius * 2;
|
||||
console.log('模型高度检测完成:', this.modelHeight, '米');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建路径（修改：叠加baseHeight）
|
||||
*/
|
||||
createPath() {
|
||||
if (this.positions.length < 2) return;
|
||||
|
||||
// 关键修改：遍历所有点时，给每个点的高度叠加baseHeight
|
||||
const pathPositions = this.positions.map((pos) => {
|
||||
const finalHeight = (pos.height || 0) + this.baseHeight;
|
||||
return Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat, finalHeight);
|
||||
});
|
||||
|
||||
this.pathEntity = this.viewer.entities.add({
|
||||
name: 'Model Path',
|
||||
polyline: {
|
||||
positions: pathPositions,
|
||||
width: this.pathStyle.width,
|
||||
material: this.pathStyle.color,
|
||||
clampToGround: false
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建位置标记（修改：叠加baseHeight）
|
||||
*/
|
||||
createMarkers() {
|
||||
this.markerEntities = this.positions.map((pos, index) => {
|
||||
// 关键修改：标记点高度同样叠加baseHeight
|
||||
const finalHeight = (pos.height || 0) + this.baseHeight;
|
||||
const position = Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat, finalHeight);
|
||||
|
||||
const marker = this.viewer.entities.add({
|
||||
name: `Position Marker ${index}`,
|
||||
position: position,
|
||||
point: {
|
||||
color: this.markerStyle.color,
|
||||
pixelSize: this.markerStyle.pixelSize,
|
||||
outlineColor: this.markerStyle.outlineColor,
|
||||
outlineWidth: this.markerStyle.outlineWidth
|
||||
},
|
||||
label: {
|
||||
text: pos.name || '',
|
||||
font: '14px sans-serif',
|
||||
pixelOffset: new Cesium.Cartesian2(0, -20),
|
||||
fillColor: Cesium.Color.WHITE
|
||||
}
|
||||
});
|
||||
|
||||
return marker;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建模型上方的图标（保持不变）
|
||||
*/
|
||||
createIcon() {
|
||||
this.iconEntity = this.viewer.entities.add({
|
||||
name: '人员A',
|
||||
position: new Cesium.CallbackProperty(() => {
|
||||
return this.adjustCartesianHeight(this.currentPosition, 0.3);
|
||||
}, false),
|
||||
billboard: {
|
||||
image: this.iconUrl,
|
||||
width: this.iconSize,
|
||||
height: this.iconSize,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
||||
},
|
||||
label: {
|
||||
text: '人员A',
|
||||
font: '14px sans-serif',
|
||||
pixelOffset: new Cesium.Cartesian2(0, -40),
|
||||
fillColor: Cesium.Color.WHITE
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 调整笛卡尔坐标的高度（在原有高度基础上叠加指定值）
|
||||
* @param {Cesium.Cartesian3} cartesian - 原始笛卡尔坐标
|
||||
* @param {Number} heightOffset - 要增加的高度值（米，可为负数）
|
||||
* @param {Cesium.Ellipsoid} [ellipsoid=Cesium.Ellipsoid.WGS84] - 参考椭球体
|
||||
* @returns {Cesium.Cartesian3|null} 调整高度后的笛卡尔坐标（失败返回null）
|
||||
*/
|
||||
adjustCartesianHeight(cartesian, heightOffset, ellipsoid = Cesium.Ellipsoid.WGS84) {
|
||||
// 1. 校验输入的笛卡尔坐标是否有效
|
||||
// if (!Cesium.Cartesian3.isValid(cartesian)) {
|
||||
// console.error("无效的笛卡尔坐标，无法调整高度");
|
||||
// return null;
|
||||
// }
|
||||
|
||||
// 2. 笛卡尔坐标 → Cartographic（地理坐标，含弧度经纬度和高度）
|
||||
const cartographic = Cesium.Cartographic.fromCartesian(cartesian, ellipsoid);
|
||||
if (!cartographic) {
|
||||
console.error('笛卡尔坐标转换为Cartographic失败');
|
||||
return null;
|
||||
}
|
||||
|
||||
// 3. 调整高度（在原有高度上叠加offset，可为负数）
|
||||
cartographic.height += heightOffset;
|
||||
// 可选：确保高度不低于0（根据需求决定是否保留）
|
||||
// cartographic.height = Math.max(cartographic.height, 0);
|
||||
|
||||
// 4. Cartographic → 笛卡尔坐标（使用弧度经纬度转换）
|
||||
const adjustedCartesian = Cesium.Cartesian3.fromRadians(
|
||||
cartographic.longitude, // 经度（弧度）
|
||||
cartographic.latitude, // 纬度（弧度）
|
||||
cartographic.height, // 调整后的高度（米）
|
||||
ellipsoid
|
||||
);
|
||||
|
||||
return adjustedCartesian;
|
||||
}
|
||||
/**
|
||||
* 开始移动（保持不变）
|
||||
*/
|
||||
start() {
|
||||
if (this.isMoving) {
|
||||
console.log('模型已经在移动中');
|
||||
return;
|
||||
}
|
||||
if (this.positions.length < 2) {
|
||||
console.error('无法移动：位置点数量不足（至少需要2个）');
|
||||
return;
|
||||
}
|
||||
this.isMoving = true;
|
||||
this.lastTime = performance.now();
|
||||
this.progress = 0;
|
||||
console.log('开始移动，速度：', this.speed, '米/秒');
|
||||
this.animate();
|
||||
}
|
||||
|
||||
/**
|
||||
* 动画循环函数（保持不变）
|
||||
*/
|
||||
animate() {
|
||||
if (!this.isMoving) return;
|
||||
const currentTime = performance.now();
|
||||
const timeDeltaMs = currentTime - this.lastTime;
|
||||
this.lastTime = currentTime;
|
||||
const timeDelta = timeDeltaMs / 1000;
|
||||
this.updatePosition(timeDelta);
|
||||
this.animationFrameId = requestAnimationFrame(() => this.animate());
|
||||
}
|
||||
|
||||
/**
|
||||
* 停止移动（保持不变）
|
||||
*/
|
||||
stop() {
|
||||
if (!this.isMoving) return;
|
||||
this.isMoving = false;
|
||||
console.log('停止移动');
|
||||
if (this.animationFrameId) {
|
||||
cancelAnimationFrame(this.animationFrameId);
|
||||
this.animationFrameId = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新模型位置（修改：叠加baseHeight）
|
||||
*/
|
||||
updatePosition(timeDelta) {
|
||||
if (!this.isMoving) return;
|
||||
const distanceToMove = this.speed * timeDelta;
|
||||
const currentPos = this.positions[this.currentIndex];
|
||||
const nextIndex = (this.currentIndex + 1) % this.positions.length;
|
||||
const nextPos = this.positions[nextIndex];
|
||||
|
||||
// 关键修改：计算当前点和下一点时，均叠加baseHeight
|
||||
const currentFinalHeight = (currentPos.height || 0) + this.baseHeight;
|
||||
const nextFinalHeight = (nextPos.height || 0) + this.baseHeight;
|
||||
|
||||
const currentCartesian = Cesium.Cartesian3.fromDegrees(currentPos.lon, currentPos.lat, currentFinalHeight);
|
||||
const nextCartesian = Cesium.Cartesian3.fromDegrees(nextPos.lon, nextPos.lat, nextFinalHeight);
|
||||
|
||||
// 后续逻辑保持不变
|
||||
const totalDistance = Cesium.Cartesian3.distance(currentCartesian, nextCartesian);
|
||||
if (totalDistance < 0.001) {
|
||||
this.currentIndex = nextIndex;
|
||||
this.progress = 0;
|
||||
this.setModelPosition(nextCartesian, this.getNextPositionCartesian(nextIndex));
|
||||
return;
|
||||
}
|
||||
this.progress += distanceToMove / totalDistance;
|
||||
if (this.progress >= 1.0) {
|
||||
const remainingDistance = (this.progress - 1.0) * totalDistance;
|
||||
this.currentIndex = nextIndex;
|
||||
if (!this.loop && this.currentIndex === this.positions.length - 1) {
|
||||
this.setModelPosition(nextCartesian, null);
|
||||
this.stop();
|
||||
console.log('已到达终点，停止移动');
|
||||
return;
|
||||
}
|
||||
const newTotalDistance = Cesium.Cartesian3.distance(nextCartesian, this.getNextPositionCartesian(this.currentIndex));
|
||||
this.progress = newTotalDistance > 0.001 ? remainingDistance / newTotalDistance : 0;
|
||||
this.setModelPosition(nextCartesian, this.getNextPositionCartesian(this.currentIndex));
|
||||
} else {
|
||||
const newPosition = Cesium.Cartesian3.lerp(currentCartesian, nextCartesian, this.progress, new Cesium.Cartesian3());
|
||||
this.setModelPosition(newPosition, nextCartesian);
|
||||
}
|
||||
this.viewer.scene.requestRender();
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取下一个位置的笛卡尔坐标（修改：叠加baseHeight）
|
||||
*/
|
||||
getNextPositionCartesian(currentIndex) {
|
||||
const nextIndex = (currentIndex + 1) % this.positions.length;
|
||||
const nextPos = this.positions[nextIndex];
|
||||
// 关键修改：返回下一点时叠加baseHeight
|
||||
const finalHeight = (nextPos.height || 0) + this.baseHeight;
|
||||
return Cesium.Cartesian3.fromDegrees(nextPos.lon, nextPos.lat, finalHeight);
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置模型位置和方向（保持不变）
|
||||
*/
|
||||
setModelPosition(position, targetPosition) {
|
||||
if (!this.modelEntity) return;
|
||||
this.currentPosition = position;
|
||||
this.modelEntity.position.setValue(position);
|
||||
if (targetPosition) {
|
||||
const heading = this.calculateHeading(position, targetPosition);
|
||||
this.modelEntity.orientation.setValue(Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(heading, 0, 0)));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算两点之间的朝向（保持不变）
|
||||
*/
|
||||
calculateHeading(from, to) {
|
||||
const fromCartographic = Cesium.Cartographic.fromCartesian(from);
|
||||
const toCartographic = Cesium.Cartographic.fromCartesian(to);
|
||||
const startLat = fromCartographic.latitude;
|
||||
const startLon = fromCartographic.longitude;
|
||||
const endLat = toCartographic.latitude;
|
||||
const endLon = toCartographic.longitude;
|
||||
const dLon = endLon - startLon;
|
||||
const y = Math.sin(dLon) * Math.cos(endLat);
|
||||
const x = Math.cos(startLat) * Math.sin(endLat) - Math.sin(startLat) * Math.cos(endLat) * Math.cos(dLon);
|
||||
let heading = Math.atan2(y, x);
|
||||
heading = (heading + Cesium.Math.TWO_PI) % Cesium.Math.TWO_PI;
|
||||
heading = (heading + this.headingOffset) % Cesium.Math.TWO_PI;
|
||||
return heading;
|
||||
}
|
||||
|
||||
/**
|
||||
* 手动设置模型高度（保持不变）
|
||||
*/
|
||||
setModelHeight(height) {
|
||||
this.modelHeight = height;
|
||||
console.log('手动设置模型高度:', height, '米');
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置航向角偏移（保持不变）
|
||||
*/
|
||||
setHeadingOffset(offsetDegrees) {
|
||||
this.headingOffset = Cesium.Math.toRadians(offsetDegrees);
|
||||
console.log('设置航向角偏移:', offsetDegrees, '度');
|
||||
}
|
||||
|
||||
/**
|
||||
* 销毁所有资源（保持不变）
|
||||
*/
|
||||
destroy() {
|
||||
this.stop();
|
||||
if (this.modelEntity) this.viewer.entities.remove(this.modelEntity);
|
||||
if (this.pathEntity) this.viewer.entities.remove(this.pathEntity);
|
||||
this.markerEntities.forEach((marker) => this.viewer.entities.remove(marker));
|
||||
if (this.iconEntity) this.viewer.entities.remove(this.iconEntity);
|
||||
this.modelEntity = null;
|
||||
this.pathEntity = null;
|
||||
this.markerEntities = [];
|
||||
this.iconEntity = null;
|
||||
}
|
||||
}
|
||||
485
src/views/largeScreen/components/newMap/index.vue
Normal file
485
src/views/largeScreen/components/newMap/index.vue
Normal file
@ -0,0 +1,485 @@
|
||||
<script setup lang="ts">
|
||||
import bottomMenu from './bottomBtn/index.vue';
|
||||
import leftMenu from './leftMenu/index.vue';
|
||||
import RoutePlanning from './dialog/RoutePlanning.vue';
|
||||
import FlyRoam from './dialog/FlyRoam.vue';
|
||||
import rightMenu from './dialog/rightMenu.vue';
|
||||
// import videoDialog from '../video.vue';
|
||||
import addGroundText from './dialog/addGroundText.vue';
|
||||
import addStandText from './dialog/addStandText.vue';
|
||||
import billboardObject from './dialog/billboardObject.vue';
|
||||
import attackArrow from './dialog/attackArrow.vue';
|
||||
import standText from './dialog/standText.vue';
|
||||
import groundText from './dialog/groundText.vue';
|
||||
import polylineObject from './dialog/polylineObject.vue';
|
||||
import curvelineObject from './dialog/curvelineObject.vue';
|
||||
import polygonObject from './dialog/polygonObject.vue';
|
||||
import modelObject from './dialog/modelObject.vue';
|
||||
import model from './dialog/model.vue';
|
||||
import circleObject from './dialog/CircleObject.vue';
|
||||
import { defineProps, onMounted, ref, getCurrentInstance, shallowRef } from 'vue';
|
||||
import { useTree } from './tree';
|
||||
import { inject } from "vue";
|
||||
import { ModelPathMover } from './index.js';
|
||||
const eventBus: any = inject("bus");
|
||||
const props = defineProps({
|
||||
isHide: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
});
|
||||
|
||||
const { initTree, rightMenuRef } = useTree();
|
||||
|
||||
// 获取组件实例
|
||||
const instance = getCurrentInstance();
|
||||
let currentComponent = shallowRef();
|
||||
let dynamicComponentRef = ref();
|
||||
const videoDialogRef = ref(null);
|
||||
const deviceId = ref('');
|
||||
instance.proxy['$sendChanel']('open-model', () => { });
|
||||
instance.proxy['$recvChanel']('destroyComponent', (id) => {
|
||||
console.log(id);
|
||||
if (id) {
|
||||
if (dynamicComponentRef.value.id == id) {
|
||||
dynamicComponentRef.value?.close()
|
||||
currentComponent.value = undefined
|
||||
}
|
||||
} else {
|
||||
currentComponent.value = undefined
|
||||
}
|
||||
})
|
||||
instance.proxy['$recvChanel']('openVideo', (obj) => {
|
||||
console.log('设备对象', obj.id);
|
||||
deviceId.value = obj.id; // 'AE9470016';
|
||||
videoDialogRef.value.show();
|
||||
setTimeout(() => {
|
||||
videoDialogRef.value.videoPlay(deviceId.value, obj.name);
|
||||
}, 500);
|
||||
});
|
||||
instance.proxy['$recvChanel']('openDialog', async (dataArr: Array<any>) => {
|
||||
const sourceType = dataArr[0];
|
||||
const id = dataArr[1];
|
||||
console.log(sourceType, id);
|
||||
// if (dynamicComponentRef.value && dynamicComponentRef.value.close) {
|
||||
// dynamicComponentRef.value.close();
|
||||
// }
|
||||
switch (sourceType) {
|
||||
case 'addGroundText':
|
||||
currentComponent.value = addGroundText;
|
||||
await nextTick();
|
||||
dynamicComponentRef.value?.open();
|
||||
break;
|
||||
|
||||
case 'addStandText':
|
||||
currentComponent.value = addStandText;
|
||||
await nextTick();
|
||||
dynamicComponentRef.value?.open();
|
||||
break;
|
||||
case 'point':
|
||||
currentComponent.value = billboardObject;
|
||||
await nextTick();
|
||||
dynamicComponentRef.value?.open(id);
|
||||
break;
|
||||
case 'attackArrow':
|
||||
currentComponent.value = attackArrow;
|
||||
await nextTick();
|
||||
dynamicComponentRef.value?.open(id, 'attackArrow');
|
||||
break;
|
||||
case 'pincerArrow':
|
||||
currentComponent.value = attackArrow
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id, 'pincerArrow')
|
||||
break
|
||||
case 'standText':
|
||||
currentComponent.value = standText
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id)
|
||||
break
|
||||
case 'groundText':
|
||||
currentComponent.value = groundText
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id)
|
||||
break
|
||||
case 'line':
|
||||
currentComponent.value = polylineObject
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id)
|
||||
break
|
||||
case 'curve':
|
||||
currentComponent.value = curvelineObject
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id)
|
||||
break
|
||||
case 'panel':
|
||||
currentComponent.value = polygonObject
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id)
|
||||
break
|
||||
case 'rectangle':
|
||||
currentComponent.value = polygonObject
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id, 'rectangle')
|
||||
break
|
||||
case 'rendezvous':
|
||||
currentComponent.value = polygonObject
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id, 'rendezvous')
|
||||
break
|
||||
case 'model':
|
||||
currentComponent.value = modelObject
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id, 'model')
|
||||
break
|
||||
case 'circle':
|
||||
currentComponent.value = circleObject
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id, 'circle')
|
||||
break
|
||||
default:
|
||||
break;
|
||||
}
|
||||
console.log('dynamicComponentRef.value', dynamicComponentRef.value);
|
||||
|
||||
dynamicComponentRef.value.id = id;
|
||||
});
|
||||
onMounted(async () => {
|
||||
await window['YJ'].on();
|
||||
initEarth();
|
||||
initTree();
|
||||
document.addEventListener('click', handlePageClick);
|
||||
});
|
||||
|
||||
const handlePageClick = (e) => {
|
||||
if (e.target.nodeName == 'CANVAS') {
|
||||
window['$']('.leftSideSecond ')[0].style.display = 'none';
|
||||
}
|
||||
};
|
||||
// 组件卸载前，解绑事件（必须做，否则会导致事件残留）
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handlePageClick);
|
||||
});
|
||||
|
||||
// 初始化地球
|
||||
async function initEarth() {
|
||||
let earth = new window['YJ'].YJEarth('earths');
|
||||
window['Earth1'] = earth;
|
||||
new window['YJ'].Global.openLeftClick(window['Earth1']);
|
||||
window['YJ'].Global.CesiumContainer(window['Earth1'], {
|
||||
compass: false, //罗盘
|
||||
legend: false //图例
|
||||
});
|
||||
new window['YJ'].Obj.GDWXImagery(window['Earth1'], {
|
||||
show: true
|
||||
});
|
||||
new window['YJ'].Obj.GDLWImagery(window['Earth1'], {
|
||||
show: true
|
||||
});
|
||||
window['YJ'].Global.setCesiumManageIndexexDBState(true);
|
||||
// guiji()
|
||||
}
|
||||
|
||||
// 轨迹
|
||||
// function guiji() {
|
||||
// let map = [
|
||||
// {
|
||||
// "lng": 107.10722301,
|
||||
// "lat": 23.82259367,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10736604,
|
||||
// "lat": 23.82255172,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.1074855,
|
||||
// "lat": 23.82252884,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10759413,
|
||||
// "lat": 23.82253307,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10768489,
|
||||
// "lat": 23.82249845,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10776231,
|
||||
// "lat": 23.82243673,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10782341,
|
||||
// "lat": 23.82236405,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10787349,
|
||||
// "lat": 23.82220547,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.1079576,
|
||||
// "lat": 23.8220949,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.1080447,
|
||||
// "lat": 23.82199921,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10815487,
|
||||
// "lat": 23.82190863,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10828922,
|
||||
// "lat": 23.8218493,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10838926,
|
||||
// "lat": 23.82183209,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10849971,
|
||||
// "lat": 23.82181959,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10863734,
|
||||
// "lat": 23.82176743,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10876637,
|
||||
// "lat": 23.82166895,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10882914,
|
||||
// "lat": 23.82162528,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10892427,
|
||||
// "lat": 23.82151196,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10902836,
|
||||
// "lat": 23.82137303,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10913096,
|
||||
// "lat": 23.8212267,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10923736,
|
||||
// "lat": 23.82117282,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10937461,
|
||||
// "lat": 23.82116652,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10950991,
|
||||
// "lat": 23.82122497,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10966681,
|
||||
// "lat": 23.82122231,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10980719,
|
||||
// "lat": 23.82116642,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10986361,
|
||||
// "lat": 23.82112161,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10987242,
|
||||
// "lat": 23.82098847,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10989111,
|
||||
// "lat": 23.82086159,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.10996664,
|
||||
// "lat": 23.82084003,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.11025991,
|
||||
// "lat": 23.82086175,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.11033401,
|
||||
// "lat": 23.82077614,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.11041459,
|
||||
// "lat": 23.82064154,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.11048436,
|
||||
// "lat": 23.82050226,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.11063469,
|
||||
// "lat": 23.82033684,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.11083109,
|
||||
// "lat": 23.820236,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.1110875,
|
||||
// "lat": 23.82022706,
|
||||
// "alt": 0
|
||||
// },
|
||||
// {
|
||||
// "lng": 107.11133119,
|
||||
// "lat": 23.82021734,
|
||||
// "alt": 0
|
||||
// }
|
||||
// ]
|
||||
// let positions = map.map((item) => {
|
||||
// return {
|
||||
// lon: item.lng,
|
||||
// lat: item.lat,
|
||||
// height: item.alt || 0,
|
||||
// name:''
|
||||
// };
|
||||
// });
|
||||
|
||||
// let modelMover = new ModelPathMover(window['Earth1'].viewer, {
|
||||
// positions: positions,
|
||||
// speed: 20, // 移动速度
|
||||
// loop: true, // 循环运动
|
||||
// iconUrl: '/sdk/img/locate.png', // 模型上方图标
|
||||
// baseHeight: 0 // 外部传入的统一高度（米）
|
||||
// });
|
||||
// window['modelMover'] = modelMover;
|
||||
// }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="earth-container-box">
|
||||
<div class="earth" id="earths"></div>
|
||||
<component :is="currentComponent" ref="dynamicComponentRef" />
|
||||
<div v-show="!isHide" class="treeBox">
|
||||
<div class="title">
|
||||
<div class="text_title">
|
||||
<img src="@/assets/images/map/title.png" alt="" />
|
||||
图层指挥舱
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul id="treeDemo" class="ztree"></ul>
|
||||
<rightMenu ref="rightMenuRef" class="absolute zIndex99"></rightMenu>
|
||||
</div>
|
||||
<bottomMenu v-show="!isHide" class="bottomMenu zIndex9" ref="bottomMenuRef"></bottomMenu>
|
||||
<leftMenu v-show="!isHide"></leftMenu>
|
||||
<RoutePlanning ref="routePlanning"></RoutePlanning>
|
||||
<FlyRoam ref="flyRoam"></FlyRoam>
|
||||
<videoDialog ref="videoDialogRef"></videoDialog>
|
||||
<model ref="Model" v-show="!isHide"></model>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.earth-container-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.earth {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.treeBox {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
width: 320px;
|
||||
height: 75%;
|
||||
transform: translateY(-50%);
|
||||
background-color: #00000052;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
z-index: 10;
|
||||
background: url('@/assets/images/map/rightbg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
transition: transform 0.5s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
padding-bottom: 0.1em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.text_title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
//width: 12vw; //400
|
||||
height: 3.5vh;
|
||||
line-height: 3.5vh;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
text-shadow: 0px 0px 9px rgba(20, 118, 255, 1);
|
||||
font-weight: 700;
|
||||
background: linear-gradient(90deg, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 0.5) 55.55%, rgba(0, 255, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
#treeDemo {
|
||||
flex: auto;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.bottomMenu {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.leftMenu {
|
||||
height: 500px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50px;
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
164
src/views/largeScreen/components/newMap/initMapData.ts
Normal file
164
src/views/largeScreen/components/newMap/initMapData.ts
Normal file
@ -0,0 +1,164 @@
|
||||
import { leftClick } from './entityClick';
|
||||
// import {leftClick} from '@/views/projectLarge/ProjectScreen/components/newMap/entityClick';
|
||||
|
||||
export const initMapData = async (type, data, cd) => {
|
||||
let entityObject: any;
|
||||
let options: any;
|
||||
const baseURL = import.meta.env.VITE_APP_MAP_API;
|
||||
|
||||
switch (type) {
|
||||
case 'groundText':
|
||||
entityObject = new window['YJ'].Obj.GroundText(window['Earth1'], data);
|
||||
break;
|
||||
case 'standText':
|
||||
entityObject = new window['YJ'].Obj.StandText(window['Earth1'], data);
|
||||
break;
|
||||
case 'point':
|
||||
case 'linkImage':
|
||||
case 'vrImage':
|
||||
entityObject = new window['YJ'].Obj.BillboardObject(window['Earth1'], data);
|
||||
// entityObject.options.billboard.defaultImage = ''
|
||||
// entityObject.flyTo();
|
||||
break;
|
||||
case 'line':
|
||||
entityObject = await new window['YJ'].Obj.PolylineObject(window['Earth1'], data);
|
||||
break;
|
||||
case 'curve':
|
||||
entityObject = await new window['YJ'].Obj.CurvelineObject(window['Earth1'], data);
|
||||
break;
|
||||
case 'panel':
|
||||
case 'rectangle':
|
||||
entityObject = new window['YJ'].Obj.PolygonObject(window['Earth1'], data);
|
||||
break;
|
||||
case 'rendezvous':
|
||||
entityObject = new window['YJ'].Obj.AssembleObject(window['Earth1'], data);
|
||||
break;
|
||||
case 'attackArrow':
|
||||
entityObject = new window['YJ'].Obj.AttackArrowObject(window['Earth1'], data);
|
||||
break;
|
||||
case 'pincerArrow':
|
||||
entityObject = new window['YJ'].Obj.PincerArrowObject(window['Earth1'], data);
|
||||
break;
|
||||
case 'circle':
|
||||
entityObject = new window['YJ'].Obj.CircleObject(window['Earth1'], data);
|
||||
break;
|
||||
case 'ellipse':
|
||||
entityObject = new window['YJ'].Obj.EllipseObject(window['Earth1'], data);
|
||||
break;
|
||||
case 'model':
|
||||
entityObject = new window['YJ'].Obj.Model(window['Earth1'], data);
|
||||
break;
|
||||
case 'military':
|
||||
entityObject = new window['YJ'].Obj.GroundSvg(window['Earth1'], data);
|
||||
entityObject.load(() => {});
|
||||
break;
|
||||
case 'terrain':
|
||||
data.host = baseURL;
|
||||
console.log('terrain的data', data);
|
||||
entityObject = new window['YJ'].Obj.Terrain(window['Earth1'], data);
|
||||
break;
|
||||
case 'layer':
|
||||
data.host = baseURL;
|
||||
entityObject = new window['YJ'].Obj.Layer(window['Earth1'], data);
|
||||
// entityObject.flyTo();
|
||||
break;
|
||||
case 'tileset':
|
||||
data.host = baseURL;
|
||||
entityObject = new window['YJ'].Obj.Tileset(window['Earth1'], data);
|
||||
entityObject.load((res) => {
|
||||
if (cd) {
|
||||
cd(entityObject);
|
||||
}
|
||||
// 等模型加载完后再加载压平模型
|
||||
if (window['pressModelMap'])
|
||||
Array.from((window as any).pressModelMap.keys()).forEach((key: any) => {
|
||||
if (key.indexOf('_' + data.id) > -1) {
|
||||
const nodes = (window as any).pressModelMap.get(key);
|
||||
if (nodes) {
|
||||
if (nodes.isShow == 1) {
|
||||
// nodeType[nodes.source_type].render(nodes);
|
||||
const flatData = JSON.parse(nodes.params);
|
||||
const entity = window['Earth1'].entityMap.get(flatData.modelId).entity;
|
||||
const flat: any = new window['YJ'].Analysis.Flat(window['Earth1'], entity, {
|
||||
positions: flatData.positions,
|
||||
height: flatData.height,
|
||||
name: nodes.sourceName
|
||||
});
|
||||
(window as any).pressModelEntities.set(nodes.id, flat);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
break;
|
||||
case 'path':
|
||||
entityObject = new window['YJ'].Obj.TrajectoryMotion(window['Earth1'], data);
|
||||
break;
|
||||
case 'wallStereoscopic':
|
||||
entityObject = new window['YJ'].Obj.WallStereoscopic(window['Earth1'], data);
|
||||
break;
|
||||
case 'entityWall':
|
||||
entityObject = new window['YJ'].Obj.WallRealStereoscopic(window['Earth1'], data);
|
||||
break;
|
||||
case 'diffuseScan':
|
||||
entityObject = new window['YJ'].Obj.CircleDiffuse(window['Earth1'], data);
|
||||
break;
|
||||
case 'radarScan':
|
||||
entityObject = new window['YJ'].Obj.RadarScan(window['Earth1'], data);
|
||||
break;
|
||||
case 'scanStereoscopic':
|
||||
entityObject = new window['YJ'].Obj.RadarScanStereoscopic(window['Earth1'], data);
|
||||
break;
|
||||
case 'textBox':
|
||||
entityObject = new window['YJ'].Obj.TextBox(window['Earth1'], data, () => {});
|
||||
break;
|
||||
case 'polyhedronObject':
|
||||
entityObject = new window['YJ'].Obj.PolyhedronObject(window['Earth1'], data);
|
||||
break;
|
||||
case 'water':
|
||||
entityObject = new window['YJ'].Obj.WaterSurface(window['Earth1'], data);
|
||||
break;
|
||||
case 'fountain':
|
||||
entityObject = new window['YJ'].Obj.Fountain(window['Earth1'], data);
|
||||
break;
|
||||
case 'fire':
|
||||
entityObject = new window['YJ'].Obj.Flame(window['Earth1'], data);
|
||||
break;
|
||||
case 'smoke':
|
||||
entityObject = new window['YJ'].Obj.Smoke(window['Earth1'], data);
|
||||
break;
|
||||
case 'waterL':
|
||||
entityObject = new window['YJ'].Obj.Spout(window['Earth1'], data);
|
||||
break;
|
||||
case 'flyLine':
|
||||
entityObject = new window['YJ'].Obj.FlowLine(window['Earth1'], data);
|
||||
break;
|
||||
case 'explosion':
|
||||
entityObject = new window['YJ'].Obj.Explosion(window['Earth1'], data);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if (entityObject) {
|
||||
options = structuredClone(entityObject.options);
|
||||
delete options.host;
|
||||
switch (type) {
|
||||
case 'textBox':
|
||||
delete options.name;
|
||||
break;
|
||||
case 'fountain':
|
||||
case 'fire':
|
||||
case 'smoke':
|
||||
case 'waterL':
|
||||
delete options.url;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
// /鼠标左键点击事件
|
||||
entityObject.onClick = () => {
|
||||
leftClick(options);
|
||||
};
|
||||
}
|
||||
return options;
|
||||
};
|
||||
267
src/views/largeScreen/components/newMap/leftMenu/index.vue
Normal file
267
src/views/largeScreen/components/newMap/leftMenu/index.vue
Normal file
@ -0,0 +1,267 @@
|
||||
<script setup lang="ts">
|
||||
import leftSideSecond from './leftSideSecond.vue';
|
||||
import { getCurrentInstance } from 'vue';
|
||||
|
||||
// 获取组件实例
|
||||
const instance = getCurrentInstance();
|
||||
const isAnimating: any = ref(false); // 添加动画状态
|
||||
const isFolded: any = ref(false); // 添加折叠状态
|
||||
const initialPositions: any = ref({}); // 保存初始位置
|
||||
const menuList: any = ref([
|
||||
// 模型库
|
||||
{
|
||||
name: '模型库',
|
||||
svg: 'model',
|
||||
// fun: this.openModel,
|
||||
key: 'model',
|
||||
children: []
|
||||
},
|
||||
|
||||
// 测量
|
||||
{
|
||||
name: '测量',
|
||||
svg: 'measure',
|
||||
// fun: this.showSecondMenu,
|
||||
key: 'measure',
|
||||
children: [
|
||||
{ name: '投影面积', func: 'projectionArea' },
|
||||
{ name: '投影距离', func: 'projectionDistanceMeasure' },
|
||||
{ name: '贴地面积', func: 'areaMeasure' },
|
||||
{ name: '贴地距离', func: 'distanceMeasure' },
|
||||
{ name: '垂直高度', func: 'heightMeasure' },
|
||||
{ name: '空间三角', func: 'triangleMeasure' },
|
||||
{ name: '方位角', func: 'MeasureAzimuth' },
|
||||
{ name: '夹角', func: 'MeasureAngle' },
|
||||
{ name: '坡度', func: 'lopeDistanceMeasures' },
|
||||
{ name: '坐标', func: 'coorMeasure' },
|
||||
{ name: '清除测量', func: 'clear' }
|
||||
]
|
||||
},
|
||||
|
||||
// 工具
|
||||
{
|
||||
name: '工具',
|
||||
svg: 'tool',
|
||||
// fun: this.showSecondMenu,
|
||||
key: 'tool',
|
||||
children: [
|
||||
{ name: '路径规划', func: 'routePlan' },
|
||||
{ name: '飞行漫游', func: 'roam' }
|
||||
]
|
||||
}
|
||||
]);
|
||||
const leftSideSecondRef = ref();
|
||||
onMounted(() => {
|
||||
let menusHeight = menuList.value.length * 65 + 'px';
|
||||
let height = menuList.value.length * 65 + 30 + 'px';
|
||||
|
||||
window['$']('.leftBox')[0].style.height = height;
|
||||
window['$']('.left .menus')[0].style.height = menusHeight;
|
||||
const items: any = document.querySelectorAll('.menus_itemBox');
|
||||
items.forEach((item: any, index: any) => {
|
||||
initialPositions.value[index] = item.style.transform || 'translateX(0)';
|
||||
});
|
||||
});
|
||||
const handleClick = (item, e) => {
|
||||
console.log(item);
|
||||
window['$']('.leftSideSecond')[0].style.left = '100%';
|
||||
window['$']('.leftSideSecond')[0].style.top = e.layerY - 120 + 'px';
|
||||
window['$']('.leftSideSecond')[0].style.display = 'none';
|
||||
if (item.children.length) {
|
||||
window['$']('.leftSideSecond')[0].style.display = 'block';
|
||||
leftSideSecondRef.value.initList(item);
|
||||
} else {
|
||||
console.log('handleClick', 'open-' + item.key);
|
||||
instance.proxy['$sendChanel']('open-' + item.key, '');
|
||||
// item
|
||||
}
|
||||
};
|
||||
const fold = () => {
|
||||
// 如果正在动画中，直接返回
|
||||
if (isAnimating.value) return;
|
||||
// 设置动画状态为true
|
||||
isAnimating.value = true;
|
||||
document.querySelector('.menus')['style'].display = 'flex';
|
||||
|
||||
const items = document.querySelectorAll('.menus_itemBox');
|
||||
const left_bottom: any = document.querySelector('.left_bottom');
|
||||
const itemCount = items.length;
|
||||
const itemDelay = 100;
|
||||
const itemDuration = 300;
|
||||
if (isFolded.value) {
|
||||
left_bottom.style.bottom = '15.5vw';
|
||||
left_bottom.style.left = '72px';
|
||||
left_bottom.style.transform = 'rotate(0deg)';
|
||||
// 恢复初始状态
|
||||
items.forEach((item: any, index: any) => {
|
||||
setTimeout(() => {
|
||||
item.style.transition = 'transform 0.3s ease';
|
||||
item.style.transform = initialPositions.value[index];
|
||||
}, index * itemDelay);
|
||||
});
|
||||
} else {
|
||||
// 折叠状态
|
||||
items.forEach((item: any, index: any) => {
|
||||
setTimeout(() => {
|
||||
item.style.transition = 'transform 0.3s ease';
|
||||
item.style.transform = 'translateX(-120%)';
|
||||
}, index * itemDelay);
|
||||
});
|
||||
// 同步left_bottom的动画
|
||||
setTimeout(
|
||||
() => {
|
||||
left_bottom.style.bottom = '50%';
|
||||
left_bottom.style.left = '10px';
|
||||
left_bottom.style.transform = 'rotate(180deg)';
|
||||
document.querySelector('.menus')['style'].display = 'none';
|
||||
},
|
||||
(itemCount - 1) * itemDelay
|
||||
);
|
||||
}
|
||||
|
||||
// 在所有动画完成后重置状态
|
||||
setTimeout(
|
||||
() => {
|
||||
isFolded.value = !isFolded.value;
|
||||
isAnimating.value = false;
|
||||
},
|
||||
(itemCount - 1) * itemDelay + itemDuration
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="leftBox">
|
||||
<div class="left animate__animated">
|
||||
<div class="menus">
|
||||
<div class="menus_itemBox" v-for="item in menuList" :key="item.key">
|
||||
<!-- :title="t(`firstMenu.${item.name}`)"-->
|
||||
|
||||
<div
|
||||
class="item_icon"
|
||||
@click="
|
||||
(e) => {
|
||||
handleClick(item, e);
|
||||
}
|
||||
"
|
||||
>
|
||||
<!-- <svg-icon :class-name="['absolute', 'zIndex-1', 'left_item_bg']" icon-class="bg2"></svg-icon> -->
|
||||
<svg-icon :class-name="item.svg" :size="16" color="rgba(0, 255, 255, 1)"></svg-icon>
|
||||
<div class="item_text">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<leftSideSecond class="absolute zIndex99 leftSideSecond" ref="leftSideSecondRef"></leftSideSecond>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="left_bottom" @click="fold"></div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.leftBox {
|
||||
width: 8.3vw;
|
||||
// height: 20vw;
|
||||
position: absolute;
|
||||
left: 1em;
|
||||
bottom: calc(16vw + 2px);
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
//width: 7vw;
|
||||
// color: red;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.line {
|
||||
width: 5.2vw;
|
||||
}
|
||||
|
||||
.scrollBar81 {
|
||||
position: absolute;
|
||||
top: 33px;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.scrollBar {
|
||||
position: absolute;
|
||||
top: 33px;
|
||||
left: 11px;
|
||||
height: 270px;
|
||||
}
|
||||
|
||||
.menus {
|
||||
width: 100%;
|
||||
// height: 350px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 8px 0 5px;
|
||||
position: relative;
|
||||
|
||||
// margin-top: 20px;
|
||||
.menus_itemBox {
|
||||
width: 100%;
|
||||
height: 6.5vh;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// justify-content: space-around;
|
||||
// margin-top: 2rem;
|
||||
margin: auto;
|
||||
cursor: pointer;
|
||||
|
||||
.item_icon {
|
||||
width: 100%;
|
||||
height: 4.2vh;
|
||||
background: url('@/assets/images/map/left.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item_icon:hover .item_text {
|
||||
color: rgba(0, 255, 255, 1);
|
||||
}
|
||||
|
||||
.item_icon:hover {
|
||||
background: url('@/assets/images/map/left1.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.item_text {
|
||||
width: 100%;
|
||||
font-size: 1.1rem;
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
max-width: 4.5vw;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-family: 'alimamashuheiti';
|
||||
font-weight: 400;
|
||||
text-shadow: 0px 0px 9px rgba(20, 118, 255, 1);
|
||||
box-sizing: border-box;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left_bottom {
|
||||
position: fixed;
|
||||
bottom: 15.5vw;
|
||||
left: 72px;
|
||||
height: 1.5vw;
|
||||
width: 1.5vw;
|
||||
background: url('@/assets/images/map/shou.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div class="leftSideSecond">
|
||||
<div class="leftSideSecondBox">
|
||||
<template v-if="obj">
|
||||
<div class="menuItem" v-for="value in obj.children" :key="value.func" @click="handleClick(value)">
|
||||
<img :src="`./assets/leftmenu/${value.func}.png`" style="color: rgb(255, 0, 0)" alt="" />
|
||||
<!-- <span :style="{ color: !clickChange[value] ? 'var(--color-text)' : 'rgb(255,0,0)' }">{{ t(`${obj.key}.${value}`) }}</span>-->
|
||||
<span>{{ value.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getCurrentInstance } from 'vue';
|
||||
|
||||
// 获取组件实例
|
||||
const instance = getCurrentInstance();
|
||||
const obj: any = ref(null);
|
||||
const initList = (value) => {
|
||||
obj.value = value;
|
||||
console.log(value);
|
||||
};
|
||||
const methodMap = {
|
||||
roam() {
|
||||
instance.proxy['$sendChanel']('flyRoamDialog', '');
|
||||
},
|
||||
// 路径规划
|
||||
routePlan() {
|
||||
instance.proxy['$sendChanel']('routePlanningDialog', '');
|
||||
},
|
||||
//投影面积
|
||||
projectionArea: () => {
|
||||
new window['YJ'].Measure.MeasureTyArea(window['Earth1']).start();
|
||||
},
|
||||
//投影距离测量
|
||||
projectionDistanceMeasure: () => {
|
||||
new window['YJ'].Measure.MeasureProjectionDistance(window['Earth1']).start();
|
||||
},
|
||||
areaMeasure: () => {
|
||||
new window['YJ'].Measure.MeasureTdArea(window['Earth1']).start();
|
||||
},
|
||||
//距离测量
|
||||
distanceMeasure: () => {
|
||||
new window['YJ'].Measure.MeasureDistance(window['Earth1']).start();
|
||||
},
|
||||
//高度测量
|
||||
heightMeasure: () => {
|
||||
new window['YJ'].Measure.MeasureHeight(window['Earth1']).start();
|
||||
},
|
||||
//三角测量
|
||||
triangleMeasure: () => {
|
||||
new window['YJ'].Measure.MeasureTriangle(window['Earth1']).start();
|
||||
},
|
||||
// 方位角
|
||||
MeasureAzimuth() {
|
||||
new window['YJ'].Measure.MeasureAzimuth(window['Earth1']).start();
|
||||
},
|
||||
//夹角测量
|
||||
MeasureAngle() {
|
||||
new window['YJ'].Measure.MeasureAngle(window['Earth1']).start();
|
||||
},
|
||||
// 坡度测量
|
||||
lopeDistanceMeasures() {
|
||||
new window['YJ'].Measure.MeasureSlopeDistance(window['Earth1']).start();
|
||||
},
|
||||
//坐标测量
|
||||
coorMeasure() {
|
||||
new window['YJ'].Measure.MeasureLocation(window['Earth1']).start();
|
||||
},
|
||||
//清除测量
|
||||
clear() {
|
||||
window['YJ'].Measure.Clear();
|
||||
}
|
||||
};
|
||||
const handleClick = (value = 'projectionDistanceMeasure') => {
|
||||
// console.log('点击了', value);
|
||||
methodMap[value['func']]();
|
||||
window['$']('.leftSideSecond ')[0].style.display = 'none';
|
||||
};
|
||||
defineExpose({
|
||||
initList
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.leftSideSecond {
|
||||
display: none;
|
||||
height: 250px;
|
||||
width: 230px;
|
||||
background: url('@/assets/images/map/secondBj.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 9px 4px;
|
||||
|
||||
.leftSideSecondBox {
|
||||
//border: 1px solid red;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
.menuItem {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 5px 0;
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
577
src/views/largeScreen/components/newMap/rightOperate.ts
Normal file
577
src/views/largeScreen/components/newMap/rightOperate.ts
Normal file
@ -0,0 +1,577 @@
|
||||
import { useTreeNode } from './treeNode';
|
||||
import app from '@/main';
|
||||
import { deleteSource } from '@/views/largeScreen/components/api'
|
||||
import { } from "./tree"
|
||||
export const useRightOperate = () => {
|
||||
const { getSelectedNodes,cusRemoveNode } = useTreeNode();
|
||||
|
||||
//编辑
|
||||
const editNode = (node) => {
|
||||
console.log('sdfdsf');
|
||||
console.log(!node);
|
||||
if (!node) {
|
||||
const selectNodes = getSelectedNodes(window['treeObj']);
|
||||
console.log(selectNodes, 'selectNodes');
|
||||
if (selectNodes && selectNodes[selectNodes.length - 1]) {
|
||||
node = selectNodes[selectNodes.length - 1];
|
||||
}
|
||||
}
|
||||
console.log(node, 'node');
|
||||
if (node) {
|
||||
console.log(node);
|
||||
app.config.globalProperties['$sendChanel']('openDialog', [node.sourceType, node.id]);
|
||||
// eventBus.emit('openDialog', node.sourceType, node.id);
|
||||
// if (node.sourceType == 'pressModel') {
|
||||
// eventBus.emit('openDialog', node.sourceType, node);
|
||||
// } else {
|
||||
// eventBus.emit('openDialog', node.sourceType, node.id);
|
||||
// }
|
||||
}
|
||||
};
|
||||
// 删除
|
||||
const deleteNode = (eventBus, node) => {
|
||||
ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
let selectNodes = getSelectedNodes(window['treeObj']);
|
||||
let source_ids = cusRemoveNode(window['treeObj'], selectNodes);
|
||||
const res = await deleteSource({ ids: source_ids });
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
});
|
||||
source_ids.forEach((item) => {
|
||||
let entity = window['Earth1'].entityMap.get(item);
|
||||
entity?.remove?.();
|
||||
// let node = window.treeObj.getNodeByParam("id", item, null);
|
||||
eventBus.emit('destroyComponent', item);
|
||||
});
|
||||
window['YJ'].Global.splitScreen.setActiveId();
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.msg || '删除失败',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 用户点击取消，不执行任何操作
|
||||
});
|
||||
};
|
||||
const rightMenus: any = reactive({
|
||||
edit: {
|
||||
name: '编辑节点',
|
||||
key: 'editNode',
|
||||
callback: editNode
|
||||
},
|
||||
del: {
|
||||
name: '删除节点',
|
||||
key: 'del',
|
||||
callback: deleteNode
|
||||
},
|
||||
|
||||
/*addDirectory: {
|
||||
key: 'addDirectory',
|
||||
name: '添加文件夹',
|
||||
callback: addDirectory
|
||||
}
|
||||
addResource: {
|
||||
key: 'addResource',
|
||||
callback: addResource
|
||||
},
|
||||
importPanorama: {
|
||||
key: 'importPanorama',
|
||||
callback: importPanorama
|
||||
},
|
||||
pictureLocation: {
|
||||
key: 'pictureLocation',
|
||||
|
||||
callback: pictureLocation
|
||||
},
|
||||
showAttr: {
|
||||
key: 'showAttr',
|
||||
|
||||
callback: showAttr
|
||||
},
|
||||
importHeader: {
|
||||
key: 'importHeader',
|
||||
|
||||
callback: importHeader
|
||||
},
|
||||
addXlsx: {
|
||||
key: 'addXlsx',
|
||||
|
||||
callback: addXlsxs
|
||||
},
|
||||
addTrajectory: {
|
||||
key: 'addTrajectory',
|
||||
callback: addTrajectory
|
||||
},
|
||||
|
||||
del: {
|
||||
key: 'del',
|
||||
callback: deleteNode
|
||||
},
|
||||
|
||||
pressModel: {
|
||||
key: 'pressModel',
|
||||
|
||||
callback: pressModel
|
||||
},
|
||||
setView: {
|
||||
key: 'setView',
|
||||
callback: setView
|
||||
},
|
||||
resetView: {
|
||||
key: 'resetView',
|
||||
callback: resetView
|
||||
},
|
||||
layerRaise: {
|
||||
key: 'layerRaise',
|
||||
|
||||
callback: layerRaise
|
||||
},
|
||||
layerLower: {
|
||||
key: 'layerLower',
|
||||
|
||||
callback: layerLower
|
||||
},
|
||||
layerToTop: {
|
||||
key: 'layerToTop',
|
||||
callback: layerToTop
|
||||
},
|
||||
layerToBottom: {
|
||||
key: 'layerToBottom',
|
||||
callback: layerToBottom
|
||||
},
|
||||
tilesetClipping: {
|
||||
key: 'tilesetClipping',
|
||||
callback: tilesetClipping
|
||||
},
|
||||
addBIM: {
|
||||
key: 'addBIM',
|
||||
callback: addBIM
|
||||
},
|
||||
resetPerspective: {
|
||||
key: 'resetPerspective',
|
||||
callback: resetPerspective
|
||||
}*/
|
||||
});
|
||||
/* {
|
||||
//添加文件
|
||||
const addDirectory = () => {
|
||||
$changeComponentPop('.adddirectoryBox', true);
|
||||
};
|
||||
//添加资源
|
||||
const addResource = () => {
|
||||
const { ipcRenderer } = require('electron');
|
||||
const options = {
|
||||
properties: ['openFile'], // 允许选择多个文件
|
||||
filters: [
|
||||
{ name: '模型、影像、地形', extensions: ['clt', 'json', 'jct', 'mbtiles', 'pak'] },
|
||||
{ name: '矢量数据', extensions: ['kmz', 'kml', 'shp', 'tab', 'mif', 'geojson'] }
|
||||
]
|
||||
};
|
||||
let selectedNodes = window.treeObj.getSelectedNodes();
|
||||
let node = selectedNodes && selectedNodes[selectedNodes.length - 1];
|
||||
let parentId;
|
||||
if (node) {
|
||||
if (node.sourceType === 'directory') {
|
||||
parentId = node.id;
|
||||
} else {
|
||||
parentId = node.parentId;
|
||||
}
|
||||
}
|
||||
ipcRenderer.send('open-directory-dialog', options);
|
||||
// 监听主进程返回的结果
|
||||
//@ts-ignore
|
||||
ipcRenderer.once('selectedItem', async (event, filePaths) => {
|
||||
if (filePaths.length > 0) {
|
||||
let id = new YJ.Tools().randomString();
|
||||
|
||||
// 检查文件名是否有效
|
||||
if (typeof filePaths[0] !== 'string' || filePaths[0].trim() === '') {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 获取最后一个点的位置
|
||||
const lastDotIndex = filePaths[0].lastIndexOf('.');
|
||||
|
||||
// 如果没有点或者点是最后一个字符，则不是有效的文件后缀
|
||||
if (lastDotIndex === -1 || lastDotIndex === filePaths[0].length - 1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 提取后缀并转换为小写进行比较
|
||||
const extension = filePaths[0].slice(lastDotIndex + 1).toLowerCase();
|
||||
|
||||
let params2: any = {
|
||||
id: id,
|
||||
show: true
|
||||
};
|
||||
if (extension === 'mbtiles') {
|
||||
params2.alpha = 1;
|
||||
params2.brightness = 1;
|
||||
params2.layerIndex = 99999;
|
||||
}
|
||||
if (extension === 'apk') {
|
||||
// params2.exaggeration = 1
|
||||
}
|
||||
|
||||
let params: any = {
|
||||
id: id,
|
||||
sourcePath: filePaths[0],
|
||||
parentId: parentId,
|
||||
params: params2
|
||||
};
|
||||
// filePaths[0].split('\\').pop()
|
||||
let res = await TreeApi.addModelSource(params);
|
||||
console.log('res', res);
|
||||
if (res.code === 0 || res.code === 200) {
|
||||
ElMessage({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
res.data.params = JSON.parse(res.data.params);
|
||||
if (!res.data.params.name) {
|
||||
res.data.params.name = res.data.sourceName;
|
||||
}
|
||||
if (!res.data.params.id) {
|
||||
res.data.params.id = res.data.id;
|
||||
}
|
||||
let detail = JSON.parse(res.data.detail);
|
||||
let mapParams = { ...detail, ...res.data.params };
|
||||
|
||||
await initMapData(res.data.sourceType, mapParams, (entity) => {
|
||||
entity.flyTo();
|
||||
});
|
||||
if (res.data.sourceType) {
|
||||
}
|
||||
res.data.params = JSON.stringify(res.data.params);
|
||||
res.data.detail = JSON.stringify(res.data.detail);
|
||||
cusAddNodes(window.treeObj, params.parentId, [res.data]);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
//导入全景
|
||||
const importPanorama = async () => {
|
||||
let selectedNodes = window.treeObj.getSelectedNodes();
|
||||
let node = selectedNodes && selectedNodes[selectedNodes.length - 1];
|
||||
let parentId;
|
||||
if (node) {
|
||||
if (node.sourceType === 'directory') {
|
||||
parentId = node.id;
|
||||
} else {
|
||||
parentId = node.parentId;
|
||||
}
|
||||
}
|
||||
const pickerOpts = {
|
||||
types: [
|
||||
{
|
||||
description: '全景图',
|
||||
accept: {
|
||||
'image/jpg': ['.jpg']
|
||||
}
|
||||
}
|
||||
],
|
||||
excludeAcceptAllOption: true,
|
||||
multiple: true
|
||||
};
|
||||
if ((window as any).showOpenFilePicker) {
|
||||
const fileHandles = await (window as any).showOpenFilePicker(pickerOpts);
|
||||
const files = await Promise.all(fileHandles.map((fileHandle) => fileHandle.getFile()));
|
||||
const dataTransfer = new DataTransfer();
|
||||
handleFileImgInput(files, parentId, 'vrImage');
|
||||
} else {
|
||||
let input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = '.jpg';
|
||||
input.multiple = true;
|
||||
input.click();
|
||||
input.addEventListener('input', async (e: any) => {
|
||||
let files = e.target.files;
|
||||
handleFileImgInput(files, parentId, 'vrImage');
|
||||
});
|
||||
}
|
||||
};
|
||||
//图片定位
|
||||
const pictureLocation = async () => {
|
||||
let selectedNodes = window.treeObj.getSelectedNodes();
|
||||
let node = selectedNodes && selectedNodes[selectedNodes.length - 1];
|
||||
let parentId;
|
||||
if (node) {
|
||||
if (node.sourceType === 'directory') {
|
||||
parentId = node.id;
|
||||
} else {
|
||||
parentId = node.parentId;
|
||||
}
|
||||
}
|
||||
const pickerOpts = {
|
||||
types: [
|
||||
{
|
||||
description: '无人机航拍',
|
||||
accept: {
|
||||
'image/jpg': ['.jpg']
|
||||
}
|
||||
}
|
||||
],
|
||||
excludeAcceptAllOption: true,
|
||||
multiple: true
|
||||
};
|
||||
if ((window as any).showOpenFilePicker) {
|
||||
const fileHandles = await (window as any).showOpenFilePicker(pickerOpts);
|
||||
const files = await Promise.all(fileHandles.map((fileHandle) => fileHandle.getFile()));
|
||||
const dataTransfer = new DataTransfer();
|
||||
handleFileImgInput(files, parentId, 'linkImage');
|
||||
} else {
|
||||
let input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = '.jpg';
|
||||
input.multiple = true;
|
||||
input.click();
|
||||
input.addEventListener('input', async (e: any) => {
|
||||
let files = e.target.files;
|
||||
handleFileImgInput(files, parentId, 'linkImage');
|
||||
});
|
||||
}
|
||||
};
|
||||
//属性
|
||||
const showAttr = () => {};
|
||||
//导入模型
|
||||
const importHeader = () => {};
|
||||
//导入模型
|
||||
const addXlsxs = () => {};
|
||||
//导入模型
|
||||
const addTrajectory = () => {};
|
||||
|
||||
//删除
|
||||
const deleteNode = (eventBus, node) => {
|
||||
ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
let selectNodes = getSelectedNodes(window.treeObj);
|
||||
let source_ids = cusRemoveNode(window.treeObj, selectNodes);
|
||||
const res = await TreeApi.removeDirectory({ ids: source_ids });
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
});
|
||||
source_ids.forEach((item) => {
|
||||
let entity = window.earth.entityMap.get(item);
|
||||
entity?.remove?.();
|
||||
// let node = window.treeObj.getNodeByParam("id", item, null);
|
||||
eventBus.emit('destroyComponent', item);
|
||||
});
|
||||
YJ.Global.splitScreen.setActiveId();
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.msg || '删除失败',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 用户点击取消，不执行任何操作
|
||||
});
|
||||
};
|
||||
//添加BIM
|
||||
const addBIM = () => {};
|
||||
//重置透视
|
||||
const resetPerspective = () => {};
|
||||
|
||||
const pressModel = () => {};
|
||||
|
||||
//设置视图
|
||||
const setView = () => {
|
||||
let selectNodes = getSelectedNodes(window.treeObj);
|
||||
if (selectNodes && selectNodes[selectNodes.length - 1]) {
|
||||
let node = selectNodes[selectNodes.length - 1];
|
||||
let params = JSON.parse(node.params);
|
||||
if (!params) {
|
||||
params = {
|
||||
name: node.sourceName,
|
||||
show: node.isShow,
|
||||
id: node.id
|
||||
};
|
||||
}
|
||||
let entityObject = window.earth.entityMap.get(params.id);
|
||||
entityObject.setCustomView();
|
||||
params.customView = entityObject.customView;
|
||||
let params2 = {
|
||||
'id': node.id,
|
||||
'sourceName': params.name,
|
||||
// "sourceType": node.sourceType,
|
||||
'parentId': node.parentId,
|
||||
'treeIndex': node.treeIndex,
|
||||
'params': params,
|
||||
'isShow': node.isShow ? 1 : 0 ? 1 : 0
|
||||
};
|
||||
TreeApi.updateDirectoryInfo(params2);
|
||||
}
|
||||
};
|
||||
//重置视图
|
||||
const resetView = () => {
|
||||
let selectNodes = getSelectedNodes(window.treeObj);
|
||||
if (selectNodes && selectNodes[selectNodes.length - 1]) {
|
||||
let node = selectNodes[selectNodes.length - 1];
|
||||
let params = JSON.parse(node.params);
|
||||
let entityObject = window.earth.entityMap.get(params.id);
|
||||
entityObject.resetCustomView();
|
||||
params.customView = entityObject.customView;
|
||||
let params2 = {
|
||||
'id': node.id,
|
||||
'sourceName': params.name,
|
||||
// "sourceType": node.sourceType,
|
||||
// "parentId": node.parentId,
|
||||
// "treeIndex": node.treeIndex,
|
||||
'params': params,
|
||||
'isShow': node.isShow ? 1 : 0
|
||||
};
|
||||
TreeApi.updateDirectoryInfo(params2);
|
||||
cusUpdateNode({ 'id': params2.id, 'sourceName': params2.sourceName, 'params': JSON.stringify(params) });
|
||||
}
|
||||
};
|
||||
//提升图层
|
||||
const layerRaise = () => {
|
||||
layerIndex('layerRaise');
|
||||
};
|
||||
//降低图层
|
||||
const layerLower = () => {
|
||||
layerIndex('layerLower');
|
||||
};
|
||||
//置顶图层
|
||||
const layerToTop = () => {
|
||||
layerIndex('layerToTop');
|
||||
};
|
||||
//置底图层
|
||||
const layerToBottom = () => {
|
||||
layerIndex('layerToBottom');
|
||||
};
|
||||
//切片
|
||||
const tilesetClipping = () => {};
|
||||
|
||||
|
||||
const layerIndex = (key) => {
|
||||
let selectNodes = getSelectedNodes(window.treeObj);
|
||||
if (selectNodes && selectNodes[selectNodes.length - 1]) {
|
||||
let node = selectNodes[selectNodes.length - 1];
|
||||
let layer = window.earth.entityMap.get(node.id);
|
||||
layer[key]();
|
||||
_updateLayerIndex();
|
||||
}
|
||||
};
|
||||
|
||||
const _updateLayerIndex = () => {
|
||||
let nodes = window.treeObj.transformToArray(window.treeObj.getNodes());
|
||||
let layers: any = [];
|
||||
let arr = ['ArcgisWXImagery', 'ArcgisBLUEImagery', 'ArcgisLWImagery', 'GDLWImagery', 'GDWXImagery', 'GDSLImagery', 'layer'];
|
||||
nodes.forEach((item) => {
|
||||
if (arr.includes(item.sourceType) && item.isShow) {
|
||||
let entityOptions = window.earth.entityMap.get(item.id);
|
||||
let layerIndex = entityOptions.layerIndex;
|
||||
layers.push({ id: item.id, layerIndex });
|
||||
let params = {
|
||||
layerIndex: entityOptions.layerIndex,
|
||||
alpha: entityOptions.alpha,
|
||||
brightness: entityOptions.brightness,
|
||||
name: entityOptions.name,
|
||||
show: entityOptions.show,
|
||||
id: item.id
|
||||
};
|
||||
let params2 = {
|
||||
'id': params.id,
|
||||
'sourceName': params.name,
|
||||
'params': params,
|
||||
'isShow': params.show ? 1 : 0
|
||||
};
|
||||
TreeApi.updateDirectoryInfo(params2);
|
||||
cusUpdateNode({ 'id': params.id, 'sourceName': params.name, 'params': JSON.stringify(params) });
|
||||
}
|
||||
});
|
||||
console.log('layers', layers);
|
||||
};
|
||||
// 图片文件上传后续
|
||||
async function handleFileImgInput(files: any, parentId: string, type: string) {
|
||||
const { ipcRenderer } = require('electron');
|
||||
let availablePort = await ipcRenderer.invoke('get-available-port');
|
||||
const formData = new FormData();
|
||||
let ids: any = [];
|
||||
let filesList: any = [];
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const element = files[i];
|
||||
ids.push(new YJ.Tools().randomString());
|
||||
filesList.push(element);
|
||||
formData.append('files', element);
|
||||
}
|
||||
let params: any = {
|
||||
'id': ids[0],
|
||||
'show': true,
|
||||
'near': 2000,
|
||||
'far': 100000,
|
||||
'scaleByDistance': true,
|
||||
'heightMode': 3,
|
||||
'billboard': {
|
||||
'show': true,
|
||||
'image': `http://localhost:${availablePort}/GEMarker1/A-ablu-blank.png`,
|
||||
'scale': 3
|
||||
},
|
||||
'label': {
|
||||
'show': true,
|
||||
'fontFamily': 0,
|
||||
'fontSize': 39,
|
||||
'color': '#00ffff'
|
||||
},
|
||||
'attribute': {
|
||||
'link': {
|
||||
'content': []
|
||||
},
|
||||
'vr': {
|
||||
'content': []
|
||||
},
|
||||
'camera': {
|
||||
'content': []
|
||||
},
|
||||
'isc': {
|
||||
'content': []
|
||||
},
|
||||
'goods': {
|
||||
'content': []
|
||||
}
|
||||
},
|
||||
'richTextContent': ''
|
||||
};
|
||||
formData.append('ids', ids);
|
||||
formData.append('parentId', parentId);
|
||||
formData.append('sourceType', type);
|
||||
formData.append('params', JSON.stringify(params));
|
||||
let res = await GisApi.uploadLocationImage(formData);
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
let item = res.data[i];
|
||||
initMapData(type, JSON.parse(item.params), null);
|
||||
}
|
||||
cusAddNodes(window.treeObj, parentId, res.data);
|
||||
}
|
||||
}
|
||||
}*/
|
||||
const itemClick = (menuItem: any) => {
|
||||
return menuItem.callback();
|
||||
};
|
||||
return {
|
||||
rightMenus,
|
||||
itemClick
|
||||
};
|
||||
};
|
||||
352
src/views/largeScreen/components/newMap/tree.ts
Normal file
352
src/views/largeScreen/components/newMap/tree.ts
Normal file
@ -0,0 +1,352 @@
|
||||
import { getMarkerList, updateInfo } from '@/views/largeScreen/components/api';
|
||||
import { initMapData } from './initMapData';
|
||||
import { useTreeNode } from './treeNode';
|
||||
import app from '@/main';
|
||||
export const useTree = () => {
|
||||
const rightMenuRef: any = ref(); //右键菜单的实例
|
||||
const { cusNodeIcon, getSelectedNodes, cusSelectNode, nodeType } = useTreeNode();
|
||||
const urlParams = new URLSearchParams(new URL(window.location.href).search);
|
||||
const projectIdTwo = urlParams.get('projectId');
|
||||
const treeObj = ref(); //树形的实例
|
||||
// 树的数据
|
||||
const zNodes = ref([
|
||||
{
|
||||
id: 1,
|
||||
parentId: 0,
|
||||
sourceName: '111',
|
||||
isShow: true,
|
||||
sourceType: 'directory',
|
||||
params: ''
|
||||
}
|
||||
]);
|
||||
const nodes: any = ref([]);
|
||||
/**
|
||||
* 显示、定位右键菜单组件并返回菜单数组
|
||||
*/
|
||||
const showRightMenu = (event: any, treeObj: any) => {
|
||||
const selectedNodes = getSelectedNodes(treeObj);
|
||||
let arr: any = [];
|
||||
// 右键菜单的宽高
|
||||
const rightMenuHeight = window.getComputedStyle(window['$']('#rMenu')[0]).getPropertyValue('height');
|
||||
const rightMenuWidth = window.getComputedStyle(window['$']('#rMenu')[0]).getPropertyValue('width');
|
||||
const getNumber = (string: any) => {
|
||||
return Number(string.replace('px', ''));
|
||||
};
|
||||
console.log('event', event);
|
||||
console.log('右键菜单的宽高');
|
||||
console.log(getNumber(rightMenuHeight));
|
||||
console.log(getNumber(rightMenuWidth));
|
||||
let x = Math.abs(event.clientX - window['$']('.treeBox')[0].getBoundingClientRect().left);
|
||||
let y = Math.abs(event.clientY - window['$']('.treeBox')[0].getBoundingClientRect().top);
|
||||
y += document.body.scrollTop + 20;
|
||||
x += document.body.scrollLeft + 40;
|
||||
const bodyWidth = window['$']('body')?.width() || 0;
|
||||
const bodyHeight = window['$']('body')?.height() || 0;
|
||||
if (event.screenX + getNumber(rightMenuWidth) + 40 > bodyWidth) {
|
||||
x = bodyWidth - getNumber(rightMenuWidth) - window['$']('.treeBox')[0].getBoundingClientRect().left;
|
||||
}
|
||||
if (event.screenY + getNumber(rightMenuHeight) + 20 > bodyHeight) {
|
||||
y = (bodyHeight - window['$']('.treeBox')[0].getBoundingClientRect().top) / 2;
|
||||
}
|
||||
window['$']('#rMenu').css({
|
||||
top: y + 'px',
|
||||
left: x + 'px',
|
||||
visibility: 'visible'
|
||||
});
|
||||
console.log('selectedNodes', selectedNodes);
|
||||
if (Object.prototype.toString.call(selectedNodes) === '[object Array]' && selectedNodes.length > 1) {
|
||||
arr = ['del'];
|
||||
} else {
|
||||
if (selectedNodes.length == 0) arr = ['addDirectory'];
|
||||
else {
|
||||
try {
|
||||
arr = nodeType[selectedNodes[0].sourceType].rightMenus;
|
||||
} catch (e) {
|
||||
console.log('e', e);
|
||||
arr = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
};
|
||||
/**
|
||||
* 用于捕获zTree上鼠标按键按下后的事件回调函数
|
||||
* @param event
|
||||
* @param treeId
|
||||
* @param treeNode
|
||||
*/
|
||||
const onMouseDown = (event: MouseEvent, treeId: string, treeNode: any) => {
|
||||
const isShift = event.shiftKey;
|
||||
const isCtrl = event.ctrlKey;
|
||||
if ((!isShift && !isCtrl) || !treeNode) {
|
||||
nodes.value = [];
|
||||
}
|
||||
if (treeNode) {
|
||||
//判断是否是图层文件
|
||||
if (isCtrl) {
|
||||
const isSelected = window['treeObj'].getSelectedNodes().some((node: any) => node.id === treeNode.id);
|
||||
if (isSelected) {
|
||||
// 如果节点已选中，则取消选中
|
||||
nodes.value = nodes.value.filter((node: any) => node.id !== treeNode.id);
|
||||
} else {
|
||||
// 如果节点未选中，则添加到选中列表
|
||||
nodes.value.push(treeNode);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
window['treeObj'].cancelSelectedNode();
|
||||
window['$']('#rMenu')[0].style.visibility = 'hidden';
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 树形节点右键点击
|
||||
* @param event 事件对象
|
||||
* @param treeId 树形结构id
|
||||
* @param treeNode 鼠标右键点击时所在节点的 JSON 数据对象
|
||||
*/
|
||||
const onRightClick = (event: MouseEvent, treeId: string, treeNode: any) => {
|
||||
event.preventDefault();
|
||||
console.log('treeObj', treeObj);
|
||||
const selectNodes = getSelectedNodes(treeObj.value);
|
||||
let isnewSelect = true; //是否为新选中
|
||||
selectNodes.forEach((item: any) => {
|
||||
if (treeNode && item.id == treeNode.id) isnewSelect = false;
|
||||
});
|
||||
if (!event.ctrlKey && (selectNodes.length < 2 || isnewSelect)) cusSelectNode(treeObj.value, treeNode);
|
||||
const menus = showRightMenu(event, treeObj.value);
|
||||
console.log('menus', menus);
|
||||
// if (menus.length == 0) {
|
||||
// return;
|
||||
// }
|
||||
nextTick(() => {
|
||||
rightMenuRef.value.initMenus(menus, treeNode);
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数
|
||||
* @param event
|
||||
* @param treeId
|
||||
* @param treeNode
|
||||
*/
|
||||
const onCheck = async (event: any, treeId: any, treeNode: any) => {
|
||||
console.log(treeNode, 'treeNode');
|
||||
const parentNode = treeNode.getParentNode();
|
||||
|
||||
let params = treeNode.params;
|
||||
if (typeof treeNode.params === 'string') {
|
||||
params = JSON.parse(treeNode.params);
|
||||
}
|
||||
let entityObject;
|
||||
if (treeNode.sourceType == 'pressModel') {
|
||||
// const params = JSON.parse(treeNode.params);
|
||||
const id = treeNode.id + '_' + params.modelId;
|
||||
const data = (window as any).pressModelMap.get(id);
|
||||
data.isShow = treeNode.isShow;
|
||||
entityObject = (window as any).pressModelEntities.get(treeNode.id);
|
||||
|
||||
if (!entityObject && treeNode.isShow) {
|
||||
const entity = window['Earth1'].entityMap.get(params.modelId).entity;
|
||||
entityObject = new window['YJ'].Analysis.Flat(window['Earth1'], entity, {
|
||||
positions: params.positions,
|
||||
height: params.height,
|
||||
name: treeNode.sourceName
|
||||
})(window as any).pressModelEntities.set(treeNode.id, entityObject);
|
||||
}
|
||||
} else {
|
||||
entityObject = window['Earth1'].entityMap.get(treeNode.id);
|
||||
}
|
||||
if (entityObject) {
|
||||
entityObject.show = treeNode.isShow;
|
||||
} else {
|
||||
// 需要深拷贝
|
||||
const params = JSON.parse(treeNode.params);
|
||||
const params2 = JSON.stringify(params);
|
||||
initMapData(treeNode.sourceType, JSON.parse(params2), treeNode.id).then((res) => {
|
||||
entityObject = window['Earth1'].entityMap.get(res.id);
|
||||
entityObject.show = treeNode.isShow;
|
||||
});
|
||||
}
|
||||
// entityObject.show = treeNode.isShow;
|
||||
treeNode.sourceType != 'pressModel' && (params.show = treeNode.isShow);
|
||||
const params2 = {
|
||||
'id': treeNode.id,
|
||||
params: params,
|
||||
'isShow': treeNode.isShow ? 1 : 0
|
||||
};
|
||||
updateInfo(params2).then((res) => {
|
||||
if (res.code == 200) app.config.globalProperties.$message.success('操作成功');
|
||||
});
|
||||
|
||||
// 如果当前节点有父节点，检查所有子节点状态
|
||||
if (parentNode) {
|
||||
checkChildNodes(parentNode);
|
||||
}
|
||||
|
||||
// 检查子节点状态，更新父节点
|
||||
function checkChildNodes(parentNode) {
|
||||
const children = parentNode.children;
|
||||
if (!children || children.length === 0) return;
|
||||
|
||||
// 检查是否所有子节点都未被选中
|
||||
let allUnchecked = true;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const childNode = children[i];
|
||||
// 如果有任何一个子节点被选中，则父节点不应被取消
|
||||
if (childNode.isShow) {
|
||||
allUnchecked = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 如果所有子节点都未被选中，且父节点当前是选中状态，则取消父节点选择
|
||||
if (allUnchecked && parentNode.isShow) {
|
||||
window['treeObj'].checkNode(parentNode, false, true);
|
||||
|
||||
// 递归检查上一级父节点
|
||||
const grandParent = parentNode.getParentNode();
|
||||
if (grandParent) {
|
||||
checkChildNodes(grandParent);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 树形节点左键双击
|
||||
* @param event 事件对象
|
||||
* @param treeId 树形结构id
|
||||
* @param treeNode 鼠标右键点击时所在节点的 JSON 数据对象
|
||||
*/
|
||||
const onDblClick = (event: MouseEvent, treeId: string, treeNode: any) => {
|
||||
console.log('treeNode', treeNode);
|
||||
if (treeNode.params && typeof treeNode.params === 'string') {
|
||||
treeNode.params = JSON.parse(treeNode.params);
|
||||
}
|
||||
|
||||
let entityObject;
|
||||
if (treeNode.sourceType == 'pressModel') {
|
||||
entityObject = (window as any).pressModelEntities.get(treeNode.id);
|
||||
} else if (treeNode.sourceType === 'roam') {
|
||||
app.config.globalProperties.$message.warning('单击鼠标右键可结束当前漫游');
|
||||
window['YJ'].Global.FlyRoam.flyTo(window['Earth1'], treeNode.params.points);
|
||||
return;
|
||||
} else {
|
||||
entityObject = window['Earth1'].entityMap.get(treeNode.id);
|
||||
}
|
||||
console.log('entityObject', entityObject);
|
||||
entityObject.flyTo();
|
||||
};
|
||||
//树的配置项
|
||||
const setting = {
|
||||
edit: {
|
||||
enable: true,
|
||||
showRemoveBtn: false,
|
||||
showRenameBtn: false,
|
||||
drag: {
|
||||
isMove: true,
|
||||
isCopy: false
|
||||
}
|
||||
},
|
||||
check: {
|
||||
enable: true,
|
||||
nocheckInherit: false,
|
||||
chkboxType: { Y: 'ps', N: 's' }
|
||||
},
|
||||
view: {
|
||||
selectedMulti: true
|
||||
// autoCancelSelected: true
|
||||
},
|
||||
data: {
|
||||
key: {
|
||||
//zdatas数据中表示节点name的属性key
|
||||
name: 'sourceName',
|
||||
checked: 'isShow'
|
||||
},
|
||||
simpleData: {
|
||||
enable: true,
|
||||
idKey: 'id',
|
||||
pIdKey: 'parentId',
|
||||
nameKey: 'sourceName'
|
||||
}
|
||||
},
|
||||
callback: {
|
||||
onMouseDown: onMouseDown,
|
||||
onRightClick: onRightClick,
|
||||
// onClick: onClick,
|
||||
// onDrop: onDrop,
|
||||
// beforeDrop: beforeDrop,
|
||||
onCheck: onCheck,
|
||||
onDblClick: onDblClick
|
||||
}
|
||||
};
|
||||
|
||||
const initTreeCallBack = () => {
|
||||
const arr = ['ArcgisWXImagery', 'ArcgisBLUEImagery', 'ArcgisLWImagery', 'GDLWImagery', 'GDWXImagery', 'GDSLImagery', 'layer'];
|
||||
const layers: any = [];
|
||||
console.log("window['Earth1']", window['Earth1']);
|
||||
if (window['Earth1']) {
|
||||
for (let i = 0; i < zNodes.value.length; i++) {
|
||||
if (zNodes.value[i].sourceType === 'directory') {
|
||||
continue;
|
||||
}
|
||||
const params = JSON.parse(zNodes.value[i].params || '{}');
|
||||
const detail = JSON.parse(zNodes.value[i]['detail'] || '{}');
|
||||
if (!params.id) {
|
||||
params.id = zNodes.value[i].id;
|
||||
}
|
||||
if (!params.name) {
|
||||
params.name = zNodes.value[i].sourceName;
|
||||
}
|
||||
if (arr.includes(zNodes.value[i].sourceType)) {
|
||||
layers.push({
|
||||
sourceType: zNodes.value[i].sourceType,
|
||||
params: { ...detail, ...params }
|
||||
});
|
||||
} else {
|
||||
if (zNodes.value[i].isShow) initMapData(zNodes.value[i].sourceType, { ...detail, ...params }, null);
|
||||
}
|
||||
}
|
||||
layers.sort((obj1, obj2) => {
|
||||
return obj1.params.layerIndex - obj2.params.layerIndex;
|
||||
});
|
||||
console.log(layers, 'layers');
|
||||
for (let i = 0; i < layers.length; i++) {
|
||||
// if (layers[i].sourceType == null) layers[i].sourceType = 'tileset';
|
||||
initMapData(layers[i].sourceType, layers[i].params, null);
|
||||
}
|
||||
}
|
||||
};
|
||||
const initTree = async (selector: string = '#treeDemo') => {
|
||||
const res = await getMarkerList();
|
||||
if (res.code == 200) {
|
||||
res.data.sort((a: any, b: any) => {
|
||||
if (a.treeIndex && b.treeIndex) {
|
||||
return a.treeIndex - b.treeIndex;
|
||||
}
|
||||
if (a.treeIndex) {
|
||||
return -1;
|
||||
}
|
||||
if (b.treeIndex) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
for (let i = res.data.length - 1; i >= 0; i--) {
|
||||
res.data[i].icon = await cusNodeIcon(res.data[i]);
|
||||
res.data[i].class = 'xxxx';
|
||||
res.data[i].className = 'xxxx';
|
||||
}
|
||||
zNodes.value = [...res.data];
|
||||
// console.log('getMarkerList·res', zNodes.value);
|
||||
// 初始化树
|
||||
treeObj.value = window['$'].fn.zTree.init(window['$'](selector), setting, zNodes.value);
|
||||
window['treeObj'] = treeObj.value;
|
||||
initTreeCallBack();
|
||||
}
|
||||
|
||||
};
|
||||
return {
|
||||
initTree,
|
||||
setting,
|
||||
rightMenuRef
|
||||
};
|
||||
};
|
||||
123
src/views/largeScreen/components/newMap/treeNode.ts
Normal file
123
src/views/largeScreen/components/newMap/treeNode.ts
Normal file
@ -0,0 +1,123 @@
|
||||
export const useTreeNode = () => {
|
||||
const nodeType = {
|
||||
point: { rightMenus: ['edit', 'del'] },
|
||||
line: { rightMenus: ['edit', 'del'] },
|
||||
polygon: { rightMenus: ['edit', 'del'] },
|
||||
attackArrow: { rightMenus: ['edit', 'del'] },
|
||||
pincerArrow: { rightMenus: ['edit', 'del'] },
|
||||
groundText: { rightMenus: ['edit', 'del'] },
|
||||
standText: { rightMenus: ['edit', 'del'] },
|
||||
linkImage: { rightMenus: ['edit', 'del'] },
|
||||
vrImage: { rightMenus: ['edit', 'del'] },
|
||||
curve: { rightMenus: ['edit', 'del'] },
|
||||
panel: { rightMenus: ['edit', 'del'] },
|
||||
rectangle: { rightMenus: ['edit', 'del'] },
|
||||
rendezvous: { rightMenus: ['edit', 'del'] },
|
||||
circle: { rightMenus: ['edit', 'del'] },
|
||||
ellipse: { rightMenus: ['edit', 'del'] },
|
||||
model: { rightMenus: ['edit', 'del'] },
|
||||
military: { rightMenus: ['edit', 'del'] },
|
||||
tileset: { rightMenus: ['edit', 'del'] },
|
||||
path: { rightMenus: ['edit', 'del'] },
|
||||
};
|
||||
/**
|
||||
* 添加节点
|
||||
* @param treeObj
|
||||
* @param parentNode 指定的父节点，如果增加根节点，请设置 parentNode 为 null 即可。
|
||||
* @param newNodes 需要增加的节点数据 JSON 对象集合，
|
||||
* @param isSilent设定增加节点后是否自动展开父节点。 isSilent = true 时，不展开父节点
|
||||
* @returns {*} 返回值是 zTree 最终添加的节点数据集合
|
||||
*/
|
||||
const cusAddNodes = (treeObj: any, parentNodeId: any, newNodes: any, isSilent?: any) => {
|
||||
for (let i = 0; i < newNodes.length; i++) {
|
||||
if (newNodes[i].sourceType != 'directory') {
|
||||
newNodes[i].icon = cusNodeIcon(newNodes[i]);
|
||||
window['YJ'].Global.splitScreen.setActiveId([newNodes[i].id]);
|
||||
}
|
||||
}
|
||||
let parentNode = null;
|
||||
if (Object.prototype.toString.call(parentNodeId) === '[object Object]') parentNode = parentNodeId;
|
||||
else {
|
||||
parentNode = treeObj.getNodeByParam('id', parentNodeId, null);
|
||||
}
|
||||
const arr = treeObj.addNodes(parentNode, newNodes, isSilent);
|
||||
treeObj.selectNode(arr[arr.length - 1]);
|
||||
// 确保window.AllNodes存在并为数组
|
||||
window['AllNodes'] = (window['AllNodes'] || []).concat(arr);
|
||||
return arr;
|
||||
};
|
||||
/**
|
||||
* 设置node节点的icon
|
||||
* @param type
|
||||
* @returns {string}
|
||||
*/
|
||||
const cusNodeIcon = (node) => {
|
||||
const type = node.sourceType || node.type;
|
||||
console.log('----------', type);
|
||||
let name = ['GDSLImagery', 'GDLWImagery', 'ArcgisBLUEImagery', 'ArcgisWXImagery'].includes(type) ? 'layer' : type;
|
||||
if (type == 'Terrain') name = 'terrain';
|
||||
if (type == 'road' && node.detail.imageType == 'arrowRoad') name = 'lineDrawing';
|
||||
|
||||
return type === 'directory' ? undefined : '/assets/icon/' + type + '.png';
|
||||
};
|
||||
/**
|
||||
* 删除节点
|
||||
* @param treeObj
|
||||
* @param nodes
|
||||
* @returns {*}
|
||||
*/
|
||||
const cusRemoveNode = (treeObj: any, nodes: any) => {
|
||||
let allNodes = []
|
||||
let _idSet = new Set()
|
||||
nodes.forEach((node: any) => {
|
||||
allNodes = allNodes.concat(treeObj.transformToArray(node))
|
||||
})
|
||||
allNodes.forEach((node: any) => {
|
||||
_idSet.add(node.id)
|
||||
treeObj.removeNode(node)
|
||||
})
|
||||
window['YJ'].Global.splitScreen.setActiveId();
|
||||
window['AllNodes'] = treeObj.getNodes()
|
||||
return Array.from(_idSet)
|
||||
}
|
||||
/**
|
||||
* 单独选中指定节点
|
||||
* @param treeObj
|
||||
* @param node
|
||||
*/
|
||||
const cusSelectNode = (treeObj: any, node: any) => {
|
||||
if (node) treeObj.selectNode(node);
|
||||
else treeObj.cancelSelectedNode();
|
||||
};
|
||||
/**
|
||||
* 获取选中节点(数组)
|
||||
* @returns {*}
|
||||
*/
|
||||
const getSelectedNodes = (treeObj: any) => {
|
||||
const nodes = treeObj.getSelectedNodes();
|
||||
return nodes;
|
||||
};
|
||||
function cusUpdateNode({ id, sourceName, params }) {
|
||||
const node = window['treeObj'].getNodeByParam('id', id, null);
|
||||
node.sourceName = sourceName;
|
||||
node.oldname = sourceName;
|
||||
node.params = params;
|
||||
window['treeObj'].updateNode(node);
|
||||
}
|
||||
|
||||
return {
|
||||
cusNodeIcon,
|
||||
cusAddNodes,
|
||||
getSelectedNodes,
|
||||
cusSelectNode,
|
||||
cusUpdateNode,
|
||||
cusRemoveNode,
|
||||
nodeType,
|
||||
// getKeyOfSelectedNode,
|
||||
// getSelectedNode,
|
||||
// showRightMenu,
|
||||
// getSameLevel,
|
||||
// findParentId,
|
||||
// findTreeIndex
|
||||
};
|
||||
};
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="large-screen">
|
||||
<Header />
|
||||
<Header :isFull="isFull" @changePage="handleChangePage"/>
|
||||
<div class="nav">
|
||||
<div class="nav_left">
|
||||
<div class="nav_left" v-if="isHideOther">
|
||||
<leftPage />
|
||||
</div>
|
||||
<div class="nav_center">
|
||||
<centerPage />
|
||||
<centerPage :isFull="isFull" />
|
||||
</div>
|
||||
<div class="nav_right">
|
||||
<div class="nav_right" v-if="isHideOther">
|
||||
<rightPage />
|
||||
</div>
|
||||
</div>
|
||||
@ -21,6 +21,23 @@ import leftPage from './components/leftPage.vue';
|
||||
import centerPage from './components/centerPage.vue';
|
||||
import rightPage from './components/rightPage.vue';
|
||||
import '@/assets/styles/element.scss';
|
||||
const isFull = ref(true); //false
|
||||
const isHideOther = ref(true); //false
|
||||
/**
|
||||
* 切换中心页面全屏
|
||||
*/
|
||||
const handleChangePage = () => {
|
||||
if (isFull.value) {
|
||||
isFull.value = false;
|
||||
setTimeout(() => {
|
||||
isHideOther.value = false;
|
||||
}, 100);
|
||||
} else {
|
||||
isFull.value = true;
|
||||
isHideOther.value = true;
|
||||
}
|
||||
console.log(isFull.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -36,8 +53,16 @@ import '@/assets/styles/element.scss';
|
||||
height: calc(100vh - 80px);
|
||||
box-sizing: border-box;
|
||||
// padding: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 1fr;
|
||||
display: flex;
|
||||
color: #fff;
|
||||
.nav_left {
|
||||
flex: 1;
|
||||
}
|
||||
.nav_center {
|
||||
flex: 2;
|
||||
}
|
||||
.nav_right {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -19,9 +19,29 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
lineData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
days: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
|
||||
rukuCounnts: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
|
||||
chukuCounnts: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90]
|
||||
})
|
||||
},
|
||||
barData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
shebeiTypes: ['光伏组件', '逆变器', '汇流箱', '支架', '电缆'],
|
||||
rukuCount: [5, 40, 20, 75, 60],
|
||||
chukuCount: [30, 40, 30, 30, 30]
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// 图表容器引用
|
||||
const lineChartRef = ref(null);
|
||||
const barChartRef = ref(null);
|
||||
@ -30,6 +50,53 @@ const barChartRef = ref(null);
|
||||
let lineChart = null;
|
||||
let barChart = null;
|
||||
|
||||
// 计算属性：处理传入的lineData，确保数据有效
|
||||
const processedLineData = computed(() => {
|
||||
// 检查传入的数据是否有效
|
||||
if (!props.lineData ||
|
||||
!props.lineData.days ||
|
||||
props.lineData.days.length === 0 ||
|
||||
!Array.isArray(props.lineData.rukuCounnts) ||
|
||||
!Array.isArray(props.lineData.chukuCounnts)) {
|
||||
return {
|
||||
days: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
|
||||
rukuCounnts: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
|
||||
chukuCounnts: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90]
|
||||
};
|
||||
}
|
||||
|
||||
// 检查rukuCounnts和chukuCounnts是否全为0
|
||||
const isRukuAllZero = props.lineData.rukuCounnts.every(item => item === 0);
|
||||
const isChukuAllZero = props.lineData.chukuCounnts.every(item => item === 0);
|
||||
|
||||
if (isRukuAllZero && isChukuAllZero) {
|
||||
return {
|
||||
days: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
|
||||
rukuCounnts: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
|
||||
chukuCounnts: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90]
|
||||
};
|
||||
}
|
||||
|
||||
return props.lineData;
|
||||
});
|
||||
|
||||
// 计算属性：处理传入的barData，确保数据有效
|
||||
const processedBarData = computed(() => {
|
||||
// 检查传入的数据是否有效
|
||||
if (!props.barData ||
|
||||
!props.barData.shebeiTypes ||
|
||||
props.barData.shebeiTypes.length === 0 ||
|
||||
!Array.isArray(props.barData.rukuCount) ||
|
||||
!Array.isArray(props.barData.chukuCount)) {
|
||||
return {
|
||||
shebeiTypes: ['光伏组件', '逆变器', '汇流箱', '支架', '电缆'],
|
||||
rukuCount: [5, 40, 20, 75, 60],
|
||||
chukuCount: [30, 40, 30, 30, 30]
|
||||
};
|
||||
}
|
||||
return props.barData;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// 初始化折线图
|
||||
initLineChart();
|
||||
@ -77,7 +144,7 @@ const initLineChart = () => {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
|
||||
data: processedLineData.value.days
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
@ -86,7 +153,7 @@ const initLineChart = () => {
|
||||
{
|
||||
name: '入库数量',
|
||||
type: 'line',
|
||||
data: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
|
||||
data: processedLineData.value.rukuCounnts,
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
@ -105,7 +172,7 @@ const initLineChart = () => {
|
||||
{
|
||||
name: '出库数量',
|
||||
type: 'line',
|
||||
data: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90],
|
||||
data: processedLineData.value.chukuCounnts,
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
@ -155,7 +222,7 @@ const initBarChart = () => {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['电器部件', '机械部件', '电子元件', '控制模块', '结构部件', '其他'],
|
||||
data: processedBarData.value.shebeiTypes,
|
||||
axisLabel: {
|
||||
interval: 0, // 强制显示所有标签
|
||||
rotate: 30, // 标签旋转30度
|
||||
@ -171,7 +238,7 @@ const initBarChart = () => {
|
||||
{
|
||||
name: '入库数量',
|
||||
type: 'bar',
|
||||
data: [650, 480, 510, 280, 650, 220],
|
||||
data: processedBarData.value.rukuCount,
|
||||
itemStyle: {
|
||||
color: 'rgba(22, 93, 255, 1)' // 入库数量颜色
|
||||
},
|
||||
@ -182,7 +249,7 @@ const initBarChart = () => {
|
||||
{
|
||||
name: '出库数量',
|
||||
type: 'bar',
|
||||
data: [850, 400, 770, 590, 540, 310],
|
||||
data: processedBarData.value.chukuCount,
|
||||
itemStyle: {
|
||||
color: 'rgba(15, 198, 194, 1)' // 出库数量颜色
|
||||
},
|
||||
@ -205,6 +272,12 @@ const handleResize = () => {
|
||||
barChart.resize();
|
||||
}
|
||||
};
|
||||
|
||||
// 监听数据变化，更新图表
|
||||
watch([() => props.lineData, () => props.barData], () => {
|
||||
initLineChart();
|
||||
initBarChart();
|
||||
}, { deep: true });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -1,84 +1,37 @@
|
||||
<template>
|
||||
<div class="approval-form">
|
||||
<!-- 基础信息 -->
|
||||
<el-card class="card" shadow="hover">
|
||||
<template #header>
|
||||
<h3>基础信息</h3>
|
||||
</template>
|
||||
<el-form :model="detailInfo" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="采购单号">
|
||||
<el-input v-model="detailInfo.id" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="创建时间">
|
||||
<el-input v-model="detailInfo.createTime" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="经办人">
|
||||
<el-input v-model="detailInfo.jingbanrenName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属部门">
|
||||
<el-select v-model="detailInfo.caigouDanweiName" placeholder="请选择">
|
||||
<el-option label="运维部" value="运维部" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="采购类型">
|
||||
<el-select v-model="detailInfo.caigouType" placeholder="请选择">
|
||||
<el-option label="项目业务" value="项目业务" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="申请原因">
|
||||
<el-input v-model="basicInfo.applyReason" type="textarea" :rows="2" placeholder="请输入申请原因" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-card class="card" shadow="hover" style="margin-top: 20px">
|
||||
<el-descriptions title="基础信息" direction="vertical" :column="3" border size="large" class="infoClass">
|
||||
<el-descriptions-item label="采购单编号">{{ props.detailInfo.id }}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">{{ props.detailInfo.createTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经办人">{{ props.detailInfo.jingbanrenName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属部门">{{ props.detailInfo.caigouDanweiName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="采购类型">{{ getTagLabel(wz_purchase_type, props.detailInfo.caigouType)
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="申请原因">{{ props.detailInfo.reason }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
|
||||
<!-- 供应商信息 -->
|
||||
<el-card class="card" shadow="hover" style="margin-top: 20px">
|
||||
<template #header>
|
||||
<h3>供应商信息</h3>
|
||||
</template>
|
||||
<el-form :model="detailInfo" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商单位">
|
||||
<el-select v-model="detailInfo.gonyingshangId" placeholder="请选择">
|
||||
<el-option label="AAAA精密仪器制造有限公司" value="AAAA精密仪器制造有限公司" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="出货时间">
|
||||
<el-select v-model="detailInfo.chouhuoTime" placeholder="请选择">
|
||||
<el-option label="2年零4个月" value="2年零4个月" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-descriptions title="供应商信息" direction="vertical" :column="2" border size="large">
|
||||
<el-descriptions-item label="供应商单位">{{ props.detailInfo.gonyingshangName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="出货时间">{{ props.detailInfo.chuhuoTime }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
|
||||
<!-- 产品信息 -->
|
||||
<el-card class="card" shadow="hover" style="margin-top: 20px">
|
||||
<template #header>
|
||||
<h3>产品信息</h3>
|
||||
</template>
|
||||
<el-table :data="detailInfo.opsCaigouPlanChanpinVos" border style="width: 100%">
|
||||
<div slot="header" class="infoTitle">产品信息</div>
|
||||
<el-table :data="props.detailInfo.opsCaigouPlanChanpinVos || []" border style="width: 100%">
|
||||
<el-table-column prop="chanpinName" label="产品名称" />
|
||||
<el-table-column prop="chanpinType" label="产品型号" />
|
||||
<el-table-column prop="chanpinMonovalent" label="产品单价" align="center" :cell-style="{ background: 'pink' }" />
|
||||
<el-table-column prop="shebeiType" label="设备类型">
|
||||
<template #default="scope">
|
||||
{{ getTagLabel(wz_device_type, scope.row.shebeiType) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="chanpinMonovalent" label="产品单价" align="center"
|
||||
:cell-style="{ background: 'pink' }" />
|
||||
<el-table-column prop="goumaiNumber" label="购买数量" align="center" :cell-style="{ background: 'pink' }" />
|
||||
<el-table-column prop="yontu" label="用途" />
|
||||
<el-table-column prop="totalPrice" label="合计" />
|
||||
@ -87,163 +40,89 @@
|
||||
|
||||
<!-- 合同条款 -->
|
||||
<el-card class="card" shadow="hover" style="margin-top: 20px">
|
||||
<template #header>
|
||||
<h3>合同条款</h3>
|
||||
</template>
|
||||
<el-form :model="contractInfo" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="付款条件">
|
||||
<el-select v-model="detailInfo.fukuantiaojian" placeholder="请选择">
|
||||
<el-option label="银行卡" value="银行卡" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发票开具方式">
|
||||
<el-select v-model="detailInfo.fapiaoKjfs" placeholder="请选择">
|
||||
<el-option label="请选择" value="请选择" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-descriptions title="合同条款" direction="vertical" :column="3" border size="large">
|
||||
<el-descriptions-item label="付款条件">{{ getTagLabel(wz_payment_terms, props.detailInfo.fukuantiaojian)
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="发票开具方式">{{ getTagLabel(wz_invoicing_way, props.detailInfo.fapiaoKjfs)
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="合同类型">{{
|
||||
getTagLabel(wz_contract_type, props.detailInfo.hetonType) }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
|
||||
<!-- 附件 -->
|
||||
<el-card class="card" shadow="hover" style="margin-top: 20px">
|
||||
<template #header>
|
||||
<h3>附件</h3>
|
||||
</template>
|
||||
<el-upload class="upload-demo" action="#" :file-list="fileList" :auto-upload="false"
|
||||
:on-preview="handlePreview">
|
||||
<el-table :data="fileList" border style="width: 100%">
|
||||
<el-table-column prop="name" label="文件名" width="300" />
|
||||
<el-table-column prop="size" label="大小" width="100" />
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="scope">
|
||||
<!-- <el-link type="primary" @click="handlePreview(scope.row)"> -->
|
||||
<el-link type="primary">
|
||||
预览
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-upload>
|
||||
<div slot="header" class="infoTitle">附件</div>
|
||||
|
||||
<el-table :data="props.detailInfo.opsCaigouPlanFilesVos || []" border>
|
||||
<el-table-column prop="fileName" label="文件名" width="300" />
|
||||
<el-table-column label="文件类型" width="200">
|
||||
<template #default="scope">
|
||||
{{ getFileType(scope.row.fileName) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<el-link type="primary" @click="handlePreview(scope.row)">
|
||||
预览
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, getCurrentInstance, toRefs } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { ref, computed, onMounted, getCurrentInstance, toRefs } from 'vue';
|
||||
import { defineProps } from 'vue';
|
||||
import type { ComponentInternalInstance } from 'vue';
|
||||
const route = useRoute();
|
||||
import type { CaigouPlanVO } from '@/api/wuziguanli/caigouPlan/types';
|
||||
|
||||
// 定义props
|
||||
const props = defineProps<{
|
||||
detailInfo: CaigouPlanVO
|
||||
}>();
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { wz_invoicing_way, wz_payment_terms, wz_purchase_type, wz_contract_type, wz_caigou_examine } = toRefs<any>(proxy?.useDict('wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine'));
|
||||
const { wz_invoicing_way, wz_payment_terms, wz_purchase_type, wz_contract_type, wz_device_type } = toRefs<any>(proxy?.useDict('wz_device_type','wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine', 'wz_device_type'));
|
||||
|
||||
import { caigouPlanDetail } from '@/api/wuziguanli/caigouPlan';
|
||||
import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/caigouPlan/types';
|
||||
|
||||
// 存储计划详情数据
|
||||
const detailInfo = ref<CaigouPlanVO>({} as CaigouPlanVO);
|
||||
|
||||
// 存储计划编号
|
||||
const id = ref('');
|
||||
|
||||
const getDetailInfo = async () => {
|
||||
const res = await caigouPlanDetail(id.value);
|
||||
if (res.code === 200) {
|
||||
detailInfo.value = res.data;
|
||||
console.log(detailInfo.value);
|
||||
|
||||
}
|
||||
// 根据字典数组和值获取标签文本
|
||||
const getTagLabel = (dictArray: any[], value: any): string => {
|
||||
if (!dictArray || !value) return '';
|
||||
const item = dictArray.find(item => item.value === value);
|
||||
return item?.label || value;
|
||||
}
|
||||
onMounted(() => {
|
||||
// 接收路由参数
|
||||
id.value = route.query.id as string;
|
||||
getDetailInfo();
|
||||
|
||||
|
||||
|
||||
});
|
||||
// 基础信息数据
|
||||
const basicInfo = ref({
|
||||
orderNo: '0035455',
|
||||
createTime: '2023-11-02 16:32',
|
||||
handler: '李四',
|
||||
dept: '运维部',
|
||||
purchaseType: '项目业务',
|
||||
applyReason:
|
||||
'随着业务拓展，光伏电站业务负责增加，现有设备已运行5年，部分出现效率下降情况。为保证电站正常运行，计划采购一批新的逆变器替换老旧设备，并补充备件库存。',
|
||||
});
|
||||
|
||||
// 供应商信息数据
|
||||
const supplierInfo = ref({
|
||||
supplierName: 'AAAA精密仪器制造有限公司',
|
||||
deliveryTime: '2年零4个月',
|
||||
remark: '',
|
||||
});
|
||||
|
||||
// 产品信息数据
|
||||
const productInfo = ref({
|
||||
tableData: [
|
||||
{
|
||||
productName: 'AAABBBCCC',
|
||||
productModel: '15-42',
|
||||
productPrice: 500,
|
||||
buyQuantity: 10,
|
||||
usage: '组件',
|
||||
total: 5000,
|
||||
},
|
||||
],
|
||||
remark: '',
|
||||
});
|
||||
|
||||
// 合同条款数据
|
||||
const contractInfo = ref({
|
||||
paymentCondition: '银行卡',
|
||||
invoiceWay: '请选择',
|
||||
remark: '',
|
||||
});
|
||||
|
||||
// 附件数据
|
||||
const fileList = ref([
|
||||
{
|
||||
name: 'MWwwwww.jpg',
|
||||
size: '30kb',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
name: '231234124w.zip',
|
||||
size: '50kb',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
name: '12451asdas.doc',
|
||||
size: '80kb',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
name: '21seasda.xls',
|
||||
size: '29kb',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
name: '12kjaklskw.png',
|
||||
size: '16kb',
|
||||
url: '',
|
||||
},
|
||||
]);
|
||||
// 获取文件类型（后缀名）
|
||||
const getFileType = (fileName: string): string => {
|
||||
if (!fileName) return '';
|
||||
const lastDotIndex = fileName.lastIndexOf('.');
|
||||
if (lastDotIndex === -1) return '';
|
||||
return fileName.substring(lastDotIndex + 1).toLowerCase();
|
||||
};
|
||||
|
||||
// 预览文件
|
||||
const handlePreview = (file) => {
|
||||
console.log('预览文件：', file);
|
||||
// 实际场景可在这里处理文件预览逻辑，如打开新窗口等
|
||||
window.open(file.fileUrl, '_blank');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.infoTitle {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.approval-form {
|
||||
padding: 20px;
|
||||
}
|
||||
@ -258,7 +137,7 @@ const handlePreview = (file) => {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
::v-deep(.el-input__inner) {
|
||||
:v-deep(.el-input__inner) {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@ -1,261 +0,0 @@
|
||||
<template>
|
||||
<div class="approval-form">
|
||||
<!-- 基础信息 -->
|
||||
<el-card class="card" shadow="hover">
|
||||
<template #header>
|
||||
<h3>基础信息</h3>
|
||||
</template>
|
||||
<el-form :model="basicInfo" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="订单编号">
|
||||
<el-input v-model="basicInfo.orderNo" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="创建时间">
|
||||
<el-input v-model="basicInfo.createTime" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="经办人">
|
||||
<el-input v-model="basicInfo.handler" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属部门">
|
||||
<el-select v-model="basicInfo.dept" placeholder="请选择">
|
||||
<el-option label="运维部" value="运维部" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="采购类型">
|
||||
<el-select v-model="basicInfo.purchaseType" placeholder="请选择">
|
||||
<el-option label="项目业务" value="项目业务" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="申请原因">
|
||||
<el-input v-model="basicInfo.applyReason" type="textarea" :rows="2" placeholder="请输入申请原因" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 供应商信息 -->
|
||||
<el-card class="card" shadow="hover" style="margin-top: 20px">
|
||||
<template #header>
|
||||
<h3>供应商信息</h3>
|
||||
</template>
|
||||
<el-form :model="supplierInfo" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商单位">
|
||||
<el-select v-model="supplierInfo.supplierName" placeholder="请选择">
|
||||
<el-option label="AAAA精密仪器制造有限公司" value="AAAA精密仪器制造有限公司" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="出货时间">
|
||||
<el-select v-model="supplierInfo.deliveryTime" placeholder="请选择">
|
||||
<el-option label="2年零4个月" value="2年零4个月" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 产品信息 -->
|
||||
<el-card class="card" shadow="hover" style="margin-top: 20px">
|
||||
<template #header>
|
||||
<h3>产品信息</h3>
|
||||
</template>
|
||||
<el-table :data="productInfo.tableData" border style="width: 100%">
|
||||
<el-table-column prop="productName" label="产品名称" />
|
||||
<el-table-column prop="productModel" label="产品型号" />
|
||||
<el-table-column prop="productPrice" label="产品单价" align="center" :cell-style="{ background: 'pink' }" />
|
||||
<el-table-column prop="buyQuantity" label="购买数量" align="center" :cell-style="{ background: 'pink' }" />
|
||||
<el-table-column prop="usage" label="用途" />
|
||||
<el-table-column prop="total" label="合计" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<!-- 合同条款 -->
|
||||
<el-card class="card" shadow="hover" style="margin-top: 20px">
|
||||
<template #header>
|
||||
<h3>合同条款</h3>
|
||||
</template>
|
||||
<el-form :model="contractInfo" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="付款条件">
|
||||
<el-select v-model="contractInfo.paymentCondition" placeholder="请选择">
|
||||
<el-option label="银行卡" value="银行卡" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发票开具方式">
|
||||
<el-select v-model="contractInfo.invoiceWay" placeholder="请选择">
|
||||
<el-option label="请选择" value="请选择" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 附件 -->
|
||||
<el-card class="card" shadow="hover" style="margin-top: 20px">
|
||||
<template #header>
|
||||
<h3>附件</h3>
|
||||
</template>
|
||||
<el-upload class="upload-demo" action="#" :file-list="fileList" :auto-upload="false"
|
||||
:on-preview="handlePreview">
|
||||
<el-table :data="fileList" border style="width: 100%">
|
||||
<el-table-column prop="name" label="文件名" width="300" />
|
||||
<el-table-column prop="size" label="大小" width="100" />
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="scope">
|
||||
<!-- <el-link type="primary" @click="handlePreview(scope.row)"> -->
|
||||
<el-link type="primary">
|
||||
预览
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-upload>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, getCurrentInstance, toRefs } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import type { ComponentInternalInstance } from 'vue';
|
||||
const route = useRoute();
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { wz_invoicing_way, wz_payment_terms, wz_purchase_type, wz_contract_type, wz_caigou_examine } = toRefs<any>(proxy?.useDict('wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine'));
|
||||
|
||||
import { caigouPlanDetail } from '@/api/wuziguanli/caigouPlan';
|
||||
import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/caigouPlan/types';
|
||||
|
||||
|
||||
// 存储计划编号
|
||||
const id = ref('');
|
||||
|
||||
const getDetailInfo = async () => {
|
||||
const res = await caigouPlanDetail(id.value);
|
||||
if (res.code === 200) {
|
||||
console.log(res);
|
||||
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
// 接收路由参数
|
||||
id.value = route.query.id as string;
|
||||
getDetailInfo();
|
||||
|
||||
|
||||
|
||||
});
|
||||
// 基础信息数据
|
||||
const basicInfo = ref({
|
||||
orderNo: '0035455',
|
||||
createTime: '2023-11-02 16:32',
|
||||
handler: '李四',
|
||||
dept: '运维部',
|
||||
purchaseType: '项目业务',
|
||||
applyReason:
|
||||
'随着业务拓展，光伏电站业务负责增加，现有设备已运行5年，部分出现效率下降情况。为保证电站正常运行，计划采购一批新的逆变器替换老旧设备，并补充备件库存。',
|
||||
});
|
||||
|
||||
// 供应商信息数据
|
||||
const supplierInfo = ref({
|
||||
supplierName: 'AAAA精密仪器制造有限公司',
|
||||
deliveryTime: '2年零4个月',
|
||||
remark: '',
|
||||
});
|
||||
|
||||
// 产品信息数据
|
||||
const productInfo = ref({
|
||||
tableData: [
|
||||
{
|
||||
productName: 'AAABBBCCC',
|
||||
productModel: '15-42',
|
||||
productPrice: 500,
|
||||
buyQuantity: 10,
|
||||
usage: '组件',
|
||||
total: 5000,
|
||||
},
|
||||
],
|
||||
remark: '',
|
||||
});
|
||||
|
||||
// 合同条款数据
|
||||
const contractInfo = ref({
|
||||
paymentCondition: '银行卡',
|
||||
invoiceWay: '请选择',
|
||||
remark: '',
|
||||
});
|
||||
|
||||
// 附件数据
|
||||
const fileList = ref([
|
||||
{
|
||||
name: 'MWwwwww.jpg',
|
||||
size: '30kb',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
name: '231234124w.zip',
|
||||
size: '50kb',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
name: '12451asdas.doc',
|
||||
size: '80kb',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
name: '21seasda.xls',
|
||||
size: '29kb',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
name: '12kjaklskw.png',
|
||||
size: '16kb',
|
||||
url: '',
|
||||
},
|
||||
]);
|
||||
|
||||
// 预览文件
|
||||
const handlePreview = (file) => {
|
||||
console.log('预览文件：', file);
|
||||
// 实际场景可在这里处理文件预览逻辑，如打开新窗口等
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.approval-form {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.error-tip {
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
::v-deep(.el-input__inner) {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
278
src/views/materialManagement/components/upload.vue
Normal file
278
src/views/materialManagement/components/upload.vue
Normal file
@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<div class="upload-file">
|
||||
<!-- 文件列表 -->
|
||||
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
|
||||
<li v-for="(file, index) in fileList" :key="file.uid" class="el-upload-list__item ele-upload-list__item-content">
|
||||
<el-link :href="`${file.url}`" :underline="false" target="_blank">
|
||||
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
|
||||
</el-link>
|
||||
<div class="ele-upload-list__item-content-action">
|
||||
<el-button type="danger" v-if="!disabled" link @click="handleDelete(index)">删除</el-button>
|
||||
</div>
|
||||
</li>
|
||||
</transition-group>
|
||||
<el-upload
|
||||
ref="fileUploadRef"
|
||||
multiple
|
||||
:drag="isDrag"
|
||||
:action="uploadFileUrl"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:file-list="fileList"
|
||||
:limit="limit"
|
||||
:accept="fileAccept"
|
||||
:on-error="handleUploadError"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="handleUploadSuccess"
|
||||
:show-file-list="false"
|
||||
:headers="headers"
|
||||
class="upload-file-uploader"
|
||||
v-if="!disabled"
|
||||
>
|
||||
<!-- 上传按钮 -->
|
||||
<el-button type="primary" v-if="!isDrag">选取文件</el-button>
|
||||
<div v-else>
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">
|
||||
拖拽文件到此处，或 <em>点击上传</em>
|
||||
</div>
|
||||
</div>
|
||||
</el-upload>
|
||||
<!-- 上传提示 -->
|
||||
<div v-if="showTip && !disabled" class="el-upload__tip">
|
||||
请上传
|
||||
<template v-if="fileSize">
|
||||
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
|
||||
</template>
|
||||
<template v-if="fileType">
|
||||
格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
|
||||
</template>
|
||||
的文件
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { propTypes } from '@/utils/propTypes';
|
||||
import { delOss, listByIds } from '@/api/system/oss';
|
||||
import { globalHeaders } from '@/utils/request';
|
||||
import { ref } from 'vue';
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: [String, Object, Array],
|
||||
default: () => []
|
||||
},
|
||||
// 数量限制
|
||||
limit: propTypes.number.def(5),
|
||||
// 大小限制(MB)
|
||||
fileSize: propTypes.number.def(5),
|
||||
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||||
fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf']),
|
||||
// 是否显示提示
|
||||
isShowTip: propTypes.bool.def(true),
|
||||
// 禁用组件（仅查看文件）
|
||||
disabled: propTypes.bool.def(false),
|
||||
// 是否开启拖拽上传
|
||||
isDrag: propTypes.bool.def(false)
|
||||
});
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const emit = defineEmits(['update:modelValue', 'update:fileList']);
|
||||
const number = ref(0);
|
||||
const uploadList = ref<any[]>([]);
|
||||
|
||||
const baseUrl = import.meta.env.VITE_APP_BASE_API;
|
||||
const uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上传文件服务器地址
|
||||
const headers = ref(globalHeaders());
|
||||
|
||||
const fileList = ref<any[]>([]);
|
||||
const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize));
|
||||
|
||||
const fileUploadRef = ref<ElUploadInstance>();
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
// 清空所有文件
|
||||
clearAllFiles: () => {
|
||||
fileList.value = [];
|
||||
emit('update:modelValue', '');
|
||||
emit('update:fileList', []);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 监听 fileType 变化，更新 fileAccept
|
||||
const fileAccept = computed(() => props.fileType.map((type) => `.${type}`).join(','));
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
async (val) => {
|
||||
if (val) {
|
||||
let temp = 1;
|
||||
// 首先将值转为数组
|
||||
let list: any[] = [];
|
||||
|
||||
if (Array.isArray(val)) {
|
||||
// 如果是数组，检查第一个元素的格式
|
||||
if (val.length > 0 && val[0].fileName && val[0].fileId && val[0].fileUrl) {
|
||||
// 处理后端返回的格式 [{fileName,fileId,fileUrl}]
|
||||
list = val.map(item => ({
|
||||
name: item.fileName,
|
||||
url: item.fileUrl,
|
||||
ossId: item.fileId
|
||||
}));
|
||||
} else {
|
||||
// 处理组件内部格式 [{name,url,ossId}]
|
||||
list = val;
|
||||
}
|
||||
} else {
|
||||
// 处理字符串格式（逗号分隔的ossId）
|
||||
const res = await listByIds(val);
|
||||
list = res.data.map((oss) => {
|
||||
return { name: oss.originalName, url: oss.url, ossId: oss.ossId };
|
||||
});
|
||||
}
|
||||
|
||||
// 然后将数组转为对象数组
|
||||
fileList.value = list.map((item) => {
|
||||
item = { name: item.name, url: item.url, ossId: item.ossId };
|
||||
item.uid = item.uid || new Date().getTime() + temp++;
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
fileList.value = [];
|
||||
return [];
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
// 上传前校检格式和大小
|
||||
const handleBeforeUpload = (file: any) => {
|
||||
// 校检文件类型
|
||||
if (props.fileType.length) {
|
||||
const fileName = file.name.split('.');
|
||||
const fileExt = fileName[fileName.length - 1];
|
||||
const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
|
||||
if (!isTypeOk) {
|
||||
proxy?.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join('/')}格式文件!`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// 校检文件名是否包含特殊字符
|
||||
if (file.name.includes(',')) {
|
||||
proxy?.$modal.msgError('文件名不正确，不能包含英文逗号!');
|
||||
return false;
|
||||
}
|
||||
// 校检文件大小
|
||||
if (props.fileSize) {
|
||||
const isLt = file.size / 1024 / 1024 < props.fileSize;
|
||||
if (!isLt) {
|
||||
proxy?.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
proxy?.$modal.loading('正在上传文件，请稍候...');
|
||||
number.value++;
|
||||
return true;
|
||||
};
|
||||
|
||||
// 文件个数超出
|
||||
const handleExceed = () => {
|
||||
proxy?.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
|
||||
};
|
||||
|
||||
// 上传失败
|
||||
const handleUploadError = () => {
|
||||
proxy?.$modal.msgError('上传文件失败');
|
||||
};
|
||||
|
||||
// 上传成功回调
|
||||
const handleUploadSuccess = (res: any, file: UploadFile) => {
|
||||
if (res.code === 200) {
|
||||
uploadList.value.push({
|
||||
name: res.data.fileName,
|
||||
url: res.data.url,
|
||||
ossId: res.data.ossId
|
||||
});
|
||||
|
||||
uploadedSuccessfully();
|
||||
} else {
|
||||
number.value--;
|
||||
proxy?.$modal.closeLoading();
|
||||
proxy?.$modal.msgError(res.msg);
|
||||
fileUploadRef.value?.handleRemove(file);
|
||||
uploadedSuccessfully();
|
||||
}
|
||||
};
|
||||
|
||||
// 删除文件
|
||||
const handleDelete = (index: number) => {
|
||||
const ossId = fileList.value[index].ossId;
|
||||
delOss(ossId);
|
||||
fileList.value.splice(index, 1);
|
||||
|
||||
// 转换为后端需要的格式 [{fileName,fileId,fileUrl}]
|
||||
const formattedList = fileList.value.map(file => ({
|
||||
fileName: file.name,
|
||||
fileId: file.ossId,
|
||||
fileUrl: file.url
|
||||
}));
|
||||
|
||||
emit('update:modelValue', formattedList);
|
||||
};
|
||||
|
||||
// 上传结束处理
|
||||
const uploadedSuccessfully = () => {
|
||||
if (number.value > 0 && uploadList.value.length === number.value) {
|
||||
fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value);
|
||||
uploadList.value = [];
|
||||
number.value = 0;
|
||||
|
||||
// 转换为后端需要的格式 [{fileName,fileId,fileUrl}]
|
||||
const formattedList = fileList.value.map(file => ({
|
||||
fileName: file.name,
|
||||
fileId: file.ossId,
|
||||
fileUrl: file.url
|
||||
}));
|
||||
|
||||
emit('update:modelValue', formattedList);
|
||||
emit('update:fileList', fileList.value);
|
||||
proxy?.$modal.closeLoading();
|
||||
}
|
||||
};
|
||||
|
||||
// 获取文件名称
|
||||
const getFileName = (name: string) => {
|
||||
// 如果是url那么取最后的名字 如果不是直接返回
|
||||
if (name.lastIndexOf('/') > -1) {
|
||||
return name.slice(name.lastIndexOf('/') + 1);
|
||||
} else {
|
||||
return name;
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.upload-file-uploader {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.upload-file-list .el-upload-list__item {
|
||||
border: 1px solid #e4e7ed;
|
||||
line-height: 2;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.upload-file-list .ele-upload-list__item-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ele-upload-list__item-content-action .el-link {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -8,8 +8,8 @@
|
||||
<div class="top">
|
||||
<div class="title">单据列表</div>
|
||||
<div class="button-actions">
|
||||
<button :class="{ active: type === 'chuku' }" @click="changeType('chuku')">出库单</button>
|
||||
<button :class="{ active: type === 'ruku' }" @click="changeType('ruku')">入库单</button>
|
||||
<button :class="{ active: type === 'chuku' }" @click="changeType('chuku')">出库单</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" style="height: 100%;flex: 1;">
|
||||
@ -23,20 +23,20 @@
|
||||
<el-input v-model="queryParams.danjvNumber" placeholder="请输入单据编号"
|
||||
clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型" prop="shebeiType">
|
||||
<!-- <el-form-item label="设备类型" prop="shebeiType">
|
||||
<el-select v-model="queryParams.shebeiType" placeholder="请选择设备类型"
|
||||
clearable>
|
||||
<el-option v-for="dict in wz_device_type" :key="dict.value"
|
||||
:label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="审核状态" prop="auditStatus">
|
||||
</el-form-item> -->
|
||||
<!-- <el-form-item label="审核状态" prop="auditStatus">
|
||||
<el-select v-model="queryParams.auditStatus" placeholder="请选择审核状态"
|
||||
clearable>
|
||||
<el-option v-for="dict in shenheStatus" :key="dict.value"
|
||||
:label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="开始日期" prop="startDate">
|
||||
<el-date-picker v-model="queryParams.startDate" type="date"
|
||||
placeholder="请选择开始日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
|
||||
@ -63,21 +63,17 @@
|
||||
<el-table v-loading="loading" border :data="churukudanList"
|
||||
style="width: 100%;margin-top: 15px;">
|
||||
<el-table-column label="单据编号" align="center" prop="danjvNumber" />
|
||||
<el-table-column label="设备类型" align="center" prop="shebeiType">
|
||||
<template #default="scope">
|
||||
<span>{{ getTagLabel(wz_device_type, scope.row.shebeiType) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="经手人" align="center" prop="jingshourenName" />
|
||||
<el-table-column label="产品名称" align="center" prop="chanpinName"></el-table-column>
|
||||
<el-table-column label="经手人" align="center" prop="jingshourenName" width="80px" />
|
||||
<el-table-column label="操作时间" align="center" prop="updateTime" />
|
||||
<el-table-column label="总数量" align="center" prop="zonNumber" width="80px" />
|
||||
<el-table-column label="审核状态" align="center" prop="shenheStatus">
|
||||
<!-- <el-table-column label="审核状态" align="center" prop="shenheStatus">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getTagType(shenheStatus, scope.row.shenheStatus)" as="span">
|
||||
{{ getTagLabel(shenheStatus, scope.row.shenheStatus) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="单据类型" align="center" prop="danjvType">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getTagType(danjvType, scope.row.danjvType)">
|
||||
@ -87,8 +83,8 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['personnel:churukudan:edit']">修改</el-button>
|
||||
<!-- <el-button link type="primary" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['personnel:churukudan:edit']">修改</el-button> -->
|
||||
<el-button link type="primary" @click="handleDetail(scope.row)"
|
||||
v-hasPermi="['personnel:churukudan:query']">详情</el-button>
|
||||
<el-button link type="primary" @click="handleDelete(scope.row)"
|
||||
@ -118,7 +114,7 @@
|
||||
<div class="item-box">
|
||||
<div class="title">数据分析</div>
|
||||
<div class="content">
|
||||
<DataAnalysis />
|
||||
<DataAnalysis :lineData="lineData" :barData="barData" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@ -133,14 +129,17 @@
|
||||
:value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="单据编号" prop="danjvNumber">
|
||||
<el-input v-model="form.danjvNumber" placeholder="请输入单据编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型" prop="shebeiType">
|
||||
<!-- <el-form-item label="设备类型" prop="shebeiType">
|
||||
<el-select v-model="form.shebeiType" placeholder="请选择设备类型">
|
||||
<el-option v-for="dict in wz_device_type" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="产品名称" prop="chanpinName">
|
||||
<el-select v-model="form.chanpinName" placeholder="请选择产品名称">
|
||||
<el-option v-for="dict in chanpinSelect" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="经手人id" prop="jingshourenId">
|
||||
<el-input v-model="form.jingshourenId" placeholder="请输入经手人id" />
|
||||
@ -152,7 +151,7 @@
|
||||
<el-input v-model="form.contactNumber" placeholder="请输入联系电话" />
|
||||
</el-form-item>
|
||||
<el-form-item label="总数量" prop="zonNumber">
|
||||
<el-input v-model="form.zonNumber" placeholder="请输入总数量" />
|
||||
<el-input v-model="form.zonNumber" placeholder="请输入总数量" type="number" min="0"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
@ -316,7 +315,7 @@
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
::v-deep(.el-card__body) {
|
||||
:v-deep(.el-card__body) {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -325,7 +324,7 @@ import SystemInfo from './components/SystemInfo.vue';
|
||||
import DataAnalysis from './components/DataAnalysis.vue';
|
||||
import { ref, computed } from 'vue';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
import { listChurukudan, getChurukudan, delChurukudan, addChurukudan, updateChurukudan, getChuRuKuCountBar } from '@/api/wuziguanli/churuku/index';
|
||||
import { listChurukudan, getChurukudan, delChurukudan, addChurukudan, updateChurukudan, getChuRuKuCountLine, getChuRuKuDayCountBar, getChanpinLists } from '@/api/wuziguanli/churuku/index';
|
||||
import { ChurukudanVO, ChurukudanQuery, ChurukudanForm } from '@/api/wuziguanli/churuku/types';
|
||||
const { wz_device_type } = toRefs<any>(proxy?.useDict('wz_device_type'));
|
||||
|
||||
@ -342,8 +341,8 @@ const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref<Array<string | number>>([]);
|
||||
const total = ref(0);
|
||||
// 单据类型切换变量 - 默认出库单
|
||||
const type = ref<string>('chuku');
|
||||
// 单据类型切换变量 - 默认入库单
|
||||
const type = ref<string>('ruku');
|
||||
|
||||
/** 切换单据类型 */
|
||||
const changeType = (newType: string) => {
|
||||
@ -427,6 +426,8 @@ const initFormData: ChurukudanForm = {
|
||||
danjvType: undefined,
|
||||
updateTime: undefined,
|
||||
auditStatus: undefined,
|
||||
chanpinName: undefined,
|
||||
chanpinId: undefined,
|
||||
}
|
||||
const data = reactive<PageData<ChurukudanForm, ChurukudanQuery>>({
|
||||
form: { ...initFormData },
|
||||
@ -440,13 +441,18 @@ const data = reactive<PageData<ChurukudanForm, ChurukudanQuery>>({
|
||||
startDate: undefined,
|
||||
endDate: undefined,
|
||||
auditStatus: undefined,
|
||||
danjvType: '1', // 默认显示出库单
|
||||
chanpinName: undefined,
|
||||
chanpinId: undefined,
|
||||
danjvType: '2', // 默认显示入库单
|
||||
params: {
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
shebeiType: [
|
||||
{ required: true, message: "设备类型不能为空", trigger: "change" }
|
||||
// shebeiType: [
|
||||
// { required: true, message: "设备类型不能为空", trigger: "change" }
|
||||
// ],
|
||||
chanpinName: [
|
||||
{ required: true, message: "产品名称不能为空", trigger: "change" }
|
||||
],
|
||||
jingshourenId: [
|
||||
{ required: true, message: "经手人id不能为空", trigger: "blur" }
|
||||
@ -460,10 +466,34 @@ const data = reactive<PageData<ChurukudanForm, ChurukudanQuery>>({
|
||||
danjvType: [
|
||||
{ required: true, message: "单据状态不能为空", trigger: "change" }
|
||||
],
|
||||
// 手机号码格式校验
|
||||
contactNumber: [
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码格式", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
// 查询产品名称列表
|
||||
const chanpinList = ref<any[]>([]);
|
||||
const chanpinSelect = ref<any[]>([]);
|
||||
// 查询产品名称列表
|
||||
const getChanpinList = async () => {
|
||||
try {
|
||||
const res = await getChanpinLists({ projectId: userStore.selectedProject.id });
|
||||
chanpinList.value = res.data || [];
|
||||
chanpinSelect.value = chanpinList.value.map(item => ({
|
||||
label:item.caigouPlanName +'-'+item.chanpinName,
|
||||
value: item.id
|
||||
}));
|
||||
console.log('chanpinSelect.value', chanpinSelect.value);
|
||||
|
||||
} catch (error) {
|
||||
console.error('获取产品名称列表失败:', error);
|
||||
proxy?.$modal.msgError("获取产品名称列表失败，请稍后重试");
|
||||
chanpinList.value = [];
|
||||
}
|
||||
}
|
||||
|
||||
/** 查询运维-物资-出入库单管理列表 */
|
||||
const getList = async () => {
|
||||
@ -526,23 +556,23 @@ const handleAdd = () => {
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: ChurukudanVO) => {
|
||||
reset();
|
||||
const _id = row?.id || ids.value[0];
|
||||
if (!_id) {
|
||||
proxy?.$modal.msgWarning("请选择要修改的数据");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await getChurukudan(_id);
|
||||
Object.assign(form.value, res.data);
|
||||
dialog.visible = true;
|
||||
dialog.title = "修改运维-物资-出入库单管理";
|
||||
} catch (error) {
|
||||
console.error('获取出入库单详情失败:', error);
|
||||
proxy?.$modal.msgError("获取数据失败，请稍后重试");
|
||||
}
|
||||
}
|
||||
// const handleUpdate = async (row?: ChurukudanVO) => {
|
||||
// reset();
|
||||
// const _id = row?.id || ids.value[0];
|
||||
// if (!_id) {
|
||||
// proxy?.$modal.msgWarning("请选择要修改的数据");
|
||||
// return;
|
||||
// }
|
||||
// try {
|
||||
// const res = await getChurukudan(_id);
|
||||
// Object.assign(form.value, res.data);
|
||||
// dialog.visible = true;
|
||||
// dialog.title = "修改运维-物资-出入库单管理";
|
||||
// } catch (error) {
|
||||
// console.error('获取出入库单详情失败:', error);
|
||||
// proxy?.$modal.msgError("获取数据失败，请稍后重试");
|
||||
// }
|
||||
// }
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
@ -550,6 +580,7 @@ const submitForm = () => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
try {
|
||||
form.value.chanpinId = form.value.chanpinName
|
||||
if (form.value.id) {
|
||||
await updateChurukudan(form.value);
|
||||
proxy?.$modal.msgSuccess("修改成功");
|
||||
@ -607,7 +638,29 @@ const handleDelete = async (row?: ChurukudanVO) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 折线图数据获取
|
||||
const lineData = ref<any>();
|
||||
const fetchChuRuKuCountLineData = async () => {
|
||||
if (!queryParams.value.projectId) {
|
||||
return;
|
||||
}
|
||||
let data = {
|
||||
projectId: queryParams.value.projectId,
|
||||
startDate: currentMonthDates[0].fullDate,
|
||||
endDate: currentMonthDates[currentMonthDates.length - 1].fullDate,
|
||||
}
|
||||
try {
|
||||
const res = await getChuRuKuCountLine(data);
|
||||
if (res.code === 200) {
|
||||
lineData.value = res.data;
|
||||
}
|
||||
// 这里可以添加数据处理和图表更新的逻辑
|
||||
} catch (error) {
|
||||
proxy?.$modal.msgError("获取统计数据失败");
|
||||
}
|
||||
}
|
||||
// 柱状图数据获取
|
||||
const barData = ref<any>();
|
||||
const fetchChuRuKuCountBarData = async () => {
|
||||
if (!queryParams.value.projectId) {
|
||||
return;
|
||||
@ -618,16 +671,15 @@ const fetchChuRuKuCountBarData = async () => {
|
||||
endDate: currentMonthDates[currentMonthDates.length - 1].fullDate,
|
||||
}
|
||||
try {
|
||||
const res = await getChuRuKuCountBar(data);
|
||||
console.log(res);
|
||||
const res = await getChuRuKuDayCountBar(data);
|
||||
if (res.code === 200) {
|
||||
barData.value = res.data;
|
||||
}
|
||||
// 这里可以添加数据处理和图表更新的逻辑
|
||||
} catch (error) {
|
||||
console.error('获取柱状图数据失败:', error);
|
||||
// 可以选择是否显示错误提示，根据UI需求决定
|
||||
// proxy?.$modal.msgError("获取统计数据失败");
|
||||
proxy?.$modal.msgError("获取统计数据失败");
|
||||
}
|
||||
}
|
||||
|
||||
// 监听用户选择的项目变化
|
||||
watch(() => userStore.selectedProject, (newProject) => {
|
||||
if (newProject && newProject.id) {
|
||||
@ -638,12 +690,16 @@ watch(() => userStore.selectedProject, (newProject) => {
|
||||
}
|
||||
// 调用getList刷新数据
|
||||
getList();
|
||||
fetchChuRuKuCountLineData();
|
||||
fetchChuRuKuCountBarData();
|
||||
}
|
||||
}, { immediate: true, deep: true });
|
||||
onMounted(() => {
|
||||
getList();
|
||||
fetchChuRuKuCountLineData();
|
||||
fetchChuRuKuCountBarData();
|
||||
// 查询产品名称列表
|
||||
getChanpinList();
|
||||
});
|
||||
|
||||
// 组件卸载时清空projectId
|
||||
|
||||
@ -9,15 +9,15 @@
|
||||
<ArrowLeft />
|
||||
</el-icon>
|
||||
</span>
|
||||
<h2>Q2风电轴承采购计划</h2>
|
||||
<h2>{{ Info.jihuaName }}</h2>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row gutter="10">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="18">
|
||||
<el-card>
|
||||
<detailInfo />
|
||||
<detailInfo :detail-info="Info" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6" style="flex-grow: 1;">
|
||||
@ -46,12 +46,66 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
|
||||
import detailInfo from './components/detailInfo.vue';
|
||||
import DetailsProcess from './components/DetailsProcess.vue';
|
||||
import { ref, onMounted, getCurrentInstance, toRefs, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import type { ComponentInternalInstance } from 'vue';
|
||||
const route = useRoute();
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
import { caigouPlanDetail } from '@/api/wuziguanli/caigouPlan';
|
||||
import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/caigouPlan/types';
|
||||
|
||||
|
||||
// 存储计划详情数据
|
||||
const Info = ref<CaigouPlanVO>({} as CaigouPlanVO);
|
||||
|
||||
// 存储计划编号
|
||||
const id = ref('');
|
||||
|
||||
// 获取详细信息
|
||||
const getDetailInfo = async () => {
|
||||
const res = await caigouPlanDetail(id.value);
|
||||
if (res.code === 200) {
|
||||
Info.value = res.data;
|
||||
console.log(Info.value);
|
||||
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
// 接收路由参数
|
||||
id.value = route.query.id as string || '';
|
||||
console.log('组件挂载时路由参数id:', id.value);
|
||||
// 确保id不为空时才调用接口
|
||||
if (id.value) {
|
||||
getDetailInfo();
|
||||
} else {
|
||||
proxy.$modal.msgError('未获取到详细信息')
|
||||
setTimeout(() => {
|
||||
router.back();
|
||||
}, 800);
|
||||
}
|
||||
});
|
||||
|
||||
// 监听路由参数变化
|
||||
watch(
|
||||
() => route.query.id,
|
||||
(newId) => {
|
||||
id.value = newId as string || '';
|
||||
if (id.value) {
|
||||
getDetailInfo();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
const router = useRouter();
|
||||
const handleBack = () => {
|
||||
router.back();
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@ -214,7 +214,7 @@
|
||||
<dict-tag :options="wz_inventory_type" :value="scope.row.kucunStatus"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button type="text" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['personnel:beipinBeijian:edit']">编辑</el-button>
|
||||
@ -223,7 +223,7 @@
|
||||
<el-button type="text" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['personnel:beipinBeijian:remove']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
<div class="pagination-section">
|
||||
<div class="pagination-info">
|
||||
@ -252,7 +252,7 @@
|
||||
<el-input v-model="form.guigexinghao" placeholder="请输入规格型号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存数量" prop="kucunCount">
|
||||
<el-input v-model="form.kucunCount" placeholder="请输入库存数量" />
|
||||
<el-input v-model="form.kucunCount" placeholder="请输入库存数量" type="number" min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存状态" prop="kucunStatus">
|
||||
<el-select v-model="form.kucunStatus" placeholder="请选择库存状态">
|
||||
@ -260,12 +260,12 @@
|
||||
:value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型" prop="shebeiType">
|
||||
<!-- <el-form-item label="设备类型" prop="shebeiType">
|
||||
<el-select v-model="form.shebeiType" placeholder="请选择设备类型">
|
||||
<el-option v-for="dict in wz_device_type" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
@ -408,7 +408,7 @@ const userStore = useUserStore();
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
import { listBeipinBeijian, getBeipinBeijian, delBeipinBeijian, updateBeipinBeijian } from '@/api/wuziguanli/beijian';
|
||||
import { listBeipinBeijian, getBeipinBeijian, delBeipinBeijian, updateBeipinBeijian,chuRuKuTotal } from '@/api/wuziguanli/beijian';
|
||||
import { BeipinBeijianVO, BeipinBeijianQuery, BeipinBeijianForm } from '@/api/wuziguanli/beijian/types';
|
||||
|
||||
|
||||
@ -502,6 +502,18 @@ const getDictLabel = (dictType, value) => {
|
||||
return option?.label || value;
|
||||
};
|
||||
|
||||
//查询总览
|
||||
const getTotalView= async () => {
|
||||
try {
|
||||
const res = await chuRuKuTotal({projectId: queryParams.value.projectId});
|
||||
console.log(res);
|
||||
|
||||
total.value = res.total;
|
||||
} catch (error) {
|
||||
proxy?.$modal.msgError('获取数据失败，请重试');
|
||||
}
|
||||
}
|
||||
|
||||
/** 查询运维-物资-备品配件列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
@ -511,7 +523,6 @@ const getList = async () => {
|
||||
total.value = res.total;
|
||||
} catch (error) {
|
||||
proxy?.$modal.msgError('获取数据失败，请重试');
|
||||
console.error('获取备品配件列表失败:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
@ -555,7 +566,6 @@ const handleUpdate = async (row?: BeipinBeijianVO) => {
|
||||
dialog.visible = true;
|
||||
} catch (error) {
|
||||
proxy?.$modal.msgError('获取数据失败，请重试');
|
||||
console.error('获取备品配件详情失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
@ -572,7 +582,6 @@ const handleDetail = async (row?: BeipinBeijianVO) => {
|
||||
detailDialogVisible.value = true;
|
||||
} catch (error) {
|
||||
proxy?.$modal.msgError('获取数据失败，请重试');
|
||||
console.error('获取备品配件详情失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
@ -595,7 +604,6 @@ const submitForm = () => {
|
||||
await getList();
|
||||
} catch (error) {
|
||||
proxy?.$modal.msgError('操作失败，请重试');
|
||||
console.error('提交表单失败:', error);
|
||||
} finally {
|
||||
buttonLoading.value = false;
|
||||
}
|
||||
@ -620,7 +628,6 @@ const handleDelete = async (row?: BeipinBeijianVO) => {
|
||||
// 如果是用户取消确认，则不显示错误信息
|
||||
if (error !== 'cancel') {
|
||||
proxy?.$modal.msgError('删除失败，请重试');
|
||||
console.error('删除数据失败:', error);
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
@ -644,6 +651,8 @@ watch(() => userStore.selectedProject, (newProject) => {
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
// 初始化查询总览
|
||||
getTotalView();
|
||||
});
|
||||
|
||||
// 组件卸载时清空projectId
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<el-card style="border-radius: 15px;">
|
||||
<el-row gutter="35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :span="8" class="status-card">
|
||||
<div class="title">设备状态</div>
|
||||
<!-- gutter设置为20，创建左右间隙 -->
|
||||
<el-row gutter="20" style="width: 100%;">
|
||||
<el-row :gutter="20" style="width: 100%;">
|
||||
<!-- 一行2个，每个占12格（24/2=12） -->
|
||||
<el-col :span="12">
|
||||
<div class="item">
|
||||
@ -120,7 +120,7 @@
|
||||
}
|
||||
|
||||
.red {
|
||||
::v-deep::before {
|
||||
:v-deep::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background-color: rgba(227, 39, 39, 1);
|
||||
@ -133,7 +133,7 @@
|
||||
}
|
||||
|
||||
.yellow {
|
||||
::v-deep::before {
|
||||
:v-deep::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background-color: rgba(255, 208, 35, 1);
|
||||
|
||||
@ -132,7 +132,7 @@
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
|
||||
::v-deep::before {
|
||||
:v-deep::before {
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
|
||||
@ -22,17 +22,37 @@
|
||||
</div>
|
||||
|
||||
<!-- 搜索和筛选区 -->
|
||||
<div class="search-filter">
|
||||
<div class="search-container">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索班组名称或编号"
|
||||
class="search-input"
|
||||
suffix-icon="el-icon-search"
|
||||
@keyup.enter="handleSearch"
|
||||
></el-input>
|
||||
<el-button type="primary" class="new-team-btn" @click="handleCreateTeam"> <i class="el-icon-plus"></i> 新增班组 </el-button>
|
||||
<transition :enter-active-class="'el-zoom-in-center'" :leave-active-class="'el-zoom-out-center'">
|
||||
<div v-show="showSearch" class="search-filter">
|
||||
<div class="search-container">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="班组名称" prop="teamName">
|
||||
<el-input v-model="queryParams.teamName" placeholder="请输入班组名称" clearable @keyup.enter="handleQuery"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="负责区域" prop="region">
|
||||
<el-input v-model="queryParams.region" placeholder="请输入负责区域" clearable @keyup.enter="handleQuery"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="组长" prop="leader">
|
||||
<el-input v-model="queryParams.leader" placeholder="请输入组长姓名" clearable @keyup.enter="handleQuery"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="正常运行" value="正常运行"></el-option>
|
||||
<el-option label="人员紧张" value="人员紧张"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px">
|
||||
<el-button type="primary" class="new-team-btn" @click="handleCreateTeam"> <i class="el-icon-plus"></i> 新增班组 </el-button>
|
||||
<right-toolbar v-model:show-search="showSearch" @query-table="handleQuery"></right-toolbar>
|
||||
</div>
|
||||
|
||||
<!-- 班组卡片和图表区域 -->
|
||||
@ -177,13 +197,26 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
import { ref, computed, onMounted, onUnmounted, nextTick, reactive, toRefs } from 'vue';
|
||||
import router from '@/router';
|
||||
import * as echarts from 'echarts'; // 导入ECharts
|
||||
import renwuImage from '@/assets/images/renwu.png';
|
||||
|
||||
// 搜索条件
|
||||
const searchKeyword = ref('');
|
||||
const showSearch = ref(true);
|
||||
const queryFormRef = ref();
|
||||
|
||||
// 搜索参数
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
teamName: '',
|
||||
region: '',
|
||||
leader: '',
|
||||
status: ''
|
||||
}
|
||||
});
|
||||
const { queryParams } = toRefs(data);
|
||||
|
||||
// 班组数据
|
||||
const rawTeamData = ref([
|
||||
@ -251,12 +284,24 @@ const total = ref(rawTeamData.value.length);
|
||||
const filteredTeams = computed(() => {
|
||||
let teams = [...rawTeamData.value];
|
||||
|
||||
if (searchKeyword.value) {
|
||||
const keyword = searchKeyword.value.toLowerCase();
|
||||
teams = teams.filter(
|
||||
(team) =>
|
||||
team.name.toLowerCase().includes(keyword) || team.region.toLowerCase().includes(keyword) || team.leader.toLowerCase().includes(keyword)
|
||||
);
|
||||
// 使用queryParams进行过滤
|
||||
if (queryParams.value.teamName) {
|
||||
const keyword = queryParams.value.teamName.toLowerCase();
|
||||
teams = teams.filter((team) => team.name.toLowerCase().includes(keyword));
|
||||
}
|
||||
|
||||
if (queryParams.value.region) {
|
||||
const keyword = queryParams.value.region.toLowerCase();
|
||||
teams = teams.filter((team) => team.region.toLowerCase().includes(keyword));
|
||||
}
|
||||
|
||||
if (queryParams.value.leader) {
|
||||
const keyword = queryParams.value.leader.toLowerCase();
|
||||
teams = teams.filter((team) => team.leader.toLowerCase().includes(keyword));
|
||||
}
|
||||
|
||||
if (queryParams.value.status) {
|
||||
teams = teams.filter((team) => team.status === queryParams.value.status);
|
||||
}
|
||||
|
||||
return teams;
|
||||
@ -295,6 +340,19 @@ const handleSearch = () => {
|
||||
currentPage.value = 1; // 重置到第一页
|
||||
};
|
||||
|
||||
// 执行搜索
|
||||
const handleQuery = () => {
|
||||
currentPage.value = 1;
|
||||
};
|
||||
|
||||
// 重置搜索
|
||||
const resetQuery = () => {
|
||||
if (queryFormRef.value) {
|
||||
queryFormRef.value.resetFields();
|
||||
}
|
||||
currentPage.value = 1;
|
||||
};
|
||||
|
||||
// 分页事件
|
||||
const handleSizeChange = (val) => {
|
||||
pageSize.value = val;
|
||||
|
||||
@ -23,29 +23,30 @@
|
||||
<div class="filter-bar">
|
||||
<div class="filter-container">
|
||||
<div class="filter-item">
|
||||
<el-select v-model="taskStatus" placeholder="任务状态">
|
||||
<el-option label="待执行" value="pending"></el-option>
|
||||
<el-option label="执行中" value="executing"></el-option>
|
||||
<el-option label="已延期" value="delayed"></el-option>
|
||||
<el-option label="已完成" value="completed"></el-option>
|
||||
<el-input v-model="searchParams.keyword" placeholder="关键字(名称/报修人/维修人)" clearable @keyup.enter="handleSearch" />
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="searchParams.taskStatus" placeholder="任务状态">
|
||||
<el-option label="待处理" value="1"></el-option>
|
||||
<el-option label="处理中" value="2"></el-option>
|
||||
<el-option label="已完成" value="3"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="planType" placeholder="全部计划">
|
||||
<el-option label="每日巡检计划" value="daily"></el-option>
|
||||
<el-option label="每周巡检计划" value="weekly"></el-option>
|
||||
<el-option label="每月巡检计划" value="monthly"></el-option>
|
||||
<el-select v-model="searchParams.type" placeholder="报修类型">
|
||||
<el-option label="硬件故障" value="1"></el-option>
|
||||
<el-option label="软件故障" value="2"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="executor" placeholder="执行人">
|
||||
<el-option label="张明" value="zhangming"></el-option>
|
||||
<el-option label="李华" value="lihua"></el-option>
|
||||
<el-option label="王强" value="wangqiang"></el-option>
|
||||
<el-select v-model="searchParams.sendPerson" placeholder="执行人">
|
||||
<el-option label="全部" value="" />
|
||||
<el-option v-for="user in usersList" :key="user.id" :label="user.name" :value="user.id" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
|
||||
|
||||
<el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -388,12 +389,19 @@ import { baoxiulist, baoxiuDetail, updatebaoxiu, addbaoxiu } from '@/api/zhineng
|
||||
import { xunjianUserlist } from '@/api/zhinengxunjian/xunjian';
|
||||
import { ElMessage, ElLoading } from 'element-plus';
|
||||
// 激活的选项卡
|
||||
const activeTab = ref('task');
|
||||
const activeTab = ref('all');
|
||||
|
||||
// 筛选条件
|
||||
const taskStatus = ref('');
|
||||
const planType = ref('');
|
||||
const executor = ref('');
|
||||
// 统一搜索参数对象
|
||||
const searchParams = ref({
|
||||
keyword: '',
|
||||
taskStatus: '',
|
||||
type: '',
|
||||
sendPerson: ''
|
||||
});
|
||||
|
||||
// 执行人列表相关
|
||||
const usersList = ref([]);
|
||||
const loadingUsers = ref(false);
|
||||
|
||||
// 详情弹窗相关
|
||||
const detailDialogVisible = ref(false);
|
||||
@ -423,17 +431,46 @@ const assignTaskRules = {
|
||||
};
|
||||
const assignTaskFormRef = ref(null);
|
||||
|
||||
// 获取用户列表
|
||||
async function getUsersList() {
|
||||
loadingUsers.value = true;
|
||||
try {
|
||||
const res = await xunjianUserlist();
|
||||
// 根据接口返回格式，成功码是200，用户数据在rows数组中
|
||||
if (res.code === 200 && res.rows && Array.isArray(res.rows)) {
|
||||
// 映射用户数据，使用userId字段作为唯一标识并转换为字符串以避免大整数精度问题
|
||||
usersList.value = res.rows.map((user) => ({
|
||||
id: String(user.userId || ''),
|
||||
name: user.userName || '未知用户'
|
||||
}));
|
||||
} else {
|
||||
usersList.value = [];
|
||||
console.error('获取用户列表失败:', res.msg || '未知错误');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户列表异常:', error);
|
||||
usersList.value = [];
|
||||
} finally {
|
||||
loadingUsers.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取报修任务列表
|
||||
defineExpose({ getTaskList });
|
||||
async function getTaskList() {
|
||||
loading.value = true;
|
||||
try {
|
||||
// 确保用户列表已加载
|
||||
if (usersList.value.length === 0) {
|
||||
await getUsersList();
|
||||
}
|
||||
|
||||
const res = await baoxiulist({
|
||||
pageNum: currentPage.value,
|
||||
pageSize: pageSize.value,
|
||||
status: taskStatus.value,
|
||||
type: planType.value,
|
||||
executor: executor.value
|
||||
status: searchParams.value.taskStatus || undefined,
|
||||
type: searchParams.value.type || undefined,
|
||||
sendPerson: searchParams.value.sendPerson || undefined,
|
||||
keyword: searchParams.value.keyword
|
||||
});
|
||||
|
||||
if (res.code === 200 && res.rows) {
|
||||
@ -580,12 +617,24 @@ const statusOrder = {
|
||||
|
||||
// 分页处理后的数据（含排序）
|
||||
const pagedTasks = computed(() => {
|
||||
// 先按状态排序
|
||||
const sortedTasks = [...tasks.value].sort((a, b) => {
|
||||
return statusOrder[a.status] - statusOrder[b.status];
|
||||
});
|
||||
// 先关键词过滤
|
||||
let filtered = [...tasks.value];
|
||||
if (searchParams.value.keyword && searchParams.value.keyword.trim()) {
|
||||
const kw = searchParams.value.keyword.trim();
|
||||
filtered = filtered.filter(
|
||||
(t) =>
|
||||
(t.title && t.title.includes(kw)) ||
|
||||
(t.reporter && t.reporter.includes(kw)) ||
|
||||
(t.maintainer && t.maintainer.includes(kw)) ||
|
||||
(t.id && String(t.id).includes(kw))
|
||||
);
|
||||
}
|
||||
|
||||
// 再进行分页
|
||||
// 按状态排序
|
||||
const sortedTasks = filtered.sort((a, b) => statusOrder[a.status] - statusOrder[b.status]);
|
||||
|
||||
// 更新总数并分页
|
||||
total.value = sortedTasks.length;
|
||||
const startIndex = (currentPage.value - 1) * pageSize.value;
|
||||
const endIndex = startIndex + pageSize.value;
|
||||
return sortedTasks.slice(startIndex, endIndex);
|
||||
@ -622,33 +671,6 @@ const createTaskRules = {
|
||||
contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
|
||||
};
|
||||
|
||||
// 用户列表（维修人）
|
||||
const usersList = ref([]);
|
||||
const loadingUsers = ref(false);
|
||||
|
||||
// 获取用户列表
|
||||
const getUsersList = async () => {
|
||||
loadingUsers.value = true;
|
||||
try {
|
||||
const res = await xunjianUserlist();
|
||||
// 根据接口返回格式，成功码是200，用户数据在rows数组中
|
||||
if (res.code === 200 && res.rows && Array.isArray(res.rows)) {
|
||||
// 映射用户数据，使用userId字段作为唯一标识并转换为字符串以避免大整数精度问题
|
||||
usersList.value = res.rows.map((user) => ({
|
||||
id: String(user.userId || ''),
|
||||
name: user.userName || '未知用户'
|
||||
}));
|
||||
} else {
|
||||
usersList.value = [];
|
||||
console.error('获取用户列表失败:', res.msg || '未知错误');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户列表异常:', error);
|
||||
usersList.value = [];
|
||||
} finally {
|
||||
loadingUsers.value = false;
|
||||
}
|
||||
};
|
||||
const isSubmitting = ref(false); // 防止重复提交的状态标记
|
||||
|
||||
// 创建任务
|
||||
|
||||
@ -23,25 +23,34 @@
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-container">
|
||||
<div class="filter-item">
|
||||
<el-input v-model="keyword" placeholder="关键字(单号/内容/报修人/维修人)" clearable @keyup.enter="handleSearch" />
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="taskStatus" placeholder="任务状态">
|
||||
<el-option label="待执行" value="1"></el-option>
|
||||
<el-option label="待处理" value="1"></el-option>
|
||||
<el-option label="处理中" value="2"></el-option>
|
||||
<el-option label="已完成" value="3"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="priority" placeholder="优先级">
|
||||
<el-option label="高优先级" value="1"></el-option>
|
||||
<el-option label="低优先级" value="1"></el-option>
|
||||
<el-option label="中优先级" value="2"></el-option>
|
||||
<el-option label="低优先级" value="3"></el-option>
|
||||
<el-option label="高优先级" value="3"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="executor" placeholder="处理人员">
|
||||
<el-option label="全部人员" value="all"></el-option>
|
||||
<el-option label="李阳" value="liyang"></el-option>
|
||||
<el-option label="张明" value="zhangming"></el-option>
|
||||
<el-select v-model="executor" placeholder="处理人员" :loading="loadingUsers">
|
||||
<el-option label="全部人员" value=""></el-option>
|
||||
<el-option v-for="user in usersList" :key="user.id" :label="user.name" :value="user.id" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="repairType" placeholder="报修类型">
|
||||
<el-option label="全部类型" value=""></el-option>
|
||||
<el-option label="硬件故障" value="1"></el-option>
|
||||
<el-option label="软件故障" value="2"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
@ -56,6 +65,7 @@
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
|
||||
<el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -378,7 +388,13 @@ const statsLoading = ref(false);
|
||||
const taskStatus = ref('');
|
||||
const priority = ref('');
|
||||
const executor = ref('');
|
||||
const repairType = ref('');
|
||||
const dateRange = ref([]);
|
||||
const keyword = ref('');
|
||||
|
||||
// 执行人列表相关
|
||||
const usersList = ref([]);
|
||||
const loadingUsers = ref(false);
|
||||
|
||||
// 分页相关
|
||||
const currentPage = ref(1);
|
||||
@ -403,6 +419,7 @@ const statsData = ref({
|
||||
onMounted(() => {
|
||||
fetchRepairRecords();
|
||||
fetchStatsData();
|
||||
getUsersList();
|
||||
});
|
||||
|
||||
// 从接口获取报修记录
|
||||
@ -411,11 +428,13 @@ const fetchRepairRecords = async () => {
|
||||
try {
|
||||
// 构建请求参数
|
||||
const params = {
|
||||
page: currentPage.value,
|
||||
limit: pageSize.value,
|
||||
pageNum: currentPage.value,
|
||||
pageSize: pageSize.value,
|
||||
status: taskStatus.value || undefined,
|
||||
level: priority.value || undefined
|
||||
// 可以根据需要添加更多筛选参数
|
||||
level: priority.value || undefined,
|
||||
executor: executor.value || undefined,
|
||||
type: repairType.value || undefined,
|
||||
keyword: keyword.value.trim() || undefined
|
||||
};
|
||||
|
||||
// 调用接口获取数据
|
||||
@ -438,8 +457,13 @@ const fetchRepairRecords = async () => {
|
||||
|
||||
// 筛选后的记录
|
||||
const filteredRecords = computed(() => {
|
||||
// 实际应用中这里会根据筛选条件过滤数据
|
||||
return repairRecords.value;
|
||||
const kw = keyword.value.trim().toLowerCase();
|
||||
if (!kw) return repairRecords.value;
|
||||
return repairRecords.value.filter((r) =>
|
||||
[r.id, r.reportInfo, r.reportName, r.sendPersonVo?.userName, getStatusText(r.status)]
|
||||
.filter(Boolean)
|
||||
.some((v) => String(v).toLowerCase().includes(kw))
|
||||
);
|
||||
});
|
||||
|
||||
// 搜索处理
|
||||
@ -448,6 +472,18 @@ const handleSearch = () => {
|
||||
fetchRepairRecords(); // 重新获取数据
|
||||
};
|
||||
|
||||
// 重置筛选
|
||||
const resetFilters = () => {
|
||||
taskStatus.value = '';
|
||||
priority.value = '';
|
||||
executor.value = '';
|
||||
repairType.value = '';
|
||||
dateRange.value = [];
|
||||
keyword.value = '';
|
||||
currentPage.value = 1;
|
||||
fetchRepairRecords();
|
||||
};
|
||||
|
||||
// 分页事件
|
||||
const handleSizeChange = (val) => {
|
||||
pageSize.value = val;
|
||||
@ -474,8 +510,6 @@ const reportFinal = ref('');
|
||||
const assignDialogVisible = ref(false);
|
||||
const currentAssignTaskId = ref('');
|
||||
const selectedUserId = ref('');
|
||||
const usersList = ref([]);
|
||||
const loadingUsers = ref(false);
|
||||
|
||||
// 维修类型映射
|
||||
function mapRepairType(type) {
|
||||
|
||||
@ -71,6 +71,11 @@
|
||||
<el-input v-model="plateNumber4" maxlength="1" class="plate-char"></el-input>
|
||||
<el-input v-model="plateNumber5" maxlength="1" class="plate-char"></el-input>
|
||||
</div>
|
||||
<div style="margin-top: 10px; display: flex; gap: 8px; justify-content: flex-end">
|
||||
<el-input v-model="searchKeyword" placeholder="关键字(编号/类型/车牌)" clearable @keyup.enter="handleSearch" style="max-width: 220px" />
|
||||
<el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetFilters">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -190,7 +190,8 @@
|
||||
}
|
||||
|
||||
/* 步骤状态样式 - 已完成 */
|
||||
.task-detail-container .step-status.status-completed {
|
||||
.task-detail-container .step-status.status-completed,
|
||||
.task-detail-container .step-status.tag-completed {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
border: 1px solid #b7eb8f;
|
||||
@ -203,6 +204,20 @@
|
||||
border: 1px solid #ffccc7;
|
||||
}
|
||||
|
||||
/* 步骤状态样式 - 未完成 */
|
||||
.task-detail-container .step-status.status-unknown {
|
||||
background-color: #f5f5f5;
|
||||
color: #999;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
/* 步骤状态样式 - 失败 */
|
||||
.task-detail-container .step-status.status-failed {
|
||||
background-color: #fff2f0;
|
||||
color: #ff4d4f;
|
||||
border: 1px solid #ffccc7;
|
||||
}
|
||||
|
||||
/* 通用状态颜色样式 */
|
||||
.status-pending {
|
||||
color: #e6a23c;
|
||||
|
||||
@ -22,6 +22,9 @@
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-container">
|
||||
<div class="filter-item">
|
||||
<el-input v-model="keyword" placeholder="关键字(标题/描述/创建人/编号)" clearable @keyup.enter="handleSearch" />
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="workOrderType" placeholder="工单类型" clearable>
|
||||
<el-option label="全部类型" value="all"></el-option>
|
||||
@ -34,8 +37,8 @@
|
||||
<div class="filter-item">
|
||||
<el-select v-model="workOrderStatus" placeholder="全部状态" clearable>
|
||||
<el-option label="全部状态" value="all"></el-option>
|
||||
<el-option label="已接单" value="accepted"></el-option>
|
||||
<el-option label="待处理" value="pending"></el-option>
|
||||
<el-option label="待派单" value="pending"></el-option>
|
||||
<el-option label="已派单" value="accepted"></el-option>
|
||||
<el-option label="执行中" value="executing"></el-option>
|
||||
<el-option label="已完成" value="completed"></el-option>
|
||||
</el-select>
|
||||
@ -53,6 +56,7 @@
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch">搜索</el-button>
|
||||
<el-button icon="Refresh" class="create-btn" @click="resetFilters">重置</el-button>
|
||||
<el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateWorkOrder">发起工单任务</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -372,7 +376,7 @@
|
||||
<div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
|
||||
</div>
|
||||
<div class="step-status" :class="getStatusClass(node.status)">
|
||||
{{ node.status === '2' ? '未完成' : '已完成' }}
|
||||
{{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -454,21 +458,12 @@ import { ElMessageBox } from 'element-plus';
|
||||
const activeTab = ref('list');
|
||||
|
||||
// 筛选条件
|
||||
const keyword = ref('');
|
||||
const workOrderType = ref('all');
|
||||
const workOrderStatus = ref('all');
|
||||
const priority = ref('all');
|
||||
const createDate = ref('');
|
||||
|
||||
// 优先级转类名
|
||||
const mapPriorityToClass = (priority) => {
|
||||
const priorityMap = {
|
||||
1: 'high',
|
||||
2: 'medium',
|
||||
3: 'low'
|
||||
};
|
||||
return priorityMap[priority] || 'low';
|
||||
};
|
||||
|
||||
// 工单数据
|
||||
const rawTableData = ref([]);
|
||||
|
||||
@ -486,6 +481,9 @@ const fetchWorkOrderList = async () => {
|
||||
pageSize: pageSize.value
|
||||
};
|
||||
|
||||
// 调试输出，检查参数是否正确
|
||||
console.log('请求参数:', params);
|
||||
|
||||
const response = await gongdanlist(params);
|
||||
|
||||
if (response.code === 200 && response.rows) {
|
||||
@ -517,6 +515,38 @@ const fetchWorkOrderList = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 类型映射函数 - 页面类型转接口code
|
||||
const mapTypeToTypeCode = (type) => {
|
||||
const typeMap = {
|
||||
'maintenance': 1, // 维护保养
|
||||
'inspection': 2, // 检查检测
|
||||
'installation': 3, // 安装调试
|
||||
'upgrade': 4 // 升级改造
|
||||
};
|
||||
return typeMap[type] || null;
|
||||
};
|
||||
|
||||
// 状态映射函数 - 页面状态转接口code
|
||||
const mapStatusToStatusCode = (status) => {
|
||||
const statusMap = {
|
||||
'pending': 1, // 待派单
|
||||
'accepted': 2, // 已派单
|
||||
'executing': 3, // 执行中
|
||||
'completed': 4 // 已完成
|
||||
};
|
||||
return statusMap[status] || null;
|
||||
};
|
||||
|
||||
// 优先级映射函数 - 页面优先级转接口code
|
||||
const mapPriorityToLevelCode = (priority) => {
|
||||
const priorityMap = {
|
||||
'high': 3, // 高
|
||||
'medium': 2, // 中
|
||||
'low': 1 // 低
|
||||
};
|
||||
return priorityMap[priority] || null;
|
||||
};
|
||||
|
||||
// 类型映射函数 - 页面类型转接口code
|
||||
const mapTypeToCode = (type) => {
|
||||
const typeMap = {
|
||||
@ -604,10 +634,83 @@ const formatDate = (dateString) => {
|
||||
// 初始化加载数据
|
||||
fetchWorkOrderList();
|
||||
|
||||
// 分页处理后的数据
|
||||
// 分页处理后的数据（前端筛选+分页）
|
||||
const pagedTableData = computed(() => {
|
||||
// 由于接口已经处理了分页和筛选，这里直接返回全部数据
|
||||
return rawTableData.value;
|
||||
let filteredData = [...rawTableData.value];
|
||||
|
||||
if (keyword.value && keyword.value.trim()) {
|
||||
const kw = keyword.value.trim();
|
||||
filteredData = filteredData.filter(
|
||||
(item) =>
|
||||
(item.title && item.title.includes(kw)) ||
|
||||
(item.description && item.description.includes(kw)) ||
|
||||
(item.creator && item.creator.includes(kw)) ||
|
||||
(item.orderNo && item.orderNo.includes(kw))
|
||||
);
|
||||
}
|
||||
|
||||
if (workOrderType.value !== 'all') {
|
||||
let typeText = '';
|
||||
switch (workOrderType.value) {
|
||||
case 'maintenance':
|
||||
typeText = '维护保养';
|
||||
break;
|
||||
case 'inspection':
|
||||
typeText = '检查检测';
|
||||
break;
|
||||
case 'installation':
|
||||
typeText = '安装调试';
|
||||
break;
|
||||
case 'upgrade':
|
||||
typeText = '升级改造';
|
||||
break;
|
||||
}
|
||||
filteredData = filteredData.filter((item) => item.type === typeText);
|
||||
}
|
||||
|
||||
if (workOrderStatus.value !== 'all') {
|
||||
let statusText = '';
|
||||
switch (workOrderStatus.value) {
|
||||
case 'accepted':
|
||||
statusText = '已派单';
|
||||
break;
|
||||
case 'pending':
|
||||
statusText = '待派单';
|
||||
break;
|
||||
case 'executing':
|
||||
statusText = '执行中';
|
||||
break;
|
||||
case 'completed':
|
||||
statusText = '已完成';
|
||||
break;
|
||||
}
|
||||
filteredData = filteredData.filter((item) => item.status === statusText);
|
||||
}
|
||||
|
||||
if (priority.value !== 'all') {
|
||||
let priorityText = '';
|
||||
switch (priority.value) {
|
||||
case 'high':
|
||||
priorityText = '高';
|
||||
break;
|
||||
case 'medium':
|
||||
priorityText = '中';
|
||||
break;
|
||||
case 'low':
|
||||
priorityText = '低';
|
||||
break;
|
||||
}
|
||||
filteredData = filteredData.filter((item) => item.priority === priorityText);
|
||||
}
|
||||
|
||||
if (createDate.value) {
|
||||
filteredData = filteredData.filter((item) => item.createTime && item.createTime.includes(createDate.value));
|
||||
}
|
||||
|
||||
total.value = filteredData.length;
|
||||
const startIndex = (currentPage.value - 1) * pageSize.value;
|
||||
const endIndex = startIndex + pageSize.value;
|
||||
return filteredData.slice(startIndex, endIndex);
|
||||
});
|
||||
|
||||
// 获取类型标签样式
|
||||
@ -652,10 +755,10 @@ const getStatusClass = (status) => {
|
||||
// 处理可能的数字输入
|
||||
const statusStr = status?.toString() || '';
|
||||
const statusClassMap = {
|
||||
'1': 'status-pending',
|
||||
'2': 'status-delayed',
|
||||
'3': 'status-executing',
|
||||
'4': 'status-completed'
|
||||
'1': 'status-pending', // 待执行 - 蓝色
|
||||
'2': 'status-unknown', // 未完成 - 灰色
|
||||
'3': 'status-failed', // 失败 - 红色
|
||||
'4': 'status-completed' // 已完成 - 绿色
|
||||
};
|
||||
return statusClassMap[statusStr] || 'status-unknown';
|
||||
};
|
||||
@ -690,19 +793,27 @@ const getStepStatusText = (status) => {
|
||||
|
||||
const handleSearch = () => {
|
||||
currentPage.value = 1; // 重置到第一页
|
||||
fetchWorkOrderList(); // 重新获取数据
|
||||
fetchWorkOrderList(); // 触发API请求获取数据
|
||||
};
|
||||
|
||||
// 重置筛选
|
||||
const resetFilters = () => {
|
||||
keyword.value = '';
|
||||
workOrderType.value = 'all';
|
||||
workOrderStatus.value = 'all';
|
||||
priority.value = 'all';
|
||||
createDate.value = '';
|
||||
currentPage.value = 1;
|
||||
};
|
||||
|
||||
// 分页事件
|
||||
const handleSizeChange = (val) => {
|
||||
pageSize.value = val;
|
||||
currentPage.value = 1;
|
||||
fetchWorkOrderList(); // 重新获取数据
|
||||
};
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
currentPage.value = val;
|
||||
fetchWorkOrderList(); // 重新获取数据
|
||||
};
|
||||
|
||||
// 选项卡点击
|
||||
@ -1539,46 +1650,7 @@ const handleInspectionManagement3 = () => {
|
||||
}
|
||||
|
||||
/* 导航栏样式 */
|
||||
.navigation-tabs {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 12px 24px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-tab:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.nav-tab:hover {
|
||||
color: #409eff;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.nav-tab.active {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
/* 已注释的导航栏样式移除 */
|
||||
|
||||
/* 弹窗样式 */
|
||||
.create-dialog {
|
||||
|
||||
@ -24,6 +24,9 @@
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-container">
|
||||
<div class="filter-item">
|
||||
<el-input v-model="keyword" placeholder="关键字(标题/描述/创建人/编号)" clearable @keyup.enter="handleSearch" />
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="workOrderType" placeholder="工单类型" clearable>
|
||||
<el-option label="全部类型" value="all"></el-option>
|
||||
@ -36,8 +39,8 @@
|
||||
<div class="filter-item">
|
||||
<el-select v-model="workOrderStatus" placeholder="全部状态" clearable>
|
||||
<el-option label="全部状态" value="all"></el-option>
|
||||
<el-option label="待派单" value="accepted"></el-option>
|
||||
<el-option label="待处理" value="pending"></el-option>
|
||||
<el-option label="待派单" value="pending"></el-option>
|
||||
<el-option label="已派单" value="accepted"></el-option>
|
||||
<el-option label="执行中" value="executing"></el-option>
|
||||
<el-option label="已完成" value="completed"></el-option>
|
||||
</el-select>
|
||||
@ -55,6 +58,7 @@
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch">搜索</el-button>
|
||||
<el-button icon="Refresh" class="create-btn" @click="resetFilters">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -430,7 +434,7 @@
|
||||
<div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
|
||||
</div>
|
||||
<div class="step-status" :class="getStatusClass(node.status)">
|
||||
{{ node.status === '2' ? '未完成' : '已完成' }}
|
||||
{{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -509,6 +513,7 @@ import ImageUpload from '@/components/ImageUpload/index.vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
|
||||
// 筛选条件
|
||||
const keyword = ref('');
|
||||
const workOrderType = ref('all');
|
||||
const workOrderStatus = ref('all');
|
||||
const priority = ref('all');
|
||||
@ -701,10 +706,10 @@ const getStatusClass = (status) => {
|
||||
// 处理可能的数字输入
|
||||
const statusStr = status?.toString() || '';
|
||||
const statusClassMap = {
|
||||
'1': 'status-pending',
|
||||
'2': 'status-delayed',
|
||||
'3': 'status-executing',
|
||||
'4': 'status-completed'
|
||||
'1': 'status-pending', // 待执行 - 蓝色
|
||||
'2': 'status-unknown', // 未执行 - 灰色
|
||||
'3': 'status-failed', // 失败 - 红色
|
||||
'4': 'status-completed' // 已完成 - 绿色
|
||||
};
|
||||
return statusClassMap[statusStr] || 'status-unknown';
|
||||
};
|
||||
@ -750,6 +755,18 @@ const pagedTableData = computed(() => {
|
||||
// 筛选逻辑
|
||||
let filteredData = [...rawTableData.value];
|
||||
|
||||
if (keyword.value && keyword.value.trim()) {
|
||||
const kw = keyword.value.trim();
|
||||
filteredData = filteredData.filter((item) => {
|
||||
return (
|
||||
(item.title && item.title.includes(kw)) ||
|
||||
(item.description && item.description.includes(kw)) ||
|
||||
(item.creator && item.creator.includes(kw)) ||
|
||||
(item.orderNo && item.orderNo.includes(kw))
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
if (workOrderType.value !== 'all') {
|
||||
// 转换筛选条件为显示文本进行匹配
|
||||
let typeText = '';
|
||||
@ -775,10 +792,10 @@ const pagedTableData = computed(() => {
|
||||
let statusText = '';
|
||||
switch (workOrderStatus.value) {
|
||||
case 'accepted':
|
||||
statusText = '已接单';
|
||||
statusText = '已派单';
|
||||
break;
|
||||
case 'pending':
|
||||
statusText = '待处理';
|
||||
statusText = '待派单';
|
||||
break;
|
||||
case 'executing':
|
||||
statusText = '执行中';
|
||||
@ -862,6 +879,16 @@ const handleSearch = () => {
|
||||
currentPage.value = 1; // 重置到第一页
|
||||
};
|
||||
|
||||
// 重置筛选
|
||||
const resetFilters = () => {
|
||||
keyword.value = '';
|
||||
workOrderType.value = 'all';
|
||||
workOrderStatus.value = 'all';
|
||||
priority.value = 'all';
|
||||
createDate.value = '';
|
||||
currentPage.value = 1;
|
||||
};
|
||||
|
||||
// 分页事件
|
||||
const handleSizeChange = (val) => {
|
||||
pageSize.value = val;
|
||||
@ -1763,46 +1790,7 @@ const handleCloseDetailDialog = () => {
|
||||
}
|
||||
|
||||
/* 导航栏样式 */
|
||||
.navigation-tabs {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 12px 24px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-tab:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.nav-tab:hover {
|
||||
color: #409eff;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.nav-tab.active {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
/* 已注释的导航栏样式移除 */
|
||||
|
||||
/* 弹窗样式 */
|
||||
.create-dialog {
|
||||
|
||||
@ -22,6 +22,9 @@
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-container">
|
||||
<div class="filter-item">
|
||||
<el-input v-model="keyword" placeholder="关键字(名称/报修人/维修人/位置)" clearable @keyup.enter="handleSearch" />
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="taskStatus" placeholder="任务状态">
|
||||
<el-option label="待执行" value="pending"></el-option>
|
||||
@ -30,25 +33,16 @@
|
||||
<el-option label="已完成" value="completed"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<el-select v-model="planType" placeholder="全部计划">
|
||||
<el-option label="全部计划" value="all"></el-option>
|
||||
<el-option label="每日巡检计划" value="daily"></el-option>
|
||||
<el-option label="每周巡检计划" value="weekly"></el-option>
|
||||
<el-option label="每月巡检计划" value="monthly"></el-option>
|
||||
<el-option label="每季度巡检计划" value="quarterly"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="executor" placeholder="执行人">
|
||||
<el-option label="全部人员" value="all"></el-option>
|
||||
<el-option label="张明" value="zhangming"></el-option>
|
||||
<el-option label="李华" value="lihua"></el-option>
|
||||
<el-option label="王强" value="wangqiang"></el-option>
|
||||
<el-select v-model="sendPerson" placeholder="维修人" :loading="loadingUsers">
|
||||
<el-option label="全部维修人" value="all"></el-option>
|
||||
<el-option v-for="user in usersList" :key="user.id" :label="user.name" :value="user.id"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
|
||||
<el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
|
||||
<el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -423,9 +417,10 @@ import router from '@/router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { qiangxiuDetail, qiangxiulist, addqiangxiu, updateqiangxiu } from '@/api/zhinengxunjian/qiangxiu';
|
||||
import { xunjianUserlist } from '@/api/zhinengxunjian/xunjian';
|
||||
const taskStatus = ref('all');
|
||||
const taskStatus = ref('');
|
||||
const planType = ref('all');
|
||||
const executor = ref('all');
|
||||
const sendPerson = ref('all');
|
||||
const keyword = ref('');
|
||||
// 任务数据 - 添加了更多字段以展示滚动效果
|
||||
const tasks = ref([]);
|
||||
// 分页相关
|
||||
@ -458,6 +453,16 @@ const handleSearch = () => {
|
||||
getTaskList(); // 调用接口获取数据
|
||||
};
|
||||
|
||||
// 重置筛选
|
||||
const resetFilters = () => {
|
||||
taskStatus.value = 'all';
|
||||
planType.value = 'all';
|
||||
sendPerson.value = 'all';
|
||||
keyword.value = '';
|
||||
currentPage.value = 1;
|
||||
getTaskList();
|
||||
};
|
||||
|
||||
// 创建紧急抢修任务弹窗相关
|
||||
const createTaskDialogVisible = ref(false);
|
||||
const createTaskFormRef = ref(null); // 表单引用
|
||||
@ -972,12 +977,13 @@ const handleSaveResult = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 状态映射辅助函数
|
||||
// 状态映射辅助函数 - 严格匹配JSON数据中的status字段
|
||||
function mapStatusToKey(status) {
|
||||
const statusMap = {
|
||||
'1': 'pending', // 待处理
|
||||
'2': 'executing', // 处理中
|
||||
'3': 'completed' // 已完成
|
||||
'3': 'completed', // 已完成
|
||||
'4': 'delayed' // 已延期
|
||||
};
|
||||
return statusMap[status] || 'pending';
|
||||
}
|
||||
@ -1068,31 +1074,51 @@ async function getTaskList() {
|
||||
// 构建请求参数，包含筛选条件
|
||||
const requestParams = {
|
||||
projectId: 1,
|
||||
pageNum: currentPage.value,
|
||||
pageSize: pageSize.value
|
||||
pageNum: parseInt(currentPage.value, 10),
|
||||
pageSize: parseInt(pageSize.value, 10)
|
||||
};
|
||||
|
||||
// 添加任务状态筛选条件
|
||||
// 添加任务状态筛选条件 - 严格匹配JSON数据中的status字段
|
||||
if (taskStatus.value && taskStatus.value !== 'all') {
|
||||
requestParams.status = taskStatus.value;
|
||||
// 状态映射：pending -> 1(待处理), executing -> 2(处理中), completed -> 3(已完成), delayed -> 4(已延期)
|
||||
const statusMap = {
|
||||
'pending': '1',
|
||||
'executing': '2',
|
||||
'completed': '3',
|
||||
'delayed': '4'
|
||||
};
|
||||
requestParams.status = String(statusMap[taskStatus.value] || taskStatus.value);
|
||||
}
|
||||
|
||||
// 添加计划类型筛选条件
|
||||
// 添加故障类型筛选条件 - 严格匹配JSON数据中的type字段
|
||||
if (planType.value && planType.value !== 'all') {
|
||||
requestParams.planType = planType.value;
|
||||
// 类型映射：electric -> 1(电力故障), device -> 2(设备故障), software -> 3(软件故障), network -> 4(网络故障), environment -> 5(环境问题)
|
||||
const typeMap = {
|
||||
'electric': '1',
|
||||
'device': '2',
|
||||
'software': '3',
|
||||
'network': '4',
|
||||
'environment': '5'
|
||||
};
|
||||
requestParams.type = String(typeMap[planType.value] || planType.value);
|
||||
}
|
||||
|
||||
// 添加执行人筛选条件
|
||||
if (executor.value && executor.value !== 'all') {
|
||||
requestParams.executor = executor.value;
|
||||
// 添加维修人员筛选条件 - 严格匹配JSON数据中的sendPerson字段
|
||||
if (sendPerson.value && sendPerson.value !== 'all' && sendPerson.value !== '') {
|
||||
// 转换为数字类型以匹配API期望的格式
|
||||
requestParams.sendPerson = parseInt(sendPerson.value, 10);
|
||||
}
|
||||
|
||||
// 添加关键词搜索条件
|
||||
if (keyword.value && keyword.value.trim()) {
|
||||
requestParams.keyword = keyword.value.trim();
|
||||
}
|
||||
|
||||
const res = await qiangxiulist(requestParams);
|
||||
|
||||
if (res.code === 200 && res.rows) {
|
||||
total.value = res.total || 0;
|
||||
// 将API返回的数据转换为前端显示所需的格式
|
||||
tasks.value = res.rows.map((item) => ({
|
||||
const mapped = res.rows.map((item) => ({
|
||||
id: item.id,
|
||||
title: item.name || '未命名抢修任务',
|
||||
status: mapStatusToKey(item.status),
|
||||
@ -1100,30 +1126,49 @@ async function getTaskList() {
|
||||
leftLineClass: getLeftLineClass(item.status, item.level),
|
||||
priorityClass: getPriorityClass(item.level),
|
||||
priority: getPriorityText(item.level),
|
||||
// 修复报修时间字段名，使用与模板一致的createTime
|
||||
// 严格匹配JSON数据中的createTime字段
|
||||
createTime: formatDate(item.createTime),
|
||||
// 修复报修人字段，使用reportName
|
||||
// 严格匹配JSON数据中的reportName字段
|
||||
reporter: item.reportName || '未知报修人',
|
||||
// 修复维修人字段，从sendPersonVo对象中获取用户名
|
||||
maintainer: item.sendPersonVo?.userName || '未分配',
|
||||
// 严格匹配JSON数据中的sendPerson和sendPersonVo字段
|
||||
maintainer: item.sendPersonVo?.userName || (item.sendPerson ? `用户ID: ${item.sendPerson}` : '未分配'),
|
||||
|
||||
completeTime: item.reportFinishTime ? formatDate(item.reportFinishTime) : '',
|
||||
actionText: getActionText(item.status),
|
||||
actionClass: getActionClass(item.status),
|
||||
reportInfo: item.reportInfo,
|
||||
position: item.position,
|
||||
fileUrl: item.fileUrl,
|
||||
reportInfo: item.reportInfo || '',
|
||||
position: item.position || '',
|
||||
fileUrl: item.fileUrl || '',
|
||||
|
||||
reportPhone: item.reportPhone || '',
|
||||
type: item.type || '',
|
||||
// 保留原始数据用于详情查看
|
||||
sendPersonVo: item.sendPersonVo,
|
||||
faultType: getFaultTypeText(item.type),
|
||||
// 保留expectedTime字段用于任务修改
|
||||
expectedTime: item.expectedTime || '',
|
||||
// 添加needSupport字段，确保从API返回数据中获取实际值
|
||||
needSupport: item.support || ''
|
||||
// 严格匹配JSON数据中的expectedTime字段
|
||||
expectedTime: item.expectedTime ? formatDate(item.expectedTime) : '',
|
||||
// 严格匹配JSON数据中的support字段
|
||||
needSupport: item.support || '',
|
||||
// 添加额外的原始字段用于筛选和展示
|
||||
sendPerson: item.sendPerson,
|
||||
level: item.level,
|
||||
createBy: item.createBy
|
||||
}));
|
||||
|
||||
// 关键词过滤
|
||||
const kw = keyword.value.trim().toLowerCase();
|
||||
const filtered = kw
|
||||
? mapped.filter((t) =>
|
||||
[t.title, t.reporter, t.maintainer, t.position, t.statusText].filter(Boolean).some((v) => String(v).toLowerCase().includes(kw))
|
||||
)
|
||||
: mapped;
|
||||
|
||||
tasks.value = filtered;
|
||||
if (res.total !== undefined) {
|
||||
total.value = kw ? filtered.length : res.total;
|
||||
} else {
|
||||
total.value = filtered.length;
|
||||
}
|
||||
} else {
|
||||
tasks.value = [];
|
||||
total.value = 0;
|
||||
@ -1153,6 +1198,7 @@ function getFaultTypeText(type) {
|
||||
// 初始化时调用接口获取数据
|
||||
setTimeout(() => {
|
||||
getTaskList();
|
||||
getUsersList(); // 获取用户列表用于维修人筛选
|
||||
}, 0);
|
||||
</script>
|
||||
|
||||
@ -1578,7 +1624,8 @@ setTimeout(() => {
|
||||
.detail-value {
|
||||
flex: 1;
|
||||
color: #4e5969;
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.task-result {
|
||||
@ -1595,13 +1642,7 @@ setTimeout(() => {
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f0f2f5;
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
background-color: #fff;
|
||||
padding: 12px 0 0 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
@ -1705,10 +1746,11 @@ setTimeout(() => {
|
||||
}
|
||||
|
||||
.task-title {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #1d2129;
|
||||
line-height: 1.4;
|
||||
word-break: break-word;
|
||||
flex: 1;
|
||||
margin-right: 8px;
|
||||
}
|
||||
@ -1721,35 +1763,32 @@ setTimeout(() => {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/* 不同故障类型的颜色 */
|
||||
/* 电力，设备故障为红色 */
|
||||
.task-type-tag.electric,
|
||||
.task-type-tag.equipment {
|
||||
/* 优先级标签背景色样式 - 与保修管理页面保持一致 */
|
||||
.priority-high {
|
||||
background-color: #fff2f0;
|
||||
color: #ff4d4f;
|
||||
border-color: #ffccc7;
|
||||
}
|
||||
|
||||
/* 供水，设备损坏为黄色 */
|
||||
.task-type-tag.water,
|
||||
.task-type-tag.damage {
|
||||
.priority-medium {
|
||||
background-color: #fffbe6;
|
||||
color: #fa8c16;
|
||||
border-color: #ffe58f;
|
||||
}
|
||||
|
||||
/* 其余为绿色 */
|
||||
.task-type-tag {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
border-color: #b7eb8f;
|
||||
.priority-low {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
border-color: #91d5ff;
|
||||
}
|
||||
|
||||
.task-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.task-card[data-v-2668390e]::before {
|
||||
|
||||
/* 左侧状态线样式 - 与保修管理页面保持一致 */
|
||||
.task-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -1757,6 +1796,22 @@ setTimeout(() => {
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.left-line-high::before {
|
||||
background-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.left-line-medium::before {
|
||||
background-color: #fa8c16;
|
||||
}
|
||||
|
||||
.left-line-low::before {
|
||||
background-color: #1677ff;
|
||||
}
|
||||
|
||||
.left-line-completed::before {
|
||||
background-color: #52c41a;
|
||||
}
|
||||
.task-details {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@ -1769,8 +1824,9 @@ setTimeout(() => {
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
flex: 0 0 70px;
|
||||
flex: 0 0 85px;
|
||||
color: #86909c;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
|
||||
@ -19,9 +19,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 (默认隐藏) -->
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-container">
|
||||
<div class="filter-item">
|
||||
<el-input v-model="keyword" placeholder="关键字(单号/内容/报修人/维修人)" clearable @keyup.enter="handleSearch" />
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="taskStatus" placeholder="任务状态">
|
||||
<el-option label="待执行" value="pending"></el-option>
|
||||
@ -36,10 +39,9 @@
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="executor" placeholder="抢修人员">
|
||||
<el-select v-model="executor" placeholder="抢修人员" :loading="loadingUsers">
|
||||
<el-option label="全部人员" value="all"></el-option>
|
||||
<el-option label="李明" value="liming"></el-option>
|
||||
<el-option label="王伟" value="wangwei"></el-option>
|
||||
<el-option v-for="user in executors" :key="user.userId" :label="user.userName" :value="user.userId"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
@ -54,6 +56,7 @@
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
|
||||
<el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -64,7 +67,9 @@
|
||||
<div class="stat-info">
|
||||
<p class="stat-label">本月抢修总数</p>
|
||||
<p class="stat-value">{{ isCardLoading ? '加载中...' : statisticsData.totalCount }}</p>
|
||||
<p class="stat-trend up">较上月:{{ statisticsData.monthChange }}</p>
|
||||
<p class="stat-trend" :class="statisticsData.monthChangeClass">
|
||||
较上月{{ statisticsData.monthChangeClass === 'warning' ? '无增长' : ':' + statisticsData.monthChange }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="stat-icon">
|
||||
<img src="@/assets/images/qiangxiu.png" alt="本月抢修总数" class="stat-image" />
|
||||
@ -75,7 +80,9 @@
|
||||
<div class="stat-info">
|
||||
<p class="stat-label">平均抢修时长</p>
|
||||
<p class="stat-value">{{ isCardLoading ? '加载中...' : statisticsData.avgDuration }}</p>
|
||||
<p class="stat-trend down">较上月:{{ statisticsData.durationChange }}</p>
|
||||
<p class="stat-trend" :class="statisticsData.durationChangeClass">
|
||||
较上月{{ statisticsData.durationChangeClass === 'warning' ? '无增长' : ':' + statisticsData.durationChange }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="stat-icon">
|
||||
<img src="@/assets/images/qiangxiushijian.png" alt="平均抢修时长" class="stat-image" />
|
||||
@ -97,7 +104,9 @@
|
||||
<div class="stat-info">
|
||||
<p class="stat-label">按时完成率</p>
|
||||
<p class="stat-value">{{ isCardLoading ? '加载中...' : statisticsData.completionRate }}</p>
|
||||
<p class="stat-trend up">{{ statisticsData.rateChange }}</p>
|
||||
<p class="stat-trend" :class="statisticsData.rateChangeClass">
|
||||
{{ statisticsData.rateChangeClass === 'warning' ? '较上月无增长' : statisticsData.rateChange }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="stat-icon success">
|
||||
<img src="@/assets/images/qiangxiuwancheng.png" alt="按时完成率" class="stat-image" />
|
||||
@ -360,6 +369,7 @@ const priority = ref('');
|
||||
const executor = ref('');
|
||||
const dateRange = ref([]);
|
||||
const showFilter = ref(false);
|
||||
const keyword = ref('');
|
||||
|
||||
// 表单验证规则
|
||||
const assignTaskRules = {
|
||||
@ -415,19 +425,58 @@ const getTaskList = async () => {
|
||||
try {
|
||||
isLoading.value = true;
|
||||
|
||||
// 构建查询参数
|
||||
// 构建查询参数，严格匹配JSON数据结构
|
||||
const params = {
|
||||
projectId: 1,
|
||||
pageNum: currentPage.value,
|
||||
pageSize: pageSize.value
|
||||
};
|
||||
|
||||
// 添加任务状态筛选条件 - 严格匹配JSON数据中的status字段
|
||||
if (taskStatus.value && taskStatus.value !== 'all') {
|
||||
// 状态映射：pending -> 1(待处理), processing -> 2(处理中), completed -> 3(已完成)
|
||||
const statusMap = {
|
||||
'pending': '1',
|
||||
'processing': '2',
|
||||
'completed': '3'
|
||||
};
|
||||
params.status = statusMap[taskStatus.value] || taskStatus.value;
|
||||
}
|
||||
|
||||
// 添加紧急程度筛选条件 - 严格匹配JSON数据中的level字段
|
||||
if (priority.value && priority.value !== 'all') {
|
||||
// 优先级映射：normal -> 1(常规), urgent -> 2(紧急), fatal -> 3(致命)
|
||||
const priorityMap = {
|
||||
'normal': '1',
|
||||
'urgent': '2',
|
||||
'fatal': '3'
|
||||
};
|
||||
params.level = priorityMap[priority.value] || priority.value;
|
||||
}
|
||||
|
||||
// 添加维修人员筛选条件 - 严格匹配JSON数据中的sendPerson字段
|
||||
if (executor.value && executor.value !== 'all') {
|
||||
// 确保用户ID为字符串类型，与接口期望格式一致
|
||||
params.sendPerson = executor.value.toString();
|
||||
}
|
||||
|
||||
// 添加时间范围筛选条件
|
||||
if (dateRange.value && dateRange.value.length === 2) {
|
||||
params.startTime = dateRange.value[0];
|
||||
params.endTime = dateRange.value[1];
|
||||
}
|
||||
|
||||
// 添加关键词搜索条件
|
||||
if (keyword.value && keyword.value.trim()) {
|
||||
params.keyword = keyword.value.trim();
|
||||
}
|
||||
|
||||
// 调用接口获取数据
|
||||
const res = await qiangxiulist(params);
|
||||
|
||||
if (res && res.code === 200) {
|
||||
// 更新表格数据，将接口返回的字段映射到表格期望的字段
|
||||
repairRecords.value = Array.isArray(res.rows)
|
||||
const mapped = Array.isArray(res.rows)
|
||||
? res.rows.map((item) => ({
|
||||
// 映射抢修单号
|
||||
reportNo: `R-${item.id || '000'}`,
|
||||
@ -454,7 +503,17 @@ const getTaskList = async () => {
|
||||
originalData: item
|
||||
}))
|
||||
: [];
|
||||
total.value = res.total || 0;
|
||||
|
||||
// 关键词过滤
|
||||
const kw = keyword.value.trim().toLowerCase();
|
||||
const filtered = kw
|
||||
? mapped.filter((r) =>
|
||||
[r.reportNo, r.content, r.reporter, r.handler, r.status].filter(Boolean).some((v) => String(v).toLowerCase().includes(kw))
|
||||
)
|
||||
: mapped;
|
||||
|
||||
repairRecords.value = filtered;
|
||||
total.value = kw ? filtered.length : res.total || filtered.length;
|
||||
} else {
|
||||
ElMessage.error(`获取抢修记录失败：${res?.msg || '未知错误'}`);
|
||||
repairRecords.value = [];
|
||||
@ -586,15 +645,33 @@ const getStatisticsData = async () => {
|
||||
const res = await qiangxiuRecord({ projectId: 1 });
|
||||
|
||||
if (res && res.code === 200) {
|
||||
// 更新统计卡片数据
|
||||
// API返回的实际数据在data字段中
|
||||
const data = res.data || {};
|
||||
|
||||
// 更新统计卡片数据 - 映射新的API返回字段
|
||||
// 解析百分比数据并添加判断逻辑
|
||||
const bxsPercent = parseFloat(data.bxsjszzzl) || 0;
|
||||
const clscPercent = parseFloat(data.clscjszzzl) || 0;
|
||||
const wclPercent = parseFloat(data.wcljszzzl) || 0;
|
||||
|
||||
// 判断并设置变化率样式类
|
||||
const getChangeClass = (percent) => {
|
||||
if (percent > 100) return 'up';
|
||||
if (percent < 100 && percent !== 0) return 'down';
|
||||
return 'warning'; // 等于100或0时显示为灰色（无变化）
|
||||
};
|
||||
|
||||
statisticsData.value = {
|
||||
totalCount: res.totalCount || 0,
|
||||
avgDuration: res.avgDuration || '0分钟',
|
||||
pendingCount: res.pendingCount || 0,
|
||||
completionRate: res.completionRate || '0%',
|
||||
monthChange: res.monthChange || '+0%',
|
||||
durationChange: res.durationChange || '-0分钟',
|
||||
rateChange: res.rateChange || '+0%'
|
||||
totalCount: data.byzbxs || 0, // 本月报修总数
|
||||
avgDuration: `${data.pjclsc || 0}分钟`, // 平均处理时长
|
||||
pendingCount: data.dclbx || 0, // 待处理报修
|
||||
completionRate: `${data.wcl || 0}%`, // 完成率
|
||||
monthChange: `${bxsPercent > 0 ? '+' : ''}${bxsPercent}%`, // 报修数较上月变化
|
||||
monthChangeClass: getChangeClass(bxsPercent), // 报修数变化率样式类
|
||||
durationChange: `${clscPercent > 0 ? '+' : '-'}${Math.abs(clscPercent)}分钟`, // 处理时长较上月变化
|
||||
durationChangeClass: getChangeClass(clscPercent), // 处理时长变化率样式类
|
||||
rateChange: `${wclPercent > 0 ? '+' : ''}${wclPercent}%`, // 完成率较上月变化
|
||||
rateChangeClass: getChangeClass(wclPercent) // 完成率变化率样式类
|
||||
};
|
||||
} else {
|
||||
ElMessage.error(`获取统计数据失败：${res?.msg || '未知错误'}`);
|
||||
@ -609,7 +686,7 @@ const getStatisticsData = async () => {
|
||||
|
||||
// 初始化数据
|
||||
const initData = async () => {
|
||||
await Promise.all([getTaskList(), getStatisticsData()]);
|
||||
await Promise.all([getTaskList(), getStatisticsData(), getUsersList()]);
|
||||
};
|
||||
|
||||
// 组件挂载时初始化数据
|
||||
@ -649,6 +726,27 @@ const selectedExecutor = ref('');
|
||||
const executors = ref([]);
|
||||
const assignLoading = ref(false);
|
||||
|
||||
// 获取用户列表函数
|
||||
const getUsersList = async () => {
|
||||
try {
|
||||
loadingUsers.value = true;
|
||||
const res = await xunjianUserlist();
|
||||
if (res && res.code === 200) {
|
||||
// 过滤无效数据+统一userId为字符串
|
||||
executors.value = (res.rows || [])
|
||||
.filter((item) => item.userId && item.userName)
|
||||
.map((item) => ({
|
||||
userId: item.userId.toString(), // 使用userId字段
|
||||
userName: item.userName || '未知用户'
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户列表失败:', error);
|
||||
} finally {
|
||||
loadingUsers.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 跟进弹窗相关
|
||||
const followDialogVisible = ref(false);
|
||||
const reportFinal = ref('');
|
||||
@ -732,16 +830,8 @@ const handleAction = (record) => {
|
||||
const handleAssign = async (record) => {
|
||||
currentRecord.value = { ...record };
|
||||
try {
|
||||
const res = await xunjianUserlist();
|
||||
if (res && res.code === 200) {
|
||||
// 过滤无效数据+统一userId为字符串
|
||||
executors.value = (res.rows || [])
|
||||
.filter((item) => item.userId && item.userName)
|
||||
.map((item) => ({
|
||||
userId: item.userId.toString(), // 使用userId字段
|
||||
userName: item.userName || '未知用户'
|
||||
}));
|
||||
}
|
||||
// 重新获取用户列表以确保最新数据
|
||||
await getUsersList();
|
||||
} catch (error) {
|
||||
console.error('获取人员列表失败:', error);
|
||||
ElMessage.error('获取人员列表失败，请稍后重试');
|
||||
@ -1122,7 +1212,7 @@ const handleInspectionManagement2 = () => {
|
||||
}
|
||||
|
||||
.stat-trend.warning {
|
||||
color: #fa8c16;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
@ -1210,39 +1300,53 @@ const handleInspectionManagement2 = () => {
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-tag.processing {
|
||||
.status-processing {
|
||||
background-color: #fffbe6;
|
||||
color: #faad14;
|
||||
border: 1px solid #fff1b8;
|
||||
color: #fa8c16;
|
||||
border: 1px solid #ffe58f;
|
||||
}
|
||||
|
||||
.status-tag.completed {
|
||||
background-color: #f0f9eb;
|
||||
.status-completed {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
border: 1px solid #e1f3d8;
|
||||
border: 1px solid #b7eb8f;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background-color: #e6f7ff;
|
||||
color: #1677ff;
|
||||
border: 1px solid #91d5ff;
|
||||
}
|
||||
|
||||
.priority-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.priority-tag.urgent {
|
||||
background-color: #ffebe6;
|
||||
.priority-urgent {
|
||||
background-color: #fff2f0;
|
||||
color: #ff4d4f;
|
||||
border: 1px solid #ffccc7;
|
||||
}
|
||||
|
||||
.priority-tag.normal {
|
||||
.priority-normal {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
border: 1px solid #b3d8ff;
|
||||
color: #1677ff;
|
||||
border: 1px solid #91d5ff;
|
||||
}
|
||||
|
||||
.priority-fatal {
|
||||
background-color: #fff2f0;
|
||||
color: #ff4d4f;
|
||||
border: 1px solid #ffccc7;
|
||||
}
|
||||
|
||||
.detail-btn {
|
||||
@ -1253,6 +1357,10 @@ const handleInspectionManagement2 = () => {
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
.evaluate-btn {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
/* 分页区域样式 */
|
||||
.pagination-section {
|
||||
display: flex;
|
||||
|
||||
@ -443,9 +443,6 @@ const handleInspectionManagement3 = () => {
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* */
|
||||
|
||||
/* 内容容器样式 */
|
||||
.content-container {
|
||||
display: flex;
|
||||
|
||||
@ -24,18 +24,26 @@
|
||||
<!-- 4. 筛选和操作区域（与试验系统filter-and-actions结构一致） -->
|
||||
<div class="filter-and-actions">
|
||||
<div class="filters">
|
||||
<el-select v-model="filterStatus" placeholder="巡检状态" clearable>
|
||||
<el-input v-model="keyword" placeholder="关键字(计划名/编号)" clearable @keyup.enter="handleSearch" style="width: 220px" />
|
||||
<el-select v-model="filterStatus" placeholder="试验状态" clearable>
|
||||
<el-option label="全部状态" value="all"></el-option>
|
||||
<el-option label="正常" value="normal"></el-option>
|
||||
<el-option label="需关注" value="attention"></el-option>
|
||||
<el-option label="有问题" value="problem"></el-option>
|
||||
<el-option label="已批准" value="1"></el-option>
|
||||
<el-option label="进行中" value="2"></el-option>
|
||||
<el-option label="已完成" value="3"></el-option>
|
||||
<el-option label="未通过" value="4"></el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="filterType" placeholder="巡检类型" clearable>
|
||||
<el-select v-model="filterType" placeholder="实验对象类型" clearable>
|
||||
<el-option label="全部类型" value="all"></el-option>
|
||||
<el-option label="数据库" value="database"></el-option>
|
||||
<el-option label="服务器" value="server"></el-option>
|
||||
<el-option label="网络设备" value="network"></el-option>
|
||||
<el-option label="安全试验" value="1"></el-option>
|
||||
<el-option label="网络实验" value="2"></el-option>
|
||||
<el-option label="性能试验" value="3"></el-option>
|
||||
<el-option label="其他试验" value="4"></el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="filterManager" placeholder="负责人" clearable>
|
||||
<el-option label="全部负责人" value="all"></el-option>
|
||||
<el-option v-for="user in userList" :key="user.value" :label="user.label" :value="user.value" />
|
||||
</el-select>
|
||||
|
||||
<el-date-picker
|
||||
@ -49,7 +57,8 @@
|
||||
></el-date-picker>
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<el-button type="primary" icon="Search" class="search-btn"> 搜索 </el-button>
|
||||
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
|
||||
<el-button icon="Refresh" class="search-btn" @click="resetFilters"> 重置 </el-button>
|
||||
<el-button type="primary" icon="Plus" class="create-btn" @click="openRecordDialog"> <i class="fas fa-plus"></i> 新增实验记录 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -581,8 +590,10 @@ const activeTab = ref('plan'); // 默认为"巡检计划"
|
||||
const timeRange = ref('month'); // 统计时间范围：月/周/日
|
||||
|
||||
// 2. 筛选条件
|
||||
const keyword = ref('');
|
||||
const filterStatus = ref('all');
|
||||
const filterType = ref('all');
|
||||
const filterManager = ref('all');
|
||||
const dateRange = ref([]);
|
||||
|
||||
// 分页参数
|
||||
@ -600,8 +611,14 @@ const fetchExperimentData = async () => {
|
||||
const queryParams = {
|
||||
projectId: 1,
|
||||
pageSize: pageSize.value,
|
||||
pageNum: currentPage.value
|
||||
// 其他参数...
|
||||
pageNum: currentPage.value,
|
||||
// 根据筛选条件构建查询参数
|
||||
keyword: keyword.value || undefined,
|
||||
testStatus: filterStatus.value === 'all' ? undefined : filterStatus.value,
|
||||
testObject: filterType.value === 'all' ? undefined : filterType.value,
|
||||
personCharge: filterManager.value === 'all' ? undefined : filterManager.value,
|
||||
beginTime: dateRange.value.length > 0 ? dateRange.value[0] : undefined,
|
||||
endTime: dateRange.value.length > 0 ? dateRange.value[1] : undefined
|
||||
};
|
||||
|
||||
const response = await shiyanlist(queryParams);
|
||||
@ -628,6 +645,23 @@ const fetchExperimentData = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 搜索与重置（当前数据主要来自接口，保留前端筛选入口）
|
||||
const handleSearch = () => {
|
||||
// 可根据项目需要将 keyword/filter 传给接口；当前保持页内刷新
|
||||
currentPage.value = 1;
|
||||
fetchExperimentData();
|
||||
};
|
||||
|
||||
const resetFilters = () => {
|
||||
keyword.value = '';
|
||||
filterStatus.value = 'all';
|
||||
filterType.value = 'all';
|
||||
filterManager.value = 'all';
|
||||
dateRange.value = [];
|
||||
currentPage.value = 1;
|
||||
fetchExperimentData();
|
||||
};
|
||||
|
||||
// 辅助方法
|
||||
const getTestObjectText = (type) => {
|
||||
const typeMap = {
|
||||
@ -717,15 +751,6 @@ const handleInspectionManagement2 = () => {
|
||||
const handleInspectionManagement3 = () => {
|
||||
router.push('/znxj/sygl/shiyanjilu');
|
||||
};
|
||||
// 10. 方法：切换功能选项卡
|
||||
const switchTab = (tab) => {
|
||||
activeTab.value = tab;
|
||||
// 实际应用中需根据选项卡加载对应数据
|
||||
if (tab === 'record') {
|
||||
// 加载统计数据
|
||||
updateStatData(timeRange.value);
|
||||
}
|
||||
};
|
||||
|
||||
// 11. 方法：更新统计数据（根据时间范围）
|
||||
const updateStatData = (range) => {
|
||||
@ -786,12 +811,6 @@ const getRecordStatusText = (status) => {
|
||||
return statusMap[status] || '';
|
||||
};
|
||||
|
||||
// 进度条颜色
|
||||
const getProgressColor = (status) => {
|
||||
const colorMap = { 'drafted': '#ccc', 'in-progress': '#3b82f6', 'completed': '#10b981', 'paused': '#9e9e9e' };
|
||||
return colorMap[status] || '#ccc';
|
||||
};
|
||||
|
||||
// 18. 新增实验记录弹窗相关
|
||||
const showRecordDialog = ref(false);
|
||||
const saveLoading = ref(false); // 保存加载状态
|
||||
@ -1104,21 +1123,6 @@ const handleEditRecord = async (row) => {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
// 添加新步骤
|
||||
const addStep = () => {
|
||||
formData.value.steps.push({ name: '', intendedPurpose: '', intendedTime: '' });
|
||||
};
|
||||
|
||||
// 删除步骤
|
||||
const deleteStep = (index) => {
|
||||
// 确保至少保留一个步骤
|
||||
if (formData.value.steps.length <= 1) {
|
||||
ElMessage.warning('至少需要保留一个步骤');
|
||||
return;
|
||||
}
|
||||
// 从数组中删除指定索引的步骤
|
||||
formData.value.steps.splice(index, 1);
|
||||
};
|
||||
|
||||
// 添加新设备
|
||||
const addEquipment = () => {
|
||||
@ -1214,19 +1218,6 @@ const formatDate = (dateString) => {
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
};
|
||||
|
||||
// 日期时间格式化函数
|
||||
const formatDateTime = (dateString) => {
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -1237,41 +1228,7 @@ const formatDateTime = (dateString) => {
|
||||
background-color: #f9fbfd;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.navigation-tabs {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 12px 24px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-tab:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.nav-tab:hover {
|
||||
color: #409eff;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.nav-tab.active {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
/* 已注释的导航栏样式移除 */
|
||||
|
||||
/* 3. 页面标题 */
|
||||
.page-header {
|
||||
|
||||
@ -23,18 +23,21 @@
|
||||
<!-- 筛选和操作区域 -->
|
||||
<div class="filter-and-actions">
|
||||
<div class="filters">
|
||||
<el-select v-model="filterStatus" placeholder="巡检状态" clearable>
|
||||
<el-input v-model="keyword" placeholder="关键字(计划名/编号)" clearable @keyup.enter="handleSearch" style="width: 220px" />
|
||||
<el-select v-model="status" placeholder="试验状态" clearable>
|
||||
<el-option label="全部状态" value="all"></el-option>
|
||||
<el-option label="正常" value="normal"></el-option>
|
||||
<el-option label="需关注" value="attention"></el-option>
|
||||
<el-option label="有问题" value="problem"></el-option>
|
||||
<el-option label="待执行" value="1"></el-option>
|
||||
<el-option label="执行中" value="2"></el-option>
|
||||
<el-option label="已完成" value="3"></el-option>
|
||||
<el-option label="失败" value="4"></el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="filterType" placeholder="巡检类型" clearable>
|
||||
<el-select v-model="filterType" placeholder="实验对象类型" clearable>
|
||||
<el-option label="全部类型" value="all"></el-option>
|
||||
<el-option label="数据库" value="database"></el-option>
|
||||
<el-option label="服务器" value="server"></el-option>
|
||||
<el-option label="网络设备" value="network"></el-option>
|
||||
<el-option label="安全试验" value="1"></el-option>
|
||||
<el-option label="网络实验" value="2"></el-option>
|
||||
<el-option label="性能试验" value="3"></el-option>
|
||||
<el-option label="其他试验" value="4"></el-option>
|
||||
</el-select>
|
||||
|
||||
<el-date-picker
|
||||
@ -47,7 +50,8 @@
|
||||
class="date-picker"
|
||||
></el-date-picker>
|
||||
|
||||
<el-button icon="Search" type="primary" class="search-btn"> 搜索 </el-button>
|
||||
<el-button icon="Search" type="primary" class="search-btn" @click="handleSearch"> 搜索 </el-button>
|
||||
<el-button icon="Refresh" @click="resetFilters"> 重置 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -132,17 +136,17 @@
|
||||
<div class="test-records">
|
||||
<!-- 动态生成试验记录卡片 -->
|
||||
<div
|
||||
v-for="(record, recordIndex) in testRecords"
|
||||
v-for="(record, recordIndex) in filteredTestRecords"
|
||||
:key="record.id"
|
||||
class="test-record-card"
|
||||
:class="{ 'passed': record.status === 'completed', 'failed': record.status === 'failed' }"
|
||||
>
|
||||
<div class="record-header">
|
||||
<h3 class="record-title">{{ record.taskName || '试验任务' }}</h3>
|
||||
<h3 class="record-title">{{ record.taskName || record.testPlan?.planName || '试验任务' }}</h3>
|
||||
<p class="record-date">
|
||||
开始时间
|
||||
{{ formatDate(record.beginTime) }}
|
||||
<span class="record-time">计划完成时间: {{ record.planFinishTime ? formatDate(record.planFinishTime) : '未知' }}</span>
|
||||
<span class="record-time">计划完成时间: {{ record.endTime ? formatDate(record.endTime) : '未知' }}</span>
|
||||
</p>
|
||||
<span class="status-tag" :class="getStatusClass(record.status)">
|
||||
{{ getStatusText(record.status) }}
|
||||
@ -170,11 +174,11 @@
|
||||
<!-- 试验结果 -->
|
||||
<div class="test-result" :class="{ 'failure-analysis': record.status === 'failed' }">
|
||||
<h4 class="result-title">
|
||||
{{ record.status === '3' ? '失败原因分析' : '试验结果' }}
|
||||
{{ record.status === '4' ? '失败原因分析' : '试验结果' }}
|
||||
</h4>
|
||||
|
||||
<p class="result-content">
|
||||
{{ record.status === '3' ? record.failReason || '未提供失败原因' : record.testFinal || '试验未完成，未提供详细结果' }}
|
||||
{{ record.status === '4' ? record.failReason || '未提供失败原因' : record.testFinal || '试验未完成，未提供详细结果' }}
|
||||
</p>
|
||||
|
||||
<p class="result-details" v-if="record.status !== 'failed'">
|
||||
@ -183,7 +187,7 @@
|
||||
</p>
|
||||
|
||||
<!-- 改进建议（仅失败时显示） -->
|
||||
<div class="improvement-suggestion" v-if="record.status === 'failed' && record.faileTips">
|
||||
<div class="improvement-suggestion" v-if="record.status === '4' && record.faileTips">
|
||||
<i class="fas fa-lightbulb"></i>
|
||||
<p>建议: {{ record.faileTips }}</p>
|
||||
</div>
|
||||
@ -358,7 +362,7 @@
|
||||
<div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
|
||||
</div>
|
||||
<div class="step-status" :class="getStatusClass(node.status)">
|
||||
{{ node.status === '2' ? '未完成' : '已完成' }}
|
||||
{{ node.status === '2' ? '未完成' : node.status === '3' ? '失败' : '已完成' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -396,7 +400,8 @@ import { syrenwulist, syrenwujilu, syrenwuDetail } from '@/api/zhinengxunjian/sh
|
||||
const activeTab = ref('record'); // 默认显示"试验记录"
|
||||
|
||||
// 2. 筛选条件
|
||||
const filterStatus = ref('all');
|
||||
const keyword = ref('');
|
||||
const status = ref('all');
|
||||
const filterType = ref('all');
|
||||
const dateRange = ref([]);
|
||||
|
||||
@ -430,18 +435,33 @@ const currentPage = ref(1);
|
||||
const pageSize = ref(20);
|
||||
const totalRecords = ref(0);
|
||||
|
||||
// 7. 方法：获取试验记录数据
|
||||
// 7. 方法：获取试验记录数据，根据提供的JSON数据结构优化参数
|
||||
const getTestRecords = async () => {
|
||||
try {
|
||||
const response = await syrenwulist({
|
||||
// 构建与JSON数据结构匹配的查询参数
|
||||
const queryParams = {
|
||||
projectId: 1,
|
||||
page: currentPage.value,
|
||||
size: pageSize.value
|
||||
});
|
||||
pageNum: currentPage.value,
|
||||
pageSize: pageSize.value,
|
||||
// 筛选条件
|
||||
keyword: keyword.value || undefined,
|
||||
status: status.value === 'all' ? undefined : status.value,
|
||||
testObject: filterType.value === 'all' ? undefined : filterType.value,
|
||||
beginTime: dateRange.value.length > 0 ? dateRange.value[0] : undefined,
|
||||
endTime: dateRange.value.length > 0 ? dateRange.value[1] : undefined
|
||||
};
|
||||
|
||||
const response = await syrenwulist(queryParams);
|
||||
console.log('syrenwulist API响应:', response);
|
||||
|
||||
if (response && response.code === 200 && response.rows) {
|
||||
testRecords.value = response.rows;
|
||||
// 处理返回的数据，确保ID是字符串避免大整数精度问题
|
||||
testRecords.value = response.rows.map((item) => ({
|
||||
...item,
|
||||
id: String(item.id), // 强制转换为字符串
|
||||
// 处理personInfo字段，确保与页面显示匹配
|
||||
personInfo: item.person || item.persons?.[0] || null
|
||||
}));
|
||||
totalRecords.value = response.total;
|
||||
}
|
||||
} catch (error) {
|
||||
@ -449,6 +469,53 @@ const getTestRecords = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 前端过滤后的试验记录，与JSON数据结构匹配
|
||||
const filteredTestRecords = computed(() => {
|
||||
let data = [...testRecords.value];
|
||||
|
||||
// 关键字过滤 - 匹配planName/planCode/负责人姓名
|
||||
if (keyword.value && keyword.value.trim()) {
|
||||
const kw = keyword.value.trim();
|
||||
data = data.filter((rec) => {
|
||||
return (
|
||||
(rec.planName && rec.planName.includes(kw)) ||
|
||||
(rec.planCode && rec.planCode.includes(kw)) ||
|
||||
(rec.personInfo?.userName && rec.personInfo.userName.includes(kw)) ||
|
||||
(rec.id && String(rec.id).includes(kw))
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// 状态过滤 - 匹配返回数据中的status字段
|
||||
if (status.value !== 'all') {
|
||||
data = data.filter((rec) => rec.status === status.value);
|
||||
}
|
||||
|
||||
// 类型过滤
|
||||
if (filterType.value !== 'all') {
|
||||
data = data.filter((rec) => rec.testObject === filterType.value);
|
||||
}
|
||||
|
||||
return data;
|
||||
});
|
||||
|
||||
// 搜索与重置
|
||||
const handleSearch = () => {
|
||||
// 重置为第一页并重新获取数据
|
||||
currentPage.value = 1;
|
||||
getTestRecords();
|
||||
};
|
||||
|
||||
const resetFilters = () => {
|
||||
keyword.value = '';
|
||||
status.value = 'all';
|
||||
filterType.value = 'all';
|
||||
dateRange.value = [];
|
||||
currentPage.value = 1;
|
||||
// 重置后重新获取数据
|
||||
getTestRecords();
|
||||
};
|
||||
|
||||
// 8. 方法：获取统计数据
|
||||
const getStatisticsData = async () => {
|
||||
try {
|
||||
@ -558,14 +625,13 @@ const getProgressColor = (status) => {
|
||||
return colorMap[status] || '#e5e7eb';
|
||||
};
|
||||
|
||||
// 15. 辅助方法：获取状态文本
|
||||
// 15. 辅助方法：获取状态文本 - 根据返回数据更新状态映射
|
||||
const getStatusText = (status) => {
|
||||
const statusMap = {
|
||||
'1': '待执行',
|
||||
'4': '执行中',
|
||||
'2': '已延期',
|
||||
'5': '已完成',
|
||||
'3': '失败',
|
||||
'2': '执行中',
|
||||
'3': '已完成',
|
||||
'4': '失败',
|
||||
'completed': '已完成',
|
||||
'failed': '失败',
|
||||
'paused': '已延期',
|
||||
@ -594,14 +660,13 @@ const getTaskStatusText = (status) => {
|
||||
return statusMap[status] || '未知状态';
|
||||
};
|
||||
|
||||
// 17. 辅助方法：获取状态类名
|
||||
// 17. 辅助方法：获取状态类名 - 根据返回数据更新状态类映射
|
||||
const getStatusClass = (status) => {
|
||||
const classMap = {
|
||||
'1': 'tag-pending', // 待执行
|
||||
'4': 'tag-executing', // 执行中
|
||||
'2': 'tag-delayed', // 已延期
|
||||
'5': 'tag-completed', // 已完成
|
||||
'3': 'status-failed', // 失败
|
||||
'2': 'tag-executing', // 执行中
|
||||
'3': 'tag-completed', // 已完成
|
||||
'4': 'status-failed', // 失败
|
||||
'completed': 'tag-completed',
|
||||
'failed': 'status-failed',
|
||||
'paused': 'tag-delayed',
|
||||
@ -715,41 +780,7 @@ onMounted(async () => {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.navigation-tabs {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 12px 24px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-tab:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.nav-tab:hover {
|
||||
color: #409eff;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.nav-tab.active {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
/* 已注释的导航栏样式移除 */
|
||||
|
||||
/* 3. 选项卡样式 */
|
||||
.tabs-wrapper {
|
||||
@ -864,6 +895,12 @@ onMounted(async () => {
|
||||
border-color: #b7eb8f;
|
||||
}
|
||||
|
||||
.tag-incomplete {
|
||||
background-color: #f5f5f5;
|
||||
color: #999;
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
|
||||
/* 保留原有的部分样式以确保兼容性 */
|
||||
.status-in-progress {
|
||||
background-color: #fffbe6;
|
||||
|
||||
@ -24,24 +24,19 @@
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-container">
|
||||
<div class="filter-item">
|
||||
<el-input v-model="keyword" placeholder="关键字(任务名/测试对象/执行人)" clearable @keyup.enter="handleSearch" />
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="taskStatus" placeholder="任务状态">
|
||||
<el-option label="待执行" value="1"></el-option>
|
||||
<el-option label="执行中" value="4"></el-option>
|
||||
<el-option label="已延期" value="2"></el-option>
|
||||
|
||||
<el-option label="已完成" value="5"></el-option>
|
||||
<el-option label="失败" value="3"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="planType" placeholder="全部计划">
|
||||
<el-option label="每日巡检计划" value="1"></el-option>
|
||||
<!-- 对应接口testPlanId -->
|
||||
<el-option label="每周巡检计划" value="2"></el-option>
|
||||
<el-option label="每月巡检计划" value="3"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<el-select v-model="executor" placeholder="执行人">
|
||||
<el-option label="全部人员" value="all"></el-option>
|
||||
@ -50,6 +45,7 @@
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
|
||||
<el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
|
||||
<el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -372,7 +368,7 @@
|
||||
<div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
|
||||
</div>
|
||||
<div class="step-status" :class="getStatusClass(node.status)">
|
||||
{{ node.status === '2' ? '未完成' : '已完成' }}
|
||||
{{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -479,6 +475,7 @@ const loading = ref(false);
|
||||
// 筛选条件（与接口参数对应）
|
||||
const taskStatus = ref(''); // 任务状态：1=待执行，2=暂停（已延期），3=失败，4=执行中，5=已完成
|
||||
const planType = ref(''); // 关联计划ID：1=每日，2=每周，3=每月
|
||||
const keyword = ref(''); // 关键词
|
||||
|
||||
/**
|
||||
* 将节点数据按模块分组
|
||||
@ -548,10 +545,11 @@ const getStatusClass = (status) => {
|
||||
// 处理可能的数字输入
|
||||
const statusStr = status?.toString() || '';
|
||||
const statusClassMap = {
|
||||
'1': 'status-pending',
|
||||
'2': 'status-delayed',
|
||||
'3': 'status-executing',
|
||||
'4': 'status-completed'
|
||||
'1': 'status-pending', // 待执行
|
||||
'2': 'status-unknown', // 未完成 - 灰色
|
||||
'3': 'status-failed', // 失败 - 红色
|
||||
'4': 'status-executing', // 执行中
|
||||
'5': 'status-completed' // 已完成 - 绿色
|
||||
};
|
||||
return statusClassMap[statusStr] || 'status-unknown';
|
||||
};
|
||||
@ -586,7 +584,7 @@ const getStepStatusText = (status) => {
|
||||
const statusMap = {
|
||||
'1': '待执行',
|
||||
'2': '执行中',
|
||||
'3': '已完成',
|
||||
'3': '失败',
|
||||
'4': '已延期'
|
||||
};
|
||||
return statusMap[statusStr] || '未知状态';
|
||||
@ -700,14 +698,14 @@ const getExperimentPlanList = async () => {
|
||||
const getTaskList = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
// 1. 构造接口请求参数（严格匹配createDept结构）
|
||||
// 1. 构造接口请求参数（严格匹配返回的JSON数据结构）
|
||||
const requestParams = {
|
||||
pageNum: currentPage.value,
|
||||
pageSize: pageSize.value,
|
||||
projectId: 1, // 项目ID（必需字段，需从全局状态/路由获取真实值）
|
||||
status: taskStatus.value || undefined, // 任务状态（为空不传递）
|
||||
testPlanId: planType.value || undefined, // 关联计划ID（筛选条件）
|
||||
person: executor.value === 'all' ? undefined : executor.value // 执行人ID（筛选条件）
|
||||
projectId: 1, // 项目ID（必需字段）
|
||||
status: taskStatus.value || undefined, // 任务状态（对应JSON中的status字段）
|
||||
testPlanId: planType.value || undefined, // 关联计划ID（对应JSON中的testPlanId字段）
|
||||
person: executor.value === 'all' ? undefined : executor.value // 执行人ID（对应JSON中的person字段）
|
||||
};
|
||||
|
||||
// 2. 调用接口（已引入的syrenwulist函数）
|
||||
@ -716,8 +714,18 @@ const getTaskList = async () => {
|
||||
|
||||
if (response.code === 200) {
|
||||
// 3. 接口数据映射为页面展示格式
|
||||
tasks.value = (response.rows || []).map((item) => mapApiToView(item));
|
||||
total.value = response.total || 0; // 同步总条数
|
||||
const mapped = (response.rows || []).map((item) => mapApiToView(item));
|
||||
// 4. 前端关键词过滤
|
||||
const kw = keyword.value.trim();
|
||||
const filtered = kw
|
||||
? mapped.filter((t) =>
|
||||
[t.title, t.target, t.executor, t.relatedPlan, t.statusText]
|
||||
.filter(Boolean)
|
||||
.some((v) => String(v).toLowerCase().includes(kw.toLowerCase()))
|
||||
)
|
||||
: mapped;
|
||||
tasks.value = filtered;
|
||||
total.value = kw ? filtered.length : response.total || filtered.length; // 同步总条数
|
||||
} else {
|
||||
ElMessage.error('获取任务列表失败：' + (response.msg || '未知错误'));
|
||||
tasks.value = [];
|
||||
@ -749,9 +757,9 @@ const mapApiToView = (apiData) => {
|
||||
result: '-'
|
||||
},
|
||||
'2': {
|
||||
statusText: '已延期',
|
||||
statusText: '未完成',
|
||||
cardClass: 'card-delayed',
|
||||
tagClass: 'tag-delayed',
|
||||
tagClass: 'status-unknown',
|
||||
actionText: '重新安排',
|
||||
actionClass: 'reschedule-btn',
|
||||
result: '-'
|
||||
@ -759,7 +767,7 @@ const mapApiToView = (apiData) => {
|
||||
'3': {
|
||||
statusText: '失败',
|
||||
cardClass: 'card-failed',
|
||||
tagClass: 'tag-failed',
|
||||
tagClass: 'status-failed',
|
||||
actionText: '重新执行',
|
||||
actionClass: 'reschedule-btn',
|
||||
result: '失败',
|
||||
@ -833,6 +841,18 @@ const mapApiToView = (apiData) => {
|
||||
try {
|
||||
// 优先查找nodes数组中处于执行中或失败的节点来确定当前试验阶段
|
||||
if (apiData && apiData.nodes && Array.isArray(apiData.nodes)) {
|
||||
// 优先查找失败状态的节点（根据需求，优先显示status为3的数据）
|
||||
const failedNode = apiData.nodes.find((node) => {
|
||||
if (!node || node.status === undefined) return false;
|
||||
return node.status === '3' || node.status === 3;
|
||||
});
|
||||
|
||||
// 如果有失败的节点，根据code判断阶段
|
||||
if (failedNode && failedNode.code !== undefined) {
|
||||
const stepName = failedNode.name || '未命名步骤';
|
||||
return `第${failedNode.code}步(${stepName})`;
|
||||
}
|
||||
|
||||
// 查找执行中状态的节点
|
||||
const executingNode = apiData.nodes.find((node) => {
|
||||
if (!node || node.status === undefined) return false;
|
||||
@ -845,18 +865,6 @@ const mapApiToView = (apiData) => {
|
||||
return `第${executingNode.code}步(${stepName})`;
|
||||
}
|
||||
|
||||
// 查找失败状态的节点
|
||||
const failedNode = apiData.nodes.find((node) => {
|
||||
if (!node || node.status === undefined) return false;
|
||||
return node.status === '3' || node.status === 3;
|
||||
});
|
||||
|
||||
// 如果有失败的节点，根据code判断阶段
|
||||
if (failedNode && failedNode.code !== undefined) {
|
||||
const stepName = failedNode.name || '未命名步骤';
|
||||
return `第${failedNode.code}步(${stepName})`;
|
||||
}
|
||||
|
||||
// 查找已完成的节点，确定最后完成的阶段
|
||||
const completedNodes = apiData.nodes.filter((node) => {
|
||||
if (!node || node.status === undefined) return false;
|
||||
@ -921,6 +929,16 @@ const handleSearch = () => {
|
||||
getTaskList();
|
||||
};
|
||||
|
||||
// 重置筛选条件
|
||||
const resetFilters = () => {
|
||||
taskStatus.value = '';
|
||||
planType.value = '';
|
||||
executor.value = 'all';
|
||||
keyword.value = '';
|
||||
currentPage.value = 1;
|
||||
getTaskList();
|
||||
};
|
||||
|
||||
/**
|
||||
* 每页条数变化
|
||||
* @param {number} val - 新的每页条数
|
||||
@ -1098,9 +1116,9 @@ const handleAction = async (task) => {
|
||||
case '3': // 失败 → 重试（状态改为1）
|
||||
updateParams.status = '1';
|
||||
// 清空失败相关字段，使用适合各字段数据类型的默认值
|
||||
updateParams.failReason = '';
|
||||
updateParams.failTime = ''; // 时间类型字段使用null
|
||||
updateParams.failPhase = ''; // 整数类型字段使用0
|
||||
updateParams.failReason = null;
|
||||
updateParams.failTime = null; // 时间类型字段使用null
|
||||
updateParams.failPhase = null; // 整数类型字段使用0
|
||||
|
||||
// 将失败的步骤状态改回2（未完成）
|
||||
if (taskDetails.nodes && Array.isArray(taskDetails.nodes)) {
|
||||
@ -1582,6 +1600,12 @@ const getTaskStatusClass = (status) => {
|
||||
border-color: #ffccc7;
|
||||
}
|
||||
|
||||
.tag-incomplete {
|
||||
background-color: #f5f5f5;
|
||||
color: #999;
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
|
||||
.task-details {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@ -1862,10 +1886,14 @@ const getTaskStatusClass = (status) => {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.status-failed {
|
||||
.status-unknown {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.status-failed {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1200px) {
|
||||
.task-cards {
|
||||
|
||||
@ -145,7 +145,7 @@
|
||||
</div> -->
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-1">
|
||||
<span class="text-gray-600">解决效率</span>
|
||||
<span class="text-gray-600">问题解决效率</span>
|
||||
<span class="font-medium text-gray-800">{{ timelinessRate }}%</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
|
||||
@ -394,7 +394,7 @@ const initPieChart = () => {
|
||||
},
|
||||
data: [
|
||||
{ value: completionRate.value, name: '巡检完成率', itemStyle: { color: '#409eff' } },
|
||||
{ value: timelinessRate.value, name: '解决效率', itemStyle: { color: '#67c23a' } }
|
||||
{ value: timelinessRate.value, name: '问题解决效率', itemStyle: { color: '#67c23a' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -434,12 +434,12 @@ const fetchDashboardData = async () => {
|
||||
// 根据时间范围确定type参数：1是月，2是周，3是日
|
||||
let type;
|
||||
if (timeRange.value === 'month') {
|
||||
type = 1;
|
||||
type = 3;
|
||||
} else if (timeRange.value === 'week') {
|
||||
type = 2;
|
||||
} else {
|
||||
// day
|
||||
type = 3;
|
||||
type = 1;
|
||||
}
|
||||
|
||||
// 构建查询参数
|
||||
@ -654,46 +654,7 @@ const handleInspectionManagement3 = () => {
|
||||
}
|
||||
|
||||
/* 导航栏样式 */
|
||||
.navigation-tabs {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 12px 24px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-tab:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.nav-tab:hover {
|
||||
color: #409eff;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.nav-tab.active {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
/* 已移除未使用的导航样式（模板中为注释状态） */
|
||||
|
||||
/* 选项卡样式 */
|
||||
.tabs-wrapper {
|
||||
|
||||
@ -23,26 +23,25 @@
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-container">
|
||||
<div class="filter-item">
|
||||
<el-input v-model="keyword" placeholder="关键字(任务名/对象/执行人)" clearable @keyup.enter="handleSearch" />
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="taskStatus" placeholder="任务状态">
|
||||
<el-option label="待执行" value="pending"></el-option>
|
||||
<el-option label="执行中" value="executing"></el-option>
|
||||
<el-option label="已延期" value="delayed"></el-option>
|
||||
<el-option label="已完成" value="completed"></el-option>
|
||||
<el-option label="待处理" value="1"></el-option>
|
||||
<el-option label="处理中" value="3"></el-option>
|
||||
<el-option label="已完成" value="4"></el-option>
|
||||
<el-option label="已延期" value="2"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="planType" placeholder="全部计划">
|
||||
<el-option label="每日巡检计划" value="daily"></el-option>
|
||||
<el-option label="每周巡检计划" value="weekly"></el-option>
|
||||
<el-option label="每月巡检计划" value="monthly"></el-option>
|
||||
<el-select v-model="executor" placeholder="执行人" :disabled="loadingUsers">
|
||||
<el-option v-for="user in usersList" :key="user.id" :label="user.name" :value="user.id" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-input v-model="executor" placeholder="执行人"></el-input>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
|
||||
<el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
|
||||
<el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -387,7 +386,7 @@
|
||||
<div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
|
||||
</div>
|
||||
<div class="step-status" :class="getStatusClass(node.status)">
|
||||
{{ node.status === '2' ? '未完成' : '已完成' }}
|
||||
{{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -429,11 +428,17 @@ import { xjrenwuDetail, xjrenwulist, addxjrenwu, updatexjrenwu } from '@/api/zhi
|
||||
import { xunjianUserlist, xunjianlist } from '@/api/zhinengxunjian/xunjian/index';
|
||||
import { addjiedian } from '@/api/zhinengxunjian/jiedian/index';
|
||||
import { ElMessage, ElLoading, ElForm } from 'element-plus';
|
||||
import { formatDate } from '@/utils/index';
|
||||
|
||||
// 筛选条件
|
||||
const taskStatus = ref('');
|
||||
const planType = ref('');
|
||||
const executor = ref('');
|
||||
const keyword = ref('');
|
||||
|
||||
// 执行人列表相关
|
||||
const usersList = ref([]);
|
||||
const loadingUsers = ref(false);
|
||||
|
||||
// 任务数据 - 初始为空数组，通过API获取
|
||||
const tasks = ref([]);
|
||||
@ -462,9 +467,9 @@ const getStatusClass = (status) => {
|
||||
const statusStr = status?.toString() || '';
|
||||
const statusClassMap = {
|
||||
'1': 'status-pending',
|
||||
'2': 'status-delayed',
|
||||
'3': 'status-executing',
|
||||
'4': 'status-completed'
|
||||
'2': 'status-unknown', // 未完成状态显示为灰色
|
||||
'3': 'status-failed', // 失败状态显示为红色
|
||||
'4': 'status-completed' // 已完成状态显示为绿色
|
||||
};
|
||||
return statusClassMap[statusStr] || 'status-unknown';
|
||||
};
|
||||
@ -543,16 +548,17 @@ const getTaskList = async () => {
|
||||
const params = {
|
||||
pageSize: pageSize.value,
|
||||
pageNum: currentPage.value,
|
||||
personId: 1,
|
||||
taskType: taskStatus.value || undefined, // 任务状态
|
||||
planType: planType.value || undefined, // 计划类型
|
||||
personName: executor.value || undefined // 执行人
|
||||
projectId: 1,
|
||||
status: taskStatus.value || undefined,
|
||||
planType: planType.value || undefined,
|
||||
personId: executor.value || undefined,
|
||||
keyword: keyword.value.trim() || undefined
|
||||
};
|
||||
|
||||
const response = await xjrenwulist(params);
|
||||
|
||||
if (response.code === 200 && response.rows) {
|
||||
tasks.value = response.rows.map((item) => {
|
||||
const mapped = response.rows.map((item) => {
|
||||
// 获取原始数据中的id
|
||||
const taskId = item.id || '';
|
||||
if (!taskId) {
|
||||
@ -603,13 +609,16 @@ const getTaskList = async () => {
|
||||
|
||||
return task;
|
||||
});
|
||||
|
||||
total.value = response.total || tasks.value.length;
|
||||
|
||||
// 搜索后如果没有结果，显示提示信息
|
||||
if (tasks.value.length === 0) {
|
||||
ElMessage.info('未找到符合条件的任务');
|
||||
}
|
||||
const kw = keyword.value.trim();
|
||||
const filtered = kw
|
||||
? mapped.filter((t) =>
|
||||
[t.title, t.target, t.executor, t.relatedPlan, t.statusText]
|
||||
.filter(Boolean)
|
||||
.some((v) => String(v).toLowerCase().includes(kw.toLowerCase()))
|
||||
)
|
||||
: mapped;
|
||||
tasks.value = filtered;
|
||||
total.value = kw ? filtered.length : response.total || filtered.length;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取巡检任务数据失败:', error);
|
||||
@ -623,6 +632,7 @@ const getTaskList = async () => {
|
||||
// 页面加载时获取数据
|
||||
onMounted(() => {
|
||||
getTaskList();
|
||||
getUsersList();
|
||||
});
|
||||
|
||||
// 分页相关
|
||||
@ -809,7 +819,7 @@ const handleSaveTask = async () => {
|
||||
|
||||
createTime: new Date().toISOString(),
|
||||
updateTime: new Date().toISOString(),
|
||||
startTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
|
||||
startTime: formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss'),
|
||||
params: {
|
||||
property1: 'string',
|
||||
property2: 'string'
|
||||
@ -874,11 +884,13 @@ const planList = ref([]);
|
||||
|
||||
// 获取负责人列表
|
||||
const getUsersList = async () => {
|
||||
loadingUsers.value = true;
|
||||
try {
|
||||
const response = await xunjianUserlist();
|
||||
// 适配新接口格式：检查code为200且rows为数组
|
||||
const userRows = response.code === 200 && response.rows && Array.isArray(response.rows) ? response.rows : [];
|
||||
|
||||
// 更新userList变量（用于创建任务弹窗）
|
||||
userList.value = userRows
|
||||
.filter((item) => item && typeof item === 'object')
|
||||
.map((item) => ({
|
||||
@ -886,12 +898,27 @@ const getUsersList = async () => {
|
||||
value: String(item.userId || '') // 使用userId作为唯一标识
|
||||
}));
|
||||
|
||||
// 同时更新usersList变量（用于筛选栏）
|
||||
usersList.value = userRows
|
||||
.filter((item) => item && typeof item === 'object')
|
||||
.map((item) => ({
|
||||
id: String(item.userId || ''),
|
||||
name: item.userName || '未知用户'
|
||||
}));
|
||||
|
||||
// 空数据处理
|
||||
if (userList.value.length === 0) {
|
||||
userList.value = [{ label: '默认用户', value: 'default' }];
|
||||
}
|
||||
if (usersList.value.length === 0) {
|
||||
usersList.value = [{ id: 'default', name: '默认用户' }];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取负责人列表失败:', error);
|
||||
userList.value = [{ label: '默认用户', value: 'default' }];
|
||||
usersList.value = [{ id: 'default', name: '默认用户' }];
|
||||
} finally {
|
||||
loadingUsers.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
@ -1045,7 +1072,7 @@ const handleAction = async (task) => {
|
||||
const updateData = {
|
||||
...originalTask.rawData,
|
||||
id: task.id,
|
||||
startTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
|
||||
startTime: formatDate(new Date().toString()),
|
||||
taskType: '3', // 3表示执行中
|
||||
status: 'executing',
|
||||
taskProgress: 0
|
||||
@ -1072,14 +1099,7 @@ const handleAction = async (task) => {
|
||||
|
||||
const originalTask = tasks.value[taskIndex];
|
||||
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(now.getDate()).padStart(2, '0');
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(now.getSeconds()).padStart(2, '0');
|
||||
const finishTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
const finishTime = formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss');
|
||||
|
||||
const updateData = {
|
||||
...originalTask.rawData,
|
||||
@ -1463,166 +1483,6 @@ const handleAction = async (task) => {
|
||||
}
|
||||
}
|
||||
|
||||
/* 任务详情弹窗样式 */
|
||||
.task-detail-container {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 步骤条展示样式 */
|
||||
.step-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
padding: 12px;
|
||||
background-color: #fafafa;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.step-item:hover {
|
||||
background-color: #f5f7fa;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-color: #409eff;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-name {
|
||||
font-weight: 500;
|
||||
color: #1d2129;
|
||||
margin-bottom: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.step-purpose {
|
||||
color: #606266;
|
||||
margin-bottom: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.step-time,
|
||||
.step-finish-time,
|
||||
.step-remark {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.step-status {
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 步骤状态样式 */
|
||||
.step-status.status-pending {
|
||||
background-color: #e6f7ff;
|
||||
color: #1677ff;
|
||||
border: 1px solid #91d5ff;
|
||||
}
|
||||
|
||||
.step-status.status-executing {
|
||||
background-color: #fffbe6;
|
||||
color: #fa8c16;
|
||||
border: 1px solid #ffe58f;
|
||||
}
|
||||
|
||||
.step-status.status-completed {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
border: 1px solid #b7eb8f;
|
||||
}
|
||||
|
||||
.step-status.status-delayed {
|
||||
background-color: #fff2f0;
|
||||
color: #ff4d4f;
|
||||
border: 1px solid #ffccc7;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
background-color: #fafafa;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 0 0 16px 0;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
flex: 1;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.info-item.full-width {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #303133;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.fail-reason {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.no-info {
|
||||
color: #909399;
|
||||
font-style: italic;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.loading-details {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
/* 状态颜色样式 */
|
||||
.status-pending {
|
||||
color: #e6a23c;
|
||||
|
||||
@ -24,6 +24,9 @@
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-container">
|
||||
<div class="filter-item">
|
||||
<el-input v-model="keyword" placeholder="关键字(标题/描述/创建人)" clearable @keyup.enter="handleSearch" />
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="workOrderType" placeholder="工单类型" clearable>
|
||||
<el-option label="全部类型" value="all"></el-option>
|
||||
@ -36,8 +39,8 @@
|
||||
<div class="filter-item">
|
||||
<el-select v-model="workOrderStatus" placeholder="全部状态" clearable>
|
||||
<el-option label="全部状态" value="all"></el-option>
|
||||
<el-option label="待派单" value="accepted"></el-option>
|
||||
<el-option label="待处理" value="pending"></el-option>
|
||||
<el-option label="待派单" value="pending"></el-option>
|
||||
<el-option label="已派单" value="accepted"></el-option>
|
||||
<el-option label="执行中" value="executing"></el-option>
|
||||
<el-option label="已完成" value="completed"></el-option>
|
||||
</el-select>
|
||||
@ -55,6 +58,7 @@
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch">搜索</el-button>
|
||||
<el-button icon="Refresh" class="create-btn" @click="resetFilters">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -83,26 +87,54 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 横向进度时间线 - 使用Element Plus的Steps组件 -->
|
||||
<div class="progress-timeline-container">
|
||||
<div class="progress-timeline">
|
||||
<el-steps direction="horizontal" :active="activeStepIndex" align-center class="custom-steps" :progress-dot="false">
|
||||
<template v-if="trackingSteps.length > 0">
|
||||
<el-step v-for="(step, index) in trackingSteps" :key="step.id" :title="step.name" :status="getStatusByIndex(index)">
|
||||
<template #description>
|
||||
<div class="step-description">
|
||||
<div class="step-person-time">
|
||||
{{ step.executor || (step.getOrderPersonVo && step.getOrderPersonVo.userName) || '待分配' }}
|
||||
</div>
|
||||
<template v-if="step.intendedTime">
|
||||
<div class="step-person-time">预期时间：{{ formatDateTime(step.intendedTime) }}</div>
|
||||
</template>
|
||||
<div class="step-content">预期目的：{{ step.intendedPurpose || '-' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-step>
|
||||
</template>
|
||||
</el-steps>
|
||||
<!-- 进度条设计 -->
|
||||
<div class="tracking-progress-container" v-if="currentTrackedWorkOrder">
|
||||
<!-- 进度条整体容器 -->
|
||||
<div class="progress-bar-wrapper">
|
||||
<!-- 进度条背景 -->
|
||||
<div class="progress-bar-background"></div>
|
||||
<!-- 进度条填充 -->
|
||||
<div class="progress-bar-fill" :style="{ width: getProgressPercentage() + '%' }"></div>
|
||||
<!-- 进度条节点 -->
|
||||
<div class="progress-bar-nodes">
|
||||
<div
|
||||
v-for="(step, index) in trackingSteps"
|
||||
:key="step.id"
|
||||
class="progress-node"
|
||||
:class="getStepStatusClass(index)"
|
||||
:style="{ left: getNodePosition(index) + '%' }"
|
||||
>
|
||||
<div class="node-circle">
|
||||
<div class="node-icon">{{ step.code || index + 1 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 步骤信息显示 -->
|
||||
<div class="progress-steps-info">
|
||||
<div v-for="(step, index) in trackingSteps" :key="step.id" class="step-info-card" :class="getStepStatusClass(index)">
|
||||
<div class="step-header">
|
||||
<div class="step-number">{{ step.code || index + 1 }}</div>
|
||||
<div class="step-name">{{ step.name }}</div>
|
||||
</div>
|
||||
<div class="step-details">
|
||||
<div class="step-person">
|
||||
<i class="el-icon-user"></i>
|
||||
{{ step.executor || (step.getOrderPersonVo && step.getOrderPersonVo.userName) || '待分配' }}
|
||||
</div>
|
||||
<template v-if="step.intendedTime">
|
||||
<div class="step-time">
|
||||
<i class="el-icon-time"></i>
|
||||
预期时间：{{ formatDateTime(step.intendedTime) }}
|
||||
</div>
|
||||
</template>
|
||||
<div class="step-purpose">
|
||||
<i class="el-icon-document"></i>
|
||||
预期目的：{{ step.intendedPurpose || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -140,6 +172,11 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="creator" label="创建人" min-width="100"></el-table-column>
|
||||
<el-table-column align="center" prop="progress" label="工单进度" min-width="100">
|
||||
<template #default="scope">
|
||||
<el-progress :percentage="parseFloat(scope.row.progress) || 0" show-text />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="createTime" label="创建时间" min-width="140"></el-table-column>
|
||||
<el-table-column align="center" prop="deadline" label="截止时间" min-width="140"></el-table-column>
|
||||
<el-table-column align="center" prop="status" label="状态" min-width="100">
|
||||
@ -296,13 +333,6 @@
|
||||
<el-form-item label="工单描述">
|
||||
<el-input v-model="createForm.resultDescription" type="textarea" :rows="3" placeholder="请描述该工单完成后预期达成的成果" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="是否需要执行人" prop="needAssignee">
|
||||
<el-radio-group v-model="createForm.needAssignee">
|
||||
<el-radio label="true">是，指定执行人</el-radio>
|
||||
<el-radio label="false">否，由系统分配</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
@ -445,7 +475,7 @@
|
||||
<div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
|
||||
</div>
|
||||
<div class="step-status" :class="getStatusClass(node.status)">
|
||||
{{ node.status === '2' ? '未完成' : '已完成' }}
|
||||
{{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
|
||||
</div>
|
||||
<!-- 连接线 -->
|
||||
<div v-if="index < detailData.nodes.length - 1" class="step-connector" :class="{ 'connector-completed': node.status !== '2' }"></div>
|
||||
@ -526,6 +556,7 @@ import ImageUpload from '@/components/ImageUpload/index.vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
|
||||
// 筛选条件
|
||||
const keyword = ref('');
|
||||
const workOrderType = ref('all');
|
||||
const workOrderStatus = ref('all');
|
||||
const priority = ref('all');
|
||||
@ -568,7 +599,8 @@ const fetchWorkOrderList = async () => {
|
||||
getOrderTime: item.getOrderTime ? formatDate(item.getOrderTime) : '',
|
||||
finishiOrderTime: item.finishiOrderTime ? formatDate(item.finishiOrderTime) : '',
|
||||
position: item.position || '',
|
||||
device: item.device || ''
|
||||
device: item.device || '',
|
||||
progress: item.progress // 添加进度字段
|
||||
}));
|
||||
|
||||
// 更新总条数
|
||||
@ -613,7 +645,8 @@ const updateCurrentTrackedOrder = () => {
|
||||
intendedTime: node.intendedTime,
|
||||
finishTime: node.finishTime,
|
||||
intendedPurpose: node.intendedPurpose || '-',
|
||||
remark: node.remark || ''
|
||||
remark: node.remark || '',
|
||||
status: node.status || '' // 添加status字段
|
||||
}));
|
||||
} else {
|
||||
// 如果nodes数组为空，创建一些默认的步骤数据
|
||||
@ -621,13 +654,12 @@ const updateCurrentTrackedOrder = () => {
|
||||
}
|
||||
|
||||
// 设置当前激活步骤索引
|
||||
// 如果有实际的完成时间，我们可以基于此设置激活步骤
|
||||
// 否则默认设置为第一个步骤
|
||||
// 根据status字段判断，status='1'表示完成，status='2'表示未完成，status='3'表示失败
|
||||
activeStepIndex.value = 0;
|
||||
|
||||
// 检查是否有已完成的步骤，如果有，将激活步骤设置为最后一个已完成步骤的下一个
|
||||
for (let i = trackingSteps.value.length - 1; i >= 0; i--) {
|
||||
if (trackingSteps.value[i].finishTime) {
|
||||
if (trackingSteps.value[i].status === '1') {
|
||||
activeStepIndex.value = Math.min(i + 1, trackingSteps.value.length - 1);
|
||||
break;
|
||||
}
|
||||
@ -797,8 +829,10 @@ const refreshTrackingSteps = async () => {
|
||||
|
||||
// 根据索引获取步骤状态
|
||||
const getStatusByIndex = (index) => {
|
||||
if (!currentTrackedWorkOrder.value) return 'wait';
|
||||
|
||||
if (index < activeStepIndex.value) {
|
||||
return 'success';
|
||||
return 'finish';
|
||||
} else if (index === activeStepIndex.value) {
|
||||
return 'process';
|
||||
} else {
|
||||
@ -806,6 +840,101 @@ const getStatusByIndex = (index) => {
|
||||
}
|
||||
};
|
||||
|
||||
// 试验记录页面步骤条状态判断 - 重点跟踪区域专用
|
||||
const getStepStatusClass = (index) => {
|
||||
if (!currentTrackedWorkOrder.value) return 'pending';
|
||||
|
||||
const step = trackingSteps.value[index];
|
||||
if (step) {
|
||||
// 优先根据status字段判断状态
|
||||
const status = step.status?.toString() || '';
|
||||
|
||||
if (status === '1') {
|
||||
return 'completed'; // 完成状态 - 绿色
|
||||
} else if (status === '3') {
|
||||
return 'delayed'; // 失败状态 - 红色
|
||||
} else if (status === '2') {
|
||||
return 'pending'; // 未完成状态 - 灰色
|
||||
}
|
||||
}
|
||||
|
||||
// fallback到基于索引的判断逻辑
|
||||
if (index < activeStepIndex.value) {
|
||||
return 'completed';
|
||||
} else if (index === activeStepIndex.value) {
|
||||
return 'active';
|
||||
} else {
|
||||
return 'pending';
|
||||
}
|
||||
};
|
||||
|
||||
// 获取进度线状态 - 重点跟踪区域专用
|
||||
const getLineStatusClass = (index) => {
|
||||
if (!currentTrackedWorkOrder.value) return 'pending';
|
||||
|
||||
// 进度线状态与前一个步骤状态保持一致
|
||||
const prevStepIndex = index;
|
||||
const prevStep = trackingSteps.value[prevStepIndex];
|
||||
|
||||
if (prevStep) {
|
||||
const status = prevStep.status?.toString() || '';
|
||||
|
||||
if (status === '1') {
|
||||
return 'completed'; // 前一步骤已完成 - 绿色
|
||||
} else if (status === '3') {
|
||||
return 'delayed'; // 前一步骤失败 - 红色
|
||||
}
|
||||
}
|
||||
|
||||
// fallback到基于索引的判断逻辑
|
||||
if (index < activeStepIndex.value) {
|
||||
return 'completed';
|
||||
} else {
|
||||
return 'pending';
|
||||
}
|
||||
};
|
||||
|
||||
// 计算进度百分比
|
||||
const getProgressPercentage = () => {
|
||||
if (!currentTrackedWorkOrder.value || trackingSteps.value.length === 0) return 0;
|
||||
|
||||
// 优先使用API返回的progress字段值
|
||||
if (currentTrackedWorkOrder.value.progress) {
|
||||
try {
|
||||
// 将字符串类型的progress转换为数字
|
||||
const progressValue = parseFloat(currentTrackedWorkOrder.value.progress);
|
||||
// 确保进度值在0-100之间
|
||||
return Math.min(Math.max(progressValue, 0), 100);
|
||||
} catch (error) {
|
||||
console.warn('解析progress字段失败，使用默认计算逻辑:', error);
|
||||
// 解析失败时使用原有逻辑
|
||||
}
|
||||
}
|
||||
|
||||
// 计算已完成步骤数
|
||||
const completedSteps = trackingSteps.value.filter((step) => step.status === '1').length;
|
||||
|
||||
// 如果没有已完成步骤，但有活跃步骤，则使用活跃步骤的位置
|
||||
if (completedSteps === 0 && activeStepIndex.value >= 0) {
|
||||
return (activeStepIndex.value / trackingSteps.value.length) * 100;
|
||||
}
|
||||
|
||||
// 计算进度百分比
|
||||
const percentage = (completedSteps / trackingSteps.value.length) * 100;
|
||||
|
||||
// 确保最大为100%
|
||||
return Math.min(percentage, 100);
|
||||
};
|
||||
|
||||
// 计算节点位置百分比
|
||||
const getNodePosition = (index) => {
|
||||
if (!currentTrackedWorkOrder.value || trackingSteps.value.length <= 1) return 0;
|
||||
|
||||
// 等距分布节点
|
||||
const position = (index / (trackingSteps.value.length - 1)) * 100;
|
||||
return position;
|
||||
};
|
||||
|
||||
// 将状态码转换为可读的状态文本
|
||||
const getStatusText = (statusCode) => {
|
||||
const statusMap = {
|
||||
@ -837,6 +966,18 @@ const pagedTableData = computed(() => {
|
||||
// 筛选逻辑
|
||||
let filteredData = [...rawTableData.value];
|
||||
|
||||
if (keyword.value && keyword.value.trim()) {
|
||||
const kw = keyword.value.trim();
|
||||
filteredData = filteredData.filter((item) => {
|
||||
return (
|
||||
(item.title && item.title.includes(kw)) ||
|
||||
(item.description && item.description.includes(kw)) ||
|
||||
(item.creator && item.creator.includes(kw)) ||
|
||||
(item.orderNo && item.orderNo.includes(kw))
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
if (workOrderType.value !== 'all') {
|
||||
// 转换筛选条件为显示文本进行匹配
|
||||
let typeText = '';
|
||||
@ -862,10 +1003,10 @@ const pagedTableData = computed(() => {
|
||||
let statusText = '';
|
||||
switch (workOrderStatus.value) {
|
||||
case 'accepted':
|
||||
statusText = '已接单';
|
||||
statusText = '已派单';
|
||||
break;
|
||||
case 'pending':
|
||||
statusText = '待处理';
|
||||
statusText = '待派单';
|
||||
break;
|
||||
case 'executing':
|
||||
statusText = '执行中';
|
||||
@ -949,10 +1090,10 @@ const getStatusClass = (status) => {
|
||||
// 处理可能的数字输入
|
||||
const statusStr = status?.toString() || '';
|
||||
const statusClassMap = {
|
||||
'1': 'status-pending',
|
||||
'2': 'status-delayed',
|
||||
'3': 'status-executing',
|
||||
'4': 'status-completed'
|
||||
'1': 'status-pending', // 待执行 - 蓝色
|
||||
'2': 'status-unknown', // 未执行 - 灰色
|
||||
'3': 'status-failed', // 失败 - 红色
|
||||
'4': 'status-completed' // 已完成 - 绿色
|
||||
};
|
||||
return statusClassMap[statusStr] || 'status-unknown';
|
||||
};
|
||||
@ -990,6 +1131,16 @@ const handleSearch = () => {
|
||||
currentPage.value = 1; // 重置到第一页
|
||||
};
|
||||
|
||||
// 重置筛选
|
||||
const resetFilters = () => {
|
||||
keyword.value = '';
|
||||
workOrderType.value = 'all';
|
||||
workOrderStatus.value = 'all';
|
||||
priority.value = 'all';
|
||||
createDate.value = '';
|
||||
currentPage.value = 1;
|
||||
};
|
||||
|
||||
// 分页事件
|
||||
const handleSizeChange = (val) => {
|
||||
pageSize.value = val;
|
||||
@ -1282,6 +1433,25 @@ const handleEdit = async (row) => {
|
||||
createForm.resultDescription = workOrderDetail.results || '';
|
||||
createForm.needAssignee = !!workOrderDetail.executor;
|
||||
|
||||
// 根据工单状态设置进度
|
||||
// 1: 待派单, 2: 已派单, 3: 执行中, 4: 已完成, 5: 已拒绝
|
||||
switch (workOrderDetail.status) {
|
||||
case '1':
|
||||
createForm.progress = 0;
|
||||
break;
|
||||
case '2':
|
||||
createForm.progress = 25;
|
||||
break;
|
||||
case '3':
|
||||
createForm.progress = 50;
|
||||
break;
|
||||
case '4':
|
||||
createForm.progress = 100;
|
||||
break;
|
||||
default:
|
||||
createForm.progress = 0;
|
||||
}
|
||||
|
||||
// 填充步骤数据：从nodes数组中提取并按code排序
|
||||
if (workOrderDetail.nodes && Array.isArray(workOrderDetail.nodes)) {
|
||||
// 复制nodes数组并按code升序排序
|
||||
@ -1343,7 +1513,8 @@ const createForm = reactive({
|
||||
file: '',
|
||||
fileList: [],
|
||||
resultDescription: '',
|
||||
needAssignee: 'false'
|
||||
needAssignee: 'false',
|
||||
progress: 0
|
||||
});
|
||||
|
||||
const createFormRules = {
|
||||
@ -1473,7 +1644,8 @@ const submitCreate = async () => {
|
||||
createBy: '',
|
||||
handlerDept: '',
|
||||
handler: '',
|
||||
handlerName: ''
|
||||
handlerName: '',
|
||||
progress: createForm.progress || 0
|
||||
};
|
||||
|
||||
// 编辑操作：调用updategongdan接口
|
||||
@ -1493,6 +1665,8 @@ const submitCreate = async () => {
|
||||
createForm[key] = [{ name: '', intendedPurpose: '', intendedTime: '' }];
|
||||
} else if (key === 'fileList') {
|
||||
createForm[key] = [];
|
||||
} else if (key === 'progress') {
|
||||
createForm[key] = 0;
|
||||
} else {
|
||||
createForm[key] = '';
|
||||
}
|
||||
@ -1523,6 +1697,8 @@ const cancelCreate = () => {
|
||||
createForm[key] = [{ name: '', intendedPurpose: '', intendedTime: '' }];
|
||||
} else if (key === 'fileList') {
|
||||
createForm[key] = [];
|
||||
} else if (key === 'progress') {
|
||||
createForm[key] = 0;
|
||||
} else {
|
||||
createForm[key] = '';
|
||||
}
|
||||
@ -1738,10 +1914,6 @@ const handleCloseDetailDialog = () => {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.step-connector.connector-completed {
|
||||
background: linear-gradient(to bottom, #52c41a, #73d13d);
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
@ -2046,46 +2218,7 @@ const handleCloseDetailDialog = () => {
|
||||
}
|
||||
|
||||
/* 导航栏样式 */
|
||||
.navigation-tabs {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 12px 24px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-tab:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.nav-tab:hover {
|
||||
color: #409eff;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.nav-tab.active {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
/* 导航栏相关样式移除（对应模板已注释） */
|
||||
|
||||
/* 弹窗样式 */
|
||||
.create-dialog {
|
||||
@ -2566,17 +2699,7 @@ const handleCloseDetailDialog = () => {
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.4);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(22, 93, 255, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(22, 93, 255, 0);
|
||||
}
|
||||
}
|
||||
/* 重复的 pulse 动画移除（下方已存在统一定义） */
|
||||
|
||||
.custom-steps {
|
||||
padding: 20px 10px;
|
||||
@ -2977,17 +3100,7 @@ const handleCloseDetailDialog = () => {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.custom-steps::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
|
||||
z-index: 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
/* 去重：自定义步骤条顶部装饰在下方统一块中定义 */
|
||||
|
||||
/* 重点跟踪区域样式 */
|
||||
.tracking-section {
|
||||
@ -3205,17 +3318,7 @@ const handleCloseDetailDialog = () => {
|
||||
}
|
||||
|
||||
/* 顶部装饰条 */
|
||||
.custom-steps::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 6px;
|
||||
background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
|
||||
border-radius: 6px 6px 0 0;
|
||||
box-shadow: 0 2px 12px rgba(22, 93, 255, 0.2);
|
||||
}
|
||||
/* 去重：自定义步骤条顶部装饰重复定义移除 */
|
||||
|
||||
/* 背景装饰 */
|
||||
.custom-steps::after {
|
||||
@ -3231,30 +3334,10 @@ const handleCloseDetailDialog = () => {
|
||||
}
|
||||
|
||||
/* 左侧装饰 */
|
||||
.custom-steps::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 6px;
|
||||
background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
|
||||
border-radius: 6px 6px 0 0;
|
||||
box-shadow: 0 2px 12px rgba(22, 93, 255, 0.2);
|
||||
}
|
||||
/* 去重：重复 before 装饰定义移除 */
|
||||
|
||||
/* 右侧装饰 */
|
||||
.custom-steps::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 6px;
|
||||
background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
|
||||
border-radius: 6px 6px 0 0;
|
||||
box-shadow: 0 2px 12px rgba(22, 93, 255, 0.2);
|
||||
}
|
||||
/* 去重：重复 before 装饰定义移除 */
|
||||
|
||||
/* 左侧装饰球 */
|
||||
.custom-steps::before {
|
||||
@ -3296,13 +3379,299 @@ const handleCloseDetailDialog = () => {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 重点跟踪区域进度条样式 */
|
||||
.tracking-progress-container {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 进度条包装器 */
|
||||
.progress-bar-wrapper {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 进度条背景 */
|
||||
.progress-bar-background {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 6px;
|
||||
background-color: #e5e7eb;
|
||||
border-radius: 3px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* 进度条填充 */
|
||||
.progress-bar-fill {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
height: 6px;
|
||||
background: linear-gradient(90deg, #00b42a, #95de64);
|
||||
border-radius: 3px;
|
||||
transition: width 0.6s ease;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* 进度条节点容器 */
|
||||
.progress-bar-nodes {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 进度条节点 */
|
||||
.progress-node {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* 节点圆圈 */
|
||||
.node-circle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
border: 2px solid #e5e7eb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 节点图标/数字 */
|
||||
.node-icon {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* 步骤信息卡片容器 */
|
||||
.progress-steps-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 单个步骤信息卡片 */
|
||||
.step-info-card {
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
max-width: 250px;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #f0f0f0;
|
||||
background-color: #fff;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 步骤卡片头部 */
|
||||
.step-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 步骤数字 */
|
||||
.step-info-card .step-number {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: #e5e7eb;
|
||||
color: #6b7280;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/* 步骤名称 */
|
||||
.step-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
/* 步骤详情 */
|
||||
.step-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.step-details > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.step-details i {
|
||||
margin-right: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 已完成状态样式 - 绿色 */
|
||||
.step-info-card.completed {
|
||||
border-color: #00b42a;
|
||||
background-color: #f6ffed;
|
||||
}
|
||||
|
||||
.step-info-card.completed .step-number {
|
||||
background-color: #00b42a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.progress-node.completed .node-circle {
|
||||
border-color: #00b42a;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.progress-node.completed .node-icon {
|
||||
background-color: #00b42a;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 进行中状态样式 */
|
||||
.step-info-card.active {
|
||||
border-color: #165dff;
|
||||
background-color: #f0f7ff;
|
||||
box-shadow: 0 4px 12px rgba(22, 93, 255, 0.1);
|
||||
}
|
||||
|
||||
.step-info-card.active .step-number {
|
||||
background-color: #165dff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.progress-node.active .node-circle {
|
||||
border-color: #165dff;
|
||||
background-color: #fff;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.progress-node.active .node-icon {
|
||||
background-color: #165dff;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 待处理状态样式 */
|
||||
.step-info-card.pending {
|
||||
border-color: #e5e7eb;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 失败/逾期状态样式 */
|
||||
.step-info-card.delayed {
|
||||
border-color: #ff4d4f;
|
||||
background-color: #fff2f0;
|
||||
}
|
||||
|
||||
.step-info-card.delayed .step-number {
|
||||
background-color: #ff4d4f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.progress-node.delayed .node-circle {
|
||||
border-color: #ff4d4f;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.progress-node.delayed .node-icon {
|
||||
background-color: #ff4d4f;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 脉冲动画 */
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.4);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(22, 93, 255, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(22, 93, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.tracking-progress-timeline .progress-step.completed .step-number {
|
||||
background-color: #00b42a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tracking-progress-timeline .progress-line.completed {
|
||||
background-color: #00b42a;
|
||||
}
|
||||
|
||||
.tracking-progress-timeline .progress-step.delayed .step-number {
|
||||
background-color: #dc2626;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tracking-progress-timeline .progress-line.delayed {
|
||||
background-color: #dc2626;
|
||||
}
|
||||
|
||||
.tracking-progress-timeline .step-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #1f2329;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tracking-progress-timeline .step-info {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tracking-progress-timeline .step-person-time {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.tracking-progress-timeline .step-purpose {
|
||||
margin-top: 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.custom-step:hover {
|
||||
transform: translateY(-8px);
|
||||
filter: brightness(1.03);
|
||||
}
|
||||
|
||||
/* 步骤连接线 */
|
||||
.custom-step:not(:last-child)::after {
|
||||
/* 步骤连接线 - 默认（进行中） */
|
||||
.custom-step:not(:last-child):not(.is-wait)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
@ -3314,6 +3683,12 @@ const handleCloseDetailDialog = () => {
|
||||
box-shadow: 0 2px 8px rgba(22, 93, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 已完成步骤连接线 */
|
||||
.custom-step.completed:not(:last-child)::after {
|
||||
background: linear-gradient(90deg, #00b42a 0%, #95de64 100%);
|
||||
box-shadow: 0 2px 8px rgba(0, 180, 42, 0.3);
|
||||
}
|
||||
|
||||
/* 待处理步骤连接线 */
|
||||
.custom-step.is-wait:not(:last-child)::after {
|
||||
background: linear-gradient(90deg, #dcdfe6 0%, #e4e7ed 100%);
|
||||
|
||||
Reference in New Issue
Block a user