优化
This commit is contained in:
@ -227,3 +227,39 @@ export const byProjectIdDetail = (id) => {
|
||||
method: 'get'
|
||||
});
|
||||
};
|
||||
|
||||
// 新增项目打卡范围
|
||||
export const addAttendanceRange = (data) => {
|
||||
return request({
|
||||
url: '/project/projectPunchrange',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 删除项目打卡范围
|
||||
export const delAttendanceRange = (id) => {
|
||||
return request({
|
||||
url: '/project/projectPunchrange/' + id,
|
||||
method: 'delete'
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 修改项目打卡范围
|
||||
export const updateAttendanceRange = (data) => {
|
||||
return request({
|
||||
url: '/project/projectPunchrange',
|
||||
method: 'put',
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 查询项目打卡范围列表
|
||||
export const getAttendanceRangeList = (data) => {
|
||||
return request({
|
||||
url: '/project/projectPunchrange/list',
|
||||
method: 'get',
|
||||
params: data
|
||||
});
|
||||
};
|
||||
66
src/api/projectScreen/index.ts
Normal file
66
src/api/projectScreen/index.ts
Normal file
@ -0,0 +1,66 @@
|
||||
import request from '@/utils/request';
|
||||
import { AxiosPromise } from 'axios';
|
||||
|
||||
// 查询生项目天气
|
||||
export const getScreenWeather = (projectId: number | string) => {
|
||||
return request({
|
||||
url: '/project/big/screen/weather/' + projectId,
|
||||
method: 'get',
|
||||
});
|
||||
};
|
||||
|
||||
// 查询项目安全天数
|
||||
export const getScreenSafetyDay = (projectId: number | string) => {
|
||||
return request({
|
||||
url: '/project/big/screen/safetyDay/' + projectId,
|
||||
method: 'get',
|
||||
});
|
||||
};
|
||||
|
||||
// 查询项目公告
|
||||
export const getScreenNews = (projectId: number | string) => {
|
||||
return request({
|
||||
url: '/project/big/screen/news/' + projectId,
|
||||
method: 'get',
|
||||
});
|
||||
};
|
||||
|
||||
// 查询项目土地统计
|
||||
export const getScreenLand = (projectId: number | string) => {
|
||||
return request({
|
||||
url: '/project/big/screen/' + projectId,
|
||||
method: 'get',
|
||||
});
|
||||
};
|
||||
|
||||
// 查询项目形象进度
|
||||
export const getScreenImgProcess = (projectId: number | string) => {
|
||||
return request({
|
||||
url: '/project/big/screen/imageProgress/' + projectId,
|
||||
method: 'get',
|
||||
});
|
||||
};
|
||||
|
||||
// 查询项目人员情况
|
||||
export const getScreenPeople = (projectId: number | string) => {
|
||||
return request({
|
||||
url: '/project/big/screen/people/' + projectId,
|
||||
method: 'get',
|
||||
});
|
||||
};
|
||||
|
||||
// 查询项目AI安全巡检
|
||||
export const getScreenSafetyInspection = (projectId: number | string) => {
|
||||
return request({
|
||||
url: '/project/big/screen/safetyInspection/' + projectId,
|
||||
method: 'get',
|
||||
});
|
||||
};
|
||||
|
||||
// 查询项目概况
|
||||
export const getScreenGeneralize = (projectId: number | string) => {
|
||||
return request({
|
||||
url: '/project/big/screen/generalize/' + projectId,
|
||||
method: 'get',
|
||||
});
|
||||
};
|
||||
5
src/api/projectScreen/types.ts
Normal file
5
src/api/projectScreen/types.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export interface TableQuery extends PageQuery {
|
||||
tableName: string;
|
||||
tableComment: string;
|
||||
dataName: string;
|
||||
}
|
||||
BIN
src/assets/projectLarge/center.png
Normal file
BIN
src/assets/projectLarge/center.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 248 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 652 B |
Binary file not shown.
|
Before Width: | Height: | Size: 665 B |
Binary file not shown.
|
Before Width: | Height: | Size: 104 KiB |
@ -1,26 +1,27 @@
|
||||
<template>
|
||||
<div class="centerPage">
|
||||
<div class="topPage">
|
||||
<!-- 暂无 -->
|
||||
<div id="earth" style="width: 100%;height: 100%;"></div>
|
||||
</div>
|
||||
<div class="endPage">
|
||||
<Title title="AI安全巡检" :prefix="true" />
|
||||
|
||||
<div class="swiper">
|
||||
<div class="endPage" :class="{ 'slide-out-down': isHide }">
|
||||
<Title title="AI安全巡检">
|
||||
<img src="@/assets/projectLarge/robot.svg" alt="" height="20px" width="20px">
|
||||
</Title>
|
||||
<div class="swiper" v-if="inspectionList.length">
|
||||
<div class="arrow" :class="{ 'canUse': canLeft }" @click="swiperClick('left')">
|
||||
<el-icon size="16" color="skyblue">
|
||||
<el-icon size="16" :color="canLeft ? 'rgba(29, 214, 255, 1)' : 'rgba(29, 214, 255, 0.3)'">
|
||||
<ArrowLeft />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="swiper_content" ref="swiperContent">
|
||||
<div class="swiper_item" v-for="(item, index) in swiperList" :key="index">
|
||||
<img src="@/assets/projectLarge/swiper.png" alt="" class="swiper_img">
|
||||
<div class="swiper_date">{{ item.date }}</div>
|
||||
<div class="swiper_tip">{{ item.tip }}</div>
|
||||
<div class="swiper_item" v-for="(item, i) in inspectionList" :key="i">
|
||||
<img :src="item.picture" alt="安全巡检" class="swiper_img">
|
||||
<div class="swiper_date">{{ item.createTime.slice(5) }}</div>
|
||||
<div class="swiper_tip">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="arrow" :class="{ 'canUse': canRight }" @click="swiperClick('right')">
|
||||
<el-icon size="16">
|
||||
<el-icon size="16" :color="canRight ? 'rgba(29, 214, 255, 1)' : 'rgba(29, 214, 255, 0.3)'">
|
||||
<ArrowRight />
|
||||
</el-icon>
|
||||
</div>
|
||||
@ -29,31 +30,39 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
<script setup>
|
||||
import { ref, onMounted, toRefs, getCurrentInstance } from "vue"
|
||||
import Title from './title.vue'
|
||||
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
|
||||
import { getScreenSafetyInspection } from '@/api/projectScreen'
|
||||
|
||||
const swiperList = ref([
|
||||
{ date: '03-18 15:00', tip: '未佩戴安全帽1' },
|
||||
{ date: '03-18 15:00', tip: '未佩戴安全帽2' },
|
||||
{ date: '03-18 15:00', tip: '未佩戴安全帽3' },
|
||||
{ date: '03-18 15:00', tip: '未佩戴安全帽4' },
|
||||
{ date: '03-18 15:00', tip: '未佩戴安全帽5' },
|
||||
{ date: '03-18 15:00', tip: '未佩戴安全帽6' },
|
||||
{ date: '03-18 15:00', tip: '未佩戴安全帽7' },
|
||||
{ date: '03-18 15:00', tip: '未佩戴安全帽8' },
|
||||
{ date: '03-18 15:00', tip: '未佩戴安全帽9' },
|
||||
{ date: '03-18 15:00', tip: '未佩戴安全帽10' },
|
||||
{ date: '03-18 15:00', tip: '未佩戴安全帽11' },
|
||||
{ date: '03-18 15:00', tip: '未佩戴安全帽12' },
|
||||
])
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { violation_level_type } = toRefs(proxy?.useDict('violation_level_type'));
|
||||
|
||||
const swiperContent = ref<HTMLDivElement>()
|
||||
const props = defineProps({
|
||||
isHide: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
projectId: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
})
|
||||
|
||||
const inspectionList = ref([{
|
||||
id: "",
|
||||
label: "",
|
||||
picture: "",
|
||||
createTime: ""
|
||||
}])
|
||||
const swiperContent = ref()
|
||||
const swiperItemWidth = ref(100)
|
||||
const canLeft = ref(false)
|
||||
const canRight = ref(true)
|
||||
|
||||
const swiperClick = (direction: 'left' | 'right') => {
|
||||
const swiperClick = (direction) => {
|
||||
if (!swiperContent.value) return
|
||||
|
||||
if (direction === 'right') {
|
||||
if (swiperContent.value.scrollLeft >= swiperContent.value.scrollWidth - swiperContent.value.clientWidth) {
|
||||
@ -70,10 +79,76 @@ const swiperClick = (direction: 'left' | 'right') => {
|
||||
}
|
||||
swiperContent.value.scrollLeft -= swiperItemWidth.value
|
||||
}
|
||||
|
||||
// 更新箭头状态
|
||||
canLeft.value = swiperContent.value.scrollLeft > 0
|
||||
canRight.value = swiperContent.value.scrollLeft < swiperContent.value.scrollWidth - swiperContent.value.clientWidth
|
||||
}
|
||||
|
||||
const getInspectionList = async () => {
|
||||
const res = await getScreenSafetyInspection(props.projectId)
|
||||
const { code, data } = res
|
||||
if (code === 200) {
|
||||
data.map(item => {
|
||||
item.label = violation_level_type.value.find((i) => i.value === item.violationType)?.label
|
||||
})
|
||||
inspectionList.value = data
|
||||
}
|
||||
}
|
||||
// 创建地球
|
||||
const createEarth = () => {
|
||||
window.YJ.on({
|
||||
ws: true,
|
||||
// host: getIP(), //资源所在服务器地址
|
||||
// username: this.loginForm.username, //用户名 可以不登录（不填写用户名），不登录时无法加载服务端的数据
|
||||
// password: md5pass, //密码 生成方式：md5(用户名_密码)
|
||||
}).then((res) => {
|
||||
let earth = new YJ.YJEarth("earth");
|
||||
window.Earth1 = earth;
|
||||
YJ.Global.openRightClick(window.Earth1);
|
||||
YJ.Global.openLeftClick(window.Earth1);
|
||||
let view = {
|
||||
"position": {
|
||||
"lng": 102.03643298211526,
|
||||
"lat": 34.393586474501,
|
||||
"alt": 11298179.51993155
|
||||
},
|
||||
"orientation": {
|
||||
"heading": 360,
|
||||
"pitch": -89.94481747201486,
|
||||
"roll": 0
|
||||
}
|
||||
}
|
||||
loadBaseMap(earth.viewer)
|
||||
// YJ.Global.flyTo(earth, view);
|
||||
// YJ.Global.setDefaultView(earth.viewer, view)
|
||||
})
|
||||
}
|
||||
// 加载底图
|
||||
const loadBaseMap = (viewer) => {
|
||||
// 创建瓦片提供器
|
||||
const imageryProvider = new Cesium.UrlTemplateImageryProvider({
|
||||
url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
|
||||
// 可选：设置瓦片的格式
|
||||
fileExtension: 'png',
|
||||
// 可选：设置瓦片的范围和级别
|
||||
minimumLevel: 0,
|
||||
maximumLevel: 18,
|
||||
// 可选：设置瓦片的投影（默认为Web Mercator）
|
||||
projection: Cesium.WebMercatorProjection,
|
||||
// 可选：如果瓦片服务需要跨域请求，设置请求头部
|
||||
credit: new Cesium.Credit('卫星图数据来源')
|
||||
});
|
||||
|
||||
// 添加图层到视图
|
||||
const layer = viewer.imageryLayers.addImageryProvider(imageryProvider);
|
||||
}
|
||||
onMounted(() => {
|
||||
swiperItemWidth.value = swiperContent.value.children[0].clientWidth + 20
|
||||
getInspectionList()
|
||||
createEarth()
|
||||
if (swiperContent.value && swiperContent.value.children.length > 0) {
|
||||
swiperItemWidth.value = swiperContent.value.children[0].clientWidth + 20
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
@ -82,24 +157,41 @@ onMounted(() => {
|
||||
.centerPage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 50vw;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.topPage,
|
||||
.endPage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
border: 1px solid rgba(29, 214, 255, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.topPage,
|
||||
.endPage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
border: 1px solid rgba(230, 247, 255, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.topPage {
|
||||
flex: 1;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
.topPage {
|
||||
flex: 1;
|
||||
margin-bottom: 23px;
|
||||
transition: flex 0.5s ease;
|
||||
}
|
||||
|
||||
.endPage {
|
||||
max-height: 300px;
|
||||
opacity: 1;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
/* 向下滑出动画 */
|
||||
.slide-out-down {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
@ -161,14 +253,20 @@ onMounted(() => {
|
||||
.arrow {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid skyblue;
|
||||
border: 1px solid rgba(29, 214, 255, 0.3);
|
||||
color: skyblue;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:canUse {
|
||||
color: #000 !important;
|
||||
&.canUse {
|
||||
border: 1px solid rgba(29, 214, 255, 1);
|
||||
}
|
||||
|
||||
&:hover:not(.canUse) {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
</div>
|
||||
<div style="font-size: 12px; padding-left: 10px">安全生产天数：</div>
|
||||
<div class="header_left_text">
|
||||
1,235
|
||||
{{ safetyDay }}
|
||||
<span style="font-size: 12px">天</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -14,16 +14,18 @@
|
||||
<div>XXX智慧工地管理平台</div>
|
||||
<div>XXX Smart Construction Stic Management Dashboard</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="header_right">
|
||||
<div class="top-bar">
|
||||
<!-- 左侧：天气图标 + 日期文字 -->
|
||||
<div class="left-section">
|
||||
<img src="@/assets/large/weather.png" alt="天气图标" />
|
||||
|
||||
<span>
|
||||
<span>多云 9°/18°</span>
|
||||
<span style="padding-left: 20px"> {{ week[date.week] }} ({{ date.ymd }})</span>
|
||||
</span>
|
||||
<div class="weather-list" @mouseenter="requestPause" @mouseleave="resumeScroll">
|
||||
<div v-for="(item, i) in weatherList" :key="i" class="weather-item"
|
||||
:style="{ transform: `translateY(-${offsetY}px)`, transition: transition }">
|
||||
<img :src="`../../../src/assets/images/${item.icon}.png`" alt="" />
|
||||
<div>{{ item.weather }}{{ item.tempMin }}°/{{ item.tempMax }}°</div>
|
||||
<div>{{ item.week }}({{ item.date }})</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分割线 -->
|
||||
<div class="divider">
|
||||
@ -35,48 +37,155 @@
|
||||
<img src="@/assets/large/setting.png" alt="设置图标" />
|
||||
<span>管理系统</span>
|
||||
</div>
|
||||
<!-- 分割线 -->
|
||||
<div class="divider">
|
||||
<div class="top-block"></div>
|
||||
<div class="bottom-block"></div>
|
||||
</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">
|
||||
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||||
const date = ref({
|
||||
ymd: '',
|
||||
hms: '',
|
||||
week: 0
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { getScreenSafetyDay, getScreenWeather } from '@/api/projectScreen';
|
||||
|
||||
interface Weather {
|
||||
week: string;
|
||||
date: string;
|
||||
icon: string;
|
||||
weather: string;
|
||||
tempMax: string;
|
||||
tempMin: string;
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
projectId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isFull: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['changePage'])
|
||||
|
||||
const safetyDay = ref<number>(0);
|
||||
const weatherList = ref<Weather[]>([])
|
||||
const timer = ref<number | null>(0)
|
||||
const offsetY = ref<number>(0)
|
||||
const curIndex = ref(0)
|
||||
const transition = ref('transform 0.5s ease');
|
||||
const pendingPause = ref(false);
|
||||
|
||||
/**
|
||||
* 判断当前时间是白天/夜晚
|
||||
*/
|
||||
function judgeDayOrNight(sunRise: string, sunSet: string) {
|
||||
// 将 "HH:MM" 格式转为分钟数（便于计算）
|
||||
const timeToMinutes = (timeStr: any) => {
|
||||
const [hours, minutes] = timeStr.split(':').map(Number);
|
||||
return isNaN(hours) || isNaN(minutes) ? 0 : hours * 60 + minutes;
|
||||
};
|
||||
// 转换日出、日落时间为分钟数
|
||||
const sunRiseMinutes = timeToMinutes(sunRise);
|
||||
const sunSetMinutes = timeToMinutes(sunSet);
|
||||
// 获取当前时间并转为分钟数
|
||||
const now = new Date();
|
||||
const currentMinutes = now.getHours() * 60 + now.getMinutes();
|
||||
// true 白天 false 夜晚
|
||||
return currentMinutes >= sunRiseMinutes && currentMinutes <= sunSetMinutes
|
||||
? true
|
||||
: false;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置天气周期滑动
|
||||
*/
|
||||
const setWeatherScroll = () => {
|
||||
curIndex.value += 1
|
||||
transition.value = 'transform 0.3s ease';
|
||||
offsetY.value = curIndex.value * 60
|
||||
|
||||
if (curIndex.value === weatherList.value.length - 1) {
|
||||
setTimeout(() => {
|
||||
transition.value = 'none';
|
||||
curIndex.value = 0;
|
||||
offsetY.value = 0;
|
||||
}, 350);
|
||||
}
|
||||
}
|
||||
|
||||
function startScroll() {
|
||||
if (timer.value) clearInterval(timer.value);
|
||||
timer.value = window.setInterval(setWeatherScroll, 5000);
|
||||
}
|
||||
|
||||
function requestPause() {
|
||||
if (timer.value) {
|
||||
clearInterval(timer.value)
|
||||
timer.value = null
|
||||
}
|
||||
pendingPause.value = true;
|
||||
}
|
||||
|
||||
function resumeScroll() {
|
||||
console.log('resumeScroll')
|
||||
pendingPause.value = false;
|
||||
startScroll();
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
/**
|
||||
* 获取安全生产天数
|
||||
*/
|
||||
getScreenSafetyDay(props.projectId).then(res => {
|
||||
const { data, code } = res
|
||||
if (code === 200) {
|
||||
safetyDay.value = data.safetyDay;
|
||||
}
|
||||
})
|
||||
/**
|
||||
* 获取近三天天气
|
||||
*/
|
||||
getScreenWeather(props.projectId).then(res => {
|
||||
const { data, code } = res
|
||||
if (code === 200) {
|
||||
data.forEach(item => {
|
||||
if (judgeDayOrNight(item.sunRise, item.sunSet)) {
|
||||
item.weather = item.dayStatus
|
||||
item.icon = item.dayIcon
|
||||
} else {
|
||||
item.weather = item.nightStatus
|
||||
item.icon = item.nightIcon
|
||||
}
|
||||
})
|
||||
weatherList.value = data
|
||||
// 多添加第一项 实现无缝衔接
|
||||
weatherList.value = [...weatherList.value, weatherList.value[0]]
|
||||
startScroll()
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const setTime = () => {
|
||||
let date1 = new Date();
|
||||
let year: any = date1.getFullYear();
|
||||
let month: any = date1.getMonth() + 1;
|
||||
let day: any = date1.getDate();
|
||||
let hours: any = date1.getHours();
|
||||
if (hours < 10) {
|
||||
hours = '0' + hours;
|
||||
}
|
||||
let minutes: any = date1.getMinutes();
|
||||
if (minutes < 10) {
|
||||
minutes = '0' + minutes;
|
||||
}
|
||||
let seconds: any = date1.getSeconds();
|
||||
if (seconds < 10) {
|
||||
seconds = '0' + seconds;
|
||||
}
|
||||
date.value.ymd = year + '-' + month + '-' + day;
|
||||
date.value.hms = hours + ':' + minutes + ':' + seconds;
|
||||
date.value.week = date1.getDay();
|
||||
};
|
||||
|
||||
// 添加定时器，每秒更新一次时间
|
||||
const timer = setInterval(setTime, 1000);
|
||||
|
||||
// 组件卸载时清除定时器
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
});
|
||||
if (timer.value) {
|
||||
clearInterval(timer.value)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -107,6 +216,12 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.header_right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #fff;
|
||||
font-family: 'AlimamaShuHeiTi', sans-serif;
|
||||
@ -124,12 +239,6 @@ onUnmounted(() => {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* 顶部栏容器：Flex 水平布局 + 垂直居中 */
|
||||
.top-bar {
|
||||
width: 100%;
|
||||
@ -137,7 +246,6 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
// background-color: #1e2128;
|
||||
color: #fff;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
@ -145,24 +253,37 @@ onUnmounted(() => {
|
||||
|
||||
/* 左侧区域（天气 + 日期）：自身也用 Flex 水平排列，确保元素在一行 */
|
||||
.left-section {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// margin-right: auto; /* 让右侧元素（管理系统）居右 */
|
||||
}
|
||||
|
||||
.left-section img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
/* 图标与文字间距 */
|
||||
.weather-list {
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
|
||||
.weather-item {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&>div:last-child {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 分割线（视觉分隔，可根据需求调整样式） */
|
||||
.divider {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
height: 100%;
|
||||
/* 根据需要调整高度 */
|
||||
gap: 2px;
|
||||
padding: 14px 10px;
|
||||
}
|
||||
|
||||
@ -195,4 +316,11 @@ onUnmounted(() => {
|
||||
margin-right: 6px;
|
||||
/* 图标与文字间距 */
|
||||
}
|
||||
|
||||
.change {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,30 +2,53 @@
|
||||
<div class="leftPage">
|
||||
<div class="topPage">
|
||||
<Title title="项目公告" />
|
||||
|
||||
<div class="content">
|
||||
<div class="content_item" v-for="item in 6" :key="item">
|
||||
<div class="round">
|
||||
<div class="sub_round"></div>
|
||||
<div class="content_item" v-for="item in news" :key="item.id">
|
||||
<img src="@/assets/projectLarge/round.svg" alt="">
|
||||
<div class="ellipsis">
|
||||
{{ item.title }}
|
||||
<span @click="showNewsDetail(item)" style="color: rgba(138, 149, 165, 1);">{{ item.id === newId ? '关闭' :
|
||||
'查看' }}</span>
|
||||
</div>
|
||||
<div class="ellipsis">2025年6月23日 重庆市两江新区广场前期准备与审批完毕区广场前期准备与审批完毕前期准备与审批完毕区广场前期准备与审批完毕</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detailBox" :class="{'show': newId}">
|
||||
<!-- <div class="detail_title">{{ newDetail.title }}</div> -->
|
||||
<div class="detail_content" v-html="newDetail.content"></div>
|
||||
</div>
|
||||
|
||||
<div class="endPage">
|
||||
<Title title="人员情况" />
|
||||
|
||||
<div class="map">
|
||||
<img src="@/assets/projectLarge/map.svg" alt="">
|
||||
<!-- <div ref="mapChartRef"></div> -->
|
||||
</div>
|
||||
|
||||
<div class="attendance_tag">
|
||||
<div class="tag_item" v-for="(item, index) in tagList" :key="index">
|
||||
<div class="tag_item">
|
||||
<img src="@/assets/projectLarge/people.svg" alt="">
|
||||
<div class="tag_title">{{ item.title }}</div>
|
||||
<div class="tag_title">出勤人</div>
|
||||
<div class="tag_info">
|
||||
{{ item.number }}
|
||||
<span style="font-size: 14px;">{{ index === 2 ? '%' : '人' }}</span>
|
||||
{{ attendanceCount }}
|
||||
<span style="font-size: 14px;">人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag_item">
|
||||
<img src="@/assets/projectLarge/people.svg" alt="">
|
||||
<div class="tag_title">在岗人</div>
|
||||
<div class="tag_info">
|
||||
{{ peopleCount }}
|
||||
<span style="font-size: 14px;">人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag_item">
|
||||
<img src="@/assets/projectLarge/people.svg" alt="">
|
||||
<div class="tag_title">出勤率</div>
|
||||
<div class="tag_info">
|
||||
{{ attendanceRate }}
|
||||
<span style="font-size: 14px;">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -37,11 +60,11 @@
|
||||
<div class="attendance_item_title">出勤率</div>
|
||||
<div class="attendance_item_title">出勤时间</div>
|
||||
</div>
|
||||
<div v-for="item in list" :key="item.title" class="attendance_item">
|
||||
<div class="attendance_item_title">{{ item.title }}</div>
|
||||
<div class="attendance_item_number">{{ item.number }} <span class="subfont">人/{{ item.number }}</span></div>
|
||||
<div v-for="item in teamAttendanceList" :key="item.id" class="attendance_item">
|
||||
<div class="attendance_item_title">{{ item.teamName }}</div>
|
||||
<div class="attendance_item_number">{{ item.attendanceNumber }} <span class="subfont">人/{{ item.allNumber }}</span></div>
|
||||
<div class="attendance_item_rate">{{ item.attendanceRate }} %</div>
|
||||
<div class="attendance_item_date subfont">{{ item.date }}</div>
|
||||
<div class="attendance_item_date subfont">{{ item.attendanceTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -51,29 +74,101 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import Title from './title.vue'
|
||||
import { getScreenNews, getScreenPeople } from '@/api/projectScreen';
|
||||
import { mapOption } from './optionList'
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const list = ref([
|
||||
{ title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
|
||||
{ title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
|
||||
{ title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
|
||||
{ title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
|
||||
{ title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
|
||||
{ title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
|
||||
const props = defineProps({
|
||||
projectId: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
let mapChart = null
|
||||
const mapChartRef = ref<HTMLDivElement | null>(null);
|
||||
const news = ref([])
|
||||
const newDetail = ref({
|
||||
title: '',
|
||||
content: ''
|
||||
})
|
||||
const newId = ref('')
|
||||
const attendanceCount = ref(0)
|
||||
const attendanceRate = ref(0)
|
||||
const peopleCount = ref(0)
|
||||
const teamAttendanceList = ref([
|
||||
{ id: "", teamName: "", attendanceNumber: 0, allNumber: 0, attendanceRate: 0, attendanceTime: "" },
|
||||
])
|
||||
|
||||
const tagList = ref([
|
||||
{ title: '出勤人数', number: 259 },
|
||||
{ title: '在岗人数', number: 100 },
|
||||
{ title: '出勤率', number: 100 },
|
||||
])
|
||||
/**
|
||||
* 显示新闻详情
|
||||
*/
|
||||
const showNewsDetail = (item: any) => {
|
||||
if (newId.value === item.id) {
|
||||
newId.value = ''
|
||||
return
|
||||
}
|
||||
newDetail.value = item
|
||||
newId.value = item.id
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取项目人员出勤数据
|
||||
*/
|
||||
const getPeopleData = async () => {
|
||||
const res = await getScreenPeople(props.projectId);
|
||||
const { data, code } = res
|
||||
if (code === 200) {
|
||||
attendanceCount.value = data.attendanceCount
|
||||
attendanceRate.value = data.attendanceRate
|
||||
peopleCount.value = data.peopleCount
|
||||
teamAttendanceList.value = data.teamAttendanceList
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取项目新闻数据
|
||||
*/
|
||||
const getNewsData = async () => {
|
||||
const res = await getScreenNews(props.projectId);
|
||||
const { data, code } = res
|
||||
if (code === 200) {
|
||||
news.value = data
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化地图
|
||||
*/
|
||||
const initMapChart = () => {
|
||||
if (!mapChartRef.value) {
|
||||
return;
|
||||
}
|
||||
mapChart = echarts.init(mapChartRef.value);
|
||||
mapChart.setOption(mapOption);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// nextTick(() => {
|
||||
// initMapChart();
|
||||
// });
|
||||
getPeopleData()
|
||||
getNewsData()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
// if (mapChart) {
|
||||
// mapChart.dispose();
|
||||
// mapChart = null;
|
||||
// }
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.leftPage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: calc(25vw - 30px);
|
||||
margin: 0 15px;
|
||||
height: 100%;
|
||||
|
||||
.topPage,
|
||||
@ -115,11 +210,11 @@ const tagList = ref([
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
// position: relative;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(230, 247, 255, 1);
|
||||
cursor: pointer;
|
||||
|
||||
.ellipsis {
|
||||
display: -webkit-box;
|
||||
@ -134,21 +229,8 @@ const tagList = ref([
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.round {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
img {
|
||||
margin-top: 3px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: rgba(29, 214, 255, 0.3);
|
||||
|
||||
.sub_round {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #1DD6FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -201,4 +283,45 @@ const tagList = ref([
|
||||
.subfont {
|
||||
color: rgba(138, 149, 165, 1);
|
||||
}
|
||||
|
||||
.detailBox {
|
||||
position: absolute;
|
||||
left: 20vw;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
padding: 0 15px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
|
||||
&.show {
|
||||
left: 25vw;
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.detailBox::before {
|
||||
content: '';
|
||||
/* 绝对定位相对于父元素 */
|
||||
position: absolute;
|
||||
/* 定位到左侧中间位置 */
|
||||
left: -10px;
|
||||
top: 50%;
|
||||
/* 垂直居中 */
|
||||
transform: translateY(-50%);
|
||||
/* 利用边框创建三角形 */
|
||||
border-width: 10px 10px 10px 0;
|
||||
border-style: solid;
|
||||
/* 三角形颜色与背景匹配，左侧边框透明 */
|
||||
border-color: transparent rgba(255, 255, 255, 0.2) transparent transparent;
|
||||
/* 确保三角形在内容下方 */
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,153 @@
|
||||
export let pieOption = {
|
||||
// 定义中心文字
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: '40%',
|
||||
style: {
|
||||
// 需要从接口替换
|
||||
text: '70%',
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
fill: '#fff'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: '50%',
|
||||
style: {
|
||||
text: '总进度',
|
||||
fontSize: 14,
|
||||
fill: '#fff'
|
||||
}
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
show: true,
|
||||
type: 'plain',
|
||||
bottom: 20,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: {
|
||||
type: 'pie',
|
||||
data: [],
|
||||
radius: [50, 80],
|
||||
center: ['50%', '45%'],
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
label: {
|
||||
alignTo: 'edge',
|
||||
formatter: '{name|{b}}\n{percent|{c} %}',
|
||||
minMargin: 10,
|
||||
edgeDistance: 20,
|
||||
lineHeight: 15,
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 12,
|
||||
color: '#fff'
|
||||
},
|
||||
percent: {
|
||||
fontSize: 12,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 'bottom'
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
export let barOption = {
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
// 调整文字与图标间距
|
||||
data: ['计划流转面积', '已流转面积'],
|
||||
top: 0,
|
||||
right: 20,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['地块1', '地块2', '地块3', '地块4', '地块5', '地块6'],
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '单位：m²',
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
bottom: 0, // 距离容器底部的距离
|
||||
containLabel: true // 确保坐标轴标签不被裁剪
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '计划流转面积',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
barWidth: '20%',
|
||||
itemStyle: {
|
||||
color: 'rgb(29, 253, 253)'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '已流转面积',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
barWidth: '20%',
|
||||
itemStyle: {
|
||||
color: 'rgb(25, 181, 251)'
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export let mapOption = {
|
||||
geo: {
|
||||
map: 'ch',
|
||||
roam: true,
|
||||
aspectScale: Math.cos((47 * Math.PI) / 180),
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'graph',
|
||||
coordinateSystem: 'geo',
|
||||
data: [
|
||||
{ name: 'a', value: [7.667821250000001, 46.791734269956265] },
|
||||
{ name: 'b', value: [7.404848750000001, 46.516308805996054] },
|
||||
{ name: 'c', value: [7.376673125000001, 46.24728858538375] },
|
||||
{ name: 'd', value: [8.015320625000001, 46.39460918238572] },
|
||||
{ name: 'e', value: [8.616400625, 46.7020608630855] },
|
||||
{ name: 'f', value: [8.869981250000002, 46.37539345234199] },
|
||||
{ name: 'g', value: [9.546196250000001, 46.58676648282309] },
|
||||
{ name: 'h', value: [9.311399375, 47.182454114178896] },
|
||||
{ name: 'i', value: [9.085994375000002, 47.55395822835779] },
|
||||
{ name: 'j', value: [8.653968125000002, 47.47709530818285] },
|
||||
{ name: 'k', value: [8.203158125000002, 47.44506909144329] }
|
||||
],
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@ -2,21 +2,14 @@
|
||||
<div class="leftPage">
|
||||
<div class="topPage">
|
||||
<Title title="项目概况" />
|
||||
|
||||
<div class="content">
|
||||
<div class="content_item">项目名称：智慧生态工地社区开发项目</div>
|
||||
<div class="content_item">项目位置：贵州省贵阳市乌当区（具体地块编号：01-123-11）</div>
|
||||
<div class="content_item">占地面积：约10000亩</div>
|
||||
<div class="content_item"> 土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
|
||||
</div>
|
||||
<div class="content" v-html="generalize"></div>
|
||||
</div>
|
||||
<div class="endPage">
|
||||
<!-- 饼图容器 -->
|
||||
<Title title="形象进度" />
|
||||
|
||||
<div ref="pieChartRef" class="echart" />
|
||||
<!-- 折线图容器 -->
|
||||
<div ref="lineChartRef" class="echart" />
|
||||
<div class="chart_container">
|
||||
<div ref="pieChartRef" class="echart" />
|
||||
<div ref="lineChartRef" class="echart" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -25,149 +18,45 @@
|
||||
import { ref, onMounted, onUnmounted, nextTick } from "vue"
|
||||
import Title from './title.vue'
|
||||
import * as echarts from 'echarts';
|
||||
import { pieOption, barOption } from './optionList';
|
||||
import { getScreenLand, getScreenImgProcess, getScreenGeneralize } from '@/api/projectScreen';
|
||||
|
||||
const props = defineProps({
|
||||
projectId: {
|
||||
type: String,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
|
||||
const generalize = ref()
|
||||
// 饼图相关
|
||||
const pieChartRef = ref<HTMLDivElement | null>(null);
|
||||
let pieChart: any = null;
|
||||
|
||||
const totalPercent = ref(0)
|
||||
// 折线图相关
|
||||
const lineChartRef = ref<HTMLDivElement | null>(null);
|
||||
let lineChart: any = null;
|
||||
|
||||
// 土地数据 折线图
|
||||
const designAreaData = ref([])
|
||||
const transferAreaData = ref([])
|
||||
// 饼图数据
|
||||
const pieData = [
|
||||
{ name: '桩点浇筑', value: 13 },
|
||||
{ name: '水泥灌注', value: 7 },
|
||||
{ name: '箱变安装', value: 40 },
|
||||
{ name: '支架安装', value: 20 },
|
||||
{ name: '组件安装', value: 20 },
|
||||
{ label: 'areaPercentage', name: '厂区', value: 0 },
|
||||
{ label: 'roadPercentage', name: '道路', value: 0 },
|
||||
{ label: 'collectorLinePercentage', name: '集电线路', value: 0 },
|
||||
{ label: 'exportLinePercentage', name: '送出线路', value: 0 },
|
||||
{ label: 'substationPercentage', name: '升压站', value: 0 },
|
||||
{ label: 'boxTransformerPercentage', name: '箱变', value: 0 },
|
||||
]
|
||||
|
||||
// 折线图数据
|
||||
const barData = {
|
||||
xAxis: ['地块1', '地块2', '地块3', '地块4', '地块5', '地块6'],
|
||||
series: [
|
||||
{
|
||||
name: '计划流转面积',
|
||||
data: [70, 25, 45, 115, 70, 85]
|
||||
},
|
||||
{
|
||||
name: '已流转面积',
|
||||
data: [105, 30, 150, 65, 80, 200]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// 饼图配置
|
||||
const pieOption = {
|
||||
series: {
|
||||
type: 'pie',
|
||||
data: pieData,
|
||||
radius: [50, 80],
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
label: {
|
||||
alignTo: 'edge',
|
||||
formatter: '{name|{b}}\n{percent|{c} %}',
|
||||
minMargin: 10,
|
||||
edgeDistance: 20,
|
||||
lineHeight: 15,
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 12,
|
||||
color: '#fff'
|
||||
},
|
||||
percent: {
|
||||
fontSize: 12,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 'bottom'
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
// 柱状图配置
|
||||
const barOption = {
|
||||
legend: {
|
||||
data: ['计划流转面积', '已流转面积'],
|
||||
top: 0
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: barData.xAxis
|
||||
},
|
||||
yAxis: {
|
||||
name: '单位：m²',
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: [], // 空数据，仅用于承载markArea
|
||||
markArea: {
|
||||
silent: true, // 背景不响应交互
|
||||
data: (() => {
|
||||
const groupCount = 3; // 共3组（6个月 ÷ 2）
|
||||
const groupWidth = 1.8; // 每组背景宽度（覆盖2根柱子）
|
||||
const bgData = [];
|
||||
|
||||
for (let i = 0; i < groupCount; i++) {
|
||||
const startX = i * 2 - 0.9; // 每组起始位置
|
||||
const endX = startX + groupWidth; // 每组结束位置
|
||||
bgData.push([
|
||||
{ xAxis: startX, yAxis: 0 },
|
||||
{ xAxis: endX, yAxis: 100 }
|
||||
]);
|
||||
}
|
||||
return bgData;
|
||||
})(),
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: 4
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '计划流转面积',
|
||||
type: 'bar',
|
||||
data: barData.series[0].data,
|
||||
barWidth: 15, // 柱形宽度
|
||||
itemStyle: {
|
||||
color: 'rgb(29, 253, 253)'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '已流转面积',
|
||||
type: 'bar',
|
||||
data: barData.series[1].data,
|
||||
barWidth: 15,
|
||||
itemStyle: {
|
||||
color: '#rgb(25, 181, 251)'
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 初始化饼图
|
||||
const initPieChart = () => {
|
||||
if (!pieChartRef.value) {
|
||||
console.error('未找到饼图容器元素');
|
||||
return;
|
||||
}
|
||||
pieOption.series.data = pieData
|
||||
pieOption.graphic[0].style.text = totalPercent.value + '%'
|
||||
pieChart = echarts.init(pieChartRef.value, null, {
|
||||
renderer: 'canvas',
|
||||
useDirtyRect: false
|
||||
@ -181,6 +70,8 @@ const initLineChart = () => {
|
||||
console.error('未找到折线图容器元素');
|
||||
return;
|
||||
}
|
||||
barOption.series[0].data = designAreaData.value
|
||||
barOption.series[1].data = transferAreaData.value
|
||||
lineChart = echarts.init(lineChartRef.value, null, {
|
||||
renderer: 'canvas',
|
||||
useDirtyRect: false
|
||||
@ -194,11 +85,52 @@ const handleResize = () => {
|
||||
if (lineChart) lineChart.resize();
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取项目土地统计数据
|
||||
*/
|
||||
const getScreenLandData = async () => {
|
||||
const res = await getScreenLand(props.projectId);
|
||||
const { data, code } = res
|
||||
if (code === 200) {
|
||||
designAreaData.value = data.map((item: any) => Number(item.designArea))
|
||||
transferAreaData.value = data.map((item: any) => Number(item.transferArea))
|
||||
initLineChart();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取项目形象进度数据
|
||||
*/
|
||||
const getScreenImgProcessData = async () => {
|
||||
const res = await getScreenImgProcess(props.projectId);
|
||||
const { data, code } = res
|
||||
if (code === 200) {
|
||||
totalPercent.value = data.totalPercentage
|
||||
pieData.forEach((item: any) => {
|
||||
item.value = data[item.label]
|
||||
})
|
||||
initPieChart()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取项目概况数据
|
||||
*/
|
||||
const getScreenGeneralizeData = async () => {
|
||||
const res = await getScreenGeneralize(props.projectId);
|
||||
const { data, code } = res
|
||||
if (code === 200) {
|
||||
generalize.value = data
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载时初始化图表
|
||||
onMounted(() => {
|
||||
getScreenLandData()
|
||||
getScreenImgProcessData()
|
||||
getScreenGeneralizeData()
|
||||
nextTick(() => {
|
||||
initPieChart();
|
||||
initLineChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
});
|
||||
@ -221,8 +153,6 @@ onUnmounted(() => {
|
||||
.leftPage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: calc(25vw - 30px);
|
||||
margin: 0 15px;
|
||||
height: 100%;
|
||||
|
||||
.topPage,
|
||||
@ -240,15 +170,37 @@ onUnmounted(() => {
|
||||
flex: 1;
|
||||
margin-top: 23px;
|
||||
|
||||
.echart {
|
||||
.chart_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.echart {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 10px 35px;
|
||||
max-height: 100px;
|
||||
margin: 0 15px;
|
||||
padding: 0 10px;
|
||||
margin-top: 15px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: rgba(204, 204, 204, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(29, 214, 255, 0.78);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.content_item {
|
||||
font-size: 14px;
|
||||
@ -262,12 +214,6 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.ellipse {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.subfont {
|
||||
color: rgba(138, 149, 165, 1);
|
||||
}
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
<img src="@/assets/projectLarge/section.svg" alt="">
|
||||
<img src="@/assets/projectLarge/border.svg" alt="">
|
||||
</div>
|
||||
<div v-if="prefix">
|
||||
<img src="@/assets/projectLarge/robot.svg" alt="" style="width: 20px; height: 20px;margin-right: 5px;">
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div>{{ title }}</div>
|
||||
</div>
|
||||
|
||||
@ -1,45 +1,108 @@
|
||||
<template>
|
||||
<div class="large-screen">
|
||||
<Header />
|
||||
<div class="large_screen">
|
||||
<Header :projectId="projectId" :isFull="isFull" @changePage="handleChangePage" />
|
||||
<div class="nav">
|
||||
<leftPage />
|
||||
<centerPage />
|
||||
<rightPage />
|
||||
<div class="nav_left" :style="{ left: isHideOther ? '-25vw' : '0' }">
|
||||
<leftPage :projectId="projectId" />
|
||||
</div>
|
||||
<div class="nav_center" :style="{ width: isFull ? '100%' : 'calc(50vw - 30px)' }">
|
||||
<centerPage :projectId="projectId" :isHide="isFull" />
|
||||
</div>
|
||||
<div class="nav_right" :style="{ right: isHideOther ? '-25vw' : '0' }">
|
||||
<rightPage :projectId="projectId" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import Header from './components/header.vue';
|
||||
import leftPage from './components/leftPage.vue';
|
||||
import centerPage from './components/centerPage.vue';
|
||||
import rightPage from './components/rightPage.vue';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
|
||||
const userStore = useUserStoreHook();
|
||||
const projectId = computed(() => userStore.selectedProject.id);
|
||||
const isFull = ref(false)
|
||||
const isHideOther = ref(false)
|
||||
|
||||
/**
|
||||
* 切换中心页面全屏
|
||||
*/
|
||||
const handleChangePage = () => {
|
||||
if (isFull.value) {
|
||||
isFull.value = false;
|
||||
setTimeout(() => {
|
||||
isHideOther.value = false;
|
||||
}, 500);
|
||||
} else {
|
||||
isFull.value = true;
|
||||
isHideOther.value = true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.large-screen {
|
||||
.large_screen {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: url('@/assets/large/bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-attachment: fixed;
|
||||
background-color: rgba(4, 7, 17, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 15rpx;
|
||||
width: 100%;
|
||||
height: calc(100vh - 100px);
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: calc(100vw - 30px);
|
||||
height: calc(100vh - 90px);
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav_left,
|
||||
.nav_right {
|
||||
margin: 0 15px 15px 15px;
|
||||
position: absolute;
|
||||
width: calc(25vw - 15px);
|
||||
height: 100%;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.nav_left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.nav_right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.nav_center {
|
||||
margin-bottom: 15px;
|
||||
height: 100%;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
/* 中间面板全屏动画 */
|
||||
.full-width {
|
||||
/* 取消flex增长，使用固定宽度 */
|
||||
width: calc(100vw - 30px);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.slide_left {
|
||||
left: -25vw;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide_right {
|
||||
right: -25vw;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -150,7 +150,7 @@
|
||||
<el-button link type="primary" icon="Edit" @click="handleCheckRules(scope.row)" v-hasPermi="['project:attendanceRule:byProjectId']"
|
||||
>打卡规则
|
||||
</el-button>
|
||||
<!-- <el-button link type="primary" icon="Edit" @click="handleScope(scope.row)" v-hasPermi="['project:project:edit']">打卡范围 </el-button> -->
|
||||
<el-button link type="primary" icon="Edit" @click="handleScope(scope.row)" v-hasPermi="['project:project:edit']">打卡范围 </el-button>
|
||||
<el-button link type="primary" icon="FolderOpened" @click="handleShowUpload(scope.row)" v-hasPermi="['project:project:edit']"
|
||||
>导入安全协议书
|
||||
</el-button>
|
||||
@ -367,23 +367,28 @@
|
||||
</el-dialog>
|
||||
<el-dialog draggable title="打卡范围" v-model="ScopeFlag" width="600">
|
||||
<div v-for="(item, i) of punchRangeList" :key="i" class="options_item">
|
||||
<el-row>
|
||||
<el-row style="margin-bottom: 10px;">
|
||||
<el-col :span="1"> <el-color-picker v-model="item.punchColor" show-alpha /></el-col>
|
||||
<el-col :span="12"> <el-input v-model="item.punchName" placeholder="请输入打卡范围名称" class="ml-8" /></el-col>
|
||||
<el-col :span="10" style="text-align: right; margin-top: 5px">
|
||||
<el-button link type="primary" icon="view">预览</el-button>
|
||||
<el-button link type="primary" icon="plus">添加</el-button>
|
||||
<el-button link type="primary" icon="delete">移除</el-button>
|
||||
<el-button v-if="item.id" link type="primary" icon="view" @click="previewPunchRange(item)">预览</el-button>
|
||||
<el-button v-if="item.id" link type="primary" icon="delete" @click="handleScopeDel(item)">移除</el-button>
|
||||
<el-button v-if="!item.id" link type="primary" icon="plus" @click="addPunchRange(item)">添加</el-button>
|
||||
<el-button v-if="item.id" link type="primary" icon="download" @click="handleScopeEdit(item)">保存</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="scopeSubmit"> 提交</el-button>
|
||||
<el-button type="primary" @click="scopeSubmit">确定</el-button>
|
||||
<el-button @click="ScopeFlag = false">取消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<CesiumEarthDialog ref="earthDialog" @send-data="handleEarthData"
|
||||
:position="position"
|
||||
:data="earthData"
|
||||
@close="handleEarthClose"></CesiumEarthDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -398,10 +403,17 @@ import {
|
||||
updateProject,
|
||||
attendanceRuleAdd,
|
||||
attendanceRuleEdit,
|
||||
byProjectIdDetail
|
||||
byProjectIdDetail,
|
||||
getAttendanceRangeList,
|
||||
updateAttendanceRange,
|
||||
delAttendanceRange
|
||||
} from '@/api/project/project';
|
||||
import { ProjectForm, ProjectQuery, ProjectVO, childProjectQuery, locationType } from '@/api/project/project/types';
|
||||
import amap from '@/components/amap/index.vue';
|
||||
import CesiumEarthDialog from "./map.vue"
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
const userStore = useUserStoreHook();
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { sys_normal_disable, project_category_type, project_type, project_stage } = toRefs<any>(
|
||||
proxy?.useDict('sys_normal_disable', 'project_category_type', 'project_type', 'project_stage')
|
||||
@ -424,6 +436,14 @@ const projectId = ref<string>('');
|
||||
const designId = ref<string>('');
|
||||
const ruleFlag = ref(false);
|
||||
const ScopeFlag = ref(false);
|
||||
const earthDialog = ref(null);
|
||||
const position = ref(''); //预览
|
||||
let earthData = reactive({
|
||||
projectId: '',
|
||||
punchName: '',
|
||||
punchColor: '#1983ff',
|
||||
punchRange: '',
|
||||
}); //传值给地图组件
|
||||
const punchRangeList = ref<any>([
|
||||
{
|
||||
punchName: '',
|
||||
@ -710,10 +730,48 @@ const handleSetChild = async () => {
|
||||
}
|
||||
};
|
||||
const handleScope = (row) => {
|
||||
console.log('row',row);
|
||||
// 打卡范围
|
||||
ScopeFlag.value = true;
|
||||
projectId.value = row.id;
|
||||
// 获取打卡范围列表
|
||||
getListScope(row.id);
|
||||
};
|
||||
// 获取打卡范围列表
|
||||
const getListScope = (id) => {
|
||||
punchRangeList.value = [{
|
||||
punchName: '',
|
||||
punchColor: '#1983ff'
|
||||
}];
|
||||
getAttendanceRangeList({ projectId: id, }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
punchRangeList.value.unshift(...res.rows);
|
||||
}
|
||||
});
|
||||
}
|
||||
// 修改打卡范围
|
||||
const handleScopeEdit = (row) => {
|
||||
updateAttendanceRange(row).then((res) => {
|
||||
if (res.code === 200) {
|
||||
proxy.$modal.msgSuccess('修改成功');
|
||||
// ScopeFlag.value = false;
|
||||
getListScope(projectId.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
// 删除打卡范围
|
||||
const handleScopeDel = (row) => {
|
||||
proxy.$modal.confirm('是否确认删除打卡范围？').then(() => {
|
||||
delAttendanceRange(row.id).then((res) => {
|
||||
if (res.code === 200) {
|
||||
proxy.$modal.msgSuccess('删除成功');
|
||||
getListScope(projectId.value);
|
||||
}
|
||||
});
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
|
||||
const scopeSubmit = () => {
|
||||
// 提交打卡范围
|
||||
};
|
||||
@ -761,7 +819,36 @@ const handleExport = () => {
|
||||
`project_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
};
|
||||
|
||||
// 打开绘制范围
|
||||
const addPunchRange = (item) => {
|
||||
earthData.punchName = item.punchName
|
||||
earthData.punchColor = item.punchColor
|
||||
earthData.projectId = projectId.value
|
||||
earthData.id = ''
|
||||
earthData.punchRange = ''
|
||||
if (earthData.punchName=='') {
|
||||
proxy.$modal.msgError('请先填写打卡范围名称');
|
||||
return
|
||||
}
|
||||
earthDialog.value.show()
|
||||
}
|
||||
// 接受绘制范围
|
||||
const handleEarthData = (data) => {
|
||||
ScopeFlag.value = false;
|
||||
}
|
||||
// 关闭绘制范围
|
||||
const handleEarthClose = () => {
|
||||
earthDialog.value.show = false
|
||||
}
|
||||
// 预览范围
|
||||
const previewPunchRange = (item)=>{
|
||||
earthData.id = item.id
|
||||
earthData.projectId = item.projectId
|
||||
earthData.punchName = item.punchName
|
||||
earthData.punchColor = item.punchColor
|
||||
earthData.punchRange = item.punchRange
|
||||
earthDialog.value.show()
|
||||
}
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
296
src/views/project/project/map.vue
Normal file
296
src/views/project/project/map.vue
Normal file
@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<el-dialog v-model="visible" title="地球可视化" :width="dialogWidth" :height="dialogHeight" :before-close="handleClose"
|
||||
destroy-on-close>
|
||||
<div v-loading="loading" id="earthMap" class="earth-container"></div>
|
||||
<template #footer>
|
||||
<el-button type="warning" @click="redraw">重新绘制</el-button>
|
||||
<el-button v-if="isDraw" type="success" @click="drawRange">绘制</el-button>
|
||||
<el-button type="primary" @click="handlesubmit">确定</el-button>
|
||||
<el-button type="danger" @click="handleClose">关闭</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, defineEmits, defineProps } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import {
|
||||
addAttendanceRange,
|
||||
updateAttendanceRange,
|
||||
} from '@/api/project/project';
|
||||
const emit = defineEmits(['send-data', 'close']);
|
||||
const props = defineProps({
|
||||
position: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
}
|
||||
});
|
||||
// 弹窗控制变量
|
||||
const visible = ref(false);
|
||||
const dialogWidth = ref('90%');
|
||||
const dialogHeight = ref('90%');
|
||||
let earthInstance = null;
|
||||
let earthContainer = ref(null);
|
||||
let loading = ref(true);
|
||||
let positions = ref([]);
|
||||
const entityObject = ref(null);
|
||||
const isDraw = ref(true);
|
||||
// 显示弹窗
|
||||
const show = () => {
|
||||
visible.value = true;
|
||||
console.log(props.data);
|
||||
if (props.data?.id) {
|
||||
console.log(231, props.data);
|
||||
isDraw.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭弹窗
|
||||
const handleClose = () => {
|
||||
visible.value = false;
|
||||
// 清除地球实例
|
||||
if (earthInstance && earthInstance.destroy) {
|
||||
earthInstance.destroy();
|
||||
earthInstance = null;
|
||||
}
|
||||
// 清除全局变量引用
|
||||
if (window.Earth2) {
|
||||
delete window.Earth2;
|
||||
}
|
||||
};
|
||||
|
||||
// 监听弹窗显示状态，初始化地球
|
||||
watch(
|
||||
() => visible.value,
|
||||
(newVal) => {
|
||||
if (newVal && earthContainer.value) {
|
||||
createEarth();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 创建地球
|
||||
const createEarth = () => {
|
||||
if (!window.YJ) {
|
||||
ElMessage.error('YJ库未加载，请检查依赖');
|
||||
return;
|
||||
}
|
||||
|
||||
window.YJ.on({
|
||||
ws: true,
|
||||
// host: getIP(), // 资源所在服务器地址
|
||||
// username: this.loginForm.username, // 用户名
|
||||
// password: md5pass, // 密码
|
||||
}).then((res) => {
|
||||
if (!earthContainer.value) return;
|
||||
loading.value = false;
|
||||
// 创建地球实例
|
||||
earthInstance = new YJ.YJEarth(earthContainer.value);
|
||||
window.Earth2 = earthInstance;
|
||||
|
||||
// 开启右键和左键点击事件
|
||||
YJ.Global.openRightClick(window.Earth2);
|
||||
YJ.Global.openLeftClick(window.Earth2);
|
||||
|
||||
// 设置初始视角
|
||||
const view = {
|
||||
position: {
|
||||
lng: 102.03643298211526,
|
||||
lat: 34.393586474501,
|
||||
alt: 11298179.51993155
|
||||
},
|
||||
orientation: {
|
||||
heading: 360,
|
||||
pitch: -89.94481747201486,
|
||||
roll: 0
|
||||
}
|
||||
};
|
||||
|
||||
YJ.Global.CesiumContainer(window.Earth2, {
|
||||
compass: false, //罗盘
|
||||
});
|
||||
// 加载底图
|
||||
loadBaseMap(earthInstance.viewer);
|
||||
|
||||
// 可以取消注释以下代码来设置初始视角
|
||||
// YJ.Global.flyTo(earthInstance, view);
|
||||
// YJ.Global.setDefaultView(earthInstance.viewer, view)
|
||||
if (props.data.punchRange) {
|
||||
renderRange(JSON.parse(props.data.punchRange));
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('初始化地球失败:', err);
|
||||
ElMessage.error('初始化地球失败，请稍后重试');
|
||||
});
|
||||
};
|
||||
|
||||
// 加载底图
|
||||
const loadBaseMap = (viewer) => {
|
||||
if (!viewer || !Cesium) {
|
||||
ElMessage.error('Cesium库未加载，请检查依赖');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 创建瓦片提供器
|
||||
const imageryProvider = new Cesium.UrlTemplateImageryProvider({
|
||||
url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
|
||||
fileExtension: 'png',
|
||||
minimumLevel: 0,
|
||||
maximumLevel: 18,
|
||||
projection: Cesium.WebMercatorProjection,
|
||||
credit: new Cesium.Credit('卫星图数据来源')
|
||||
});
|
||||
|
||||
// 添加图层到视图
|
||||
viewer.imageryLayers.addImageryProvider(imageryProvider);
|
||||
} catch (err) {
|
||||
console.error('加载底图失败:', err);
|
||||
ElMessage.error('加载底图失败');
|
||||
}
|
||||
};
|
||||
// 处理数据传递
|
||||
const handlesubmit = () => {
|
||||
if (!earthInstance || !earthInstance.viewer) {
|
||||
ElMessage.warning('地球实例未初始化，无法获取数据');
|
||||
return;
|
||||
}
|
||||
// 要传递的对象数据
|
||||
const dataToSend = {
|
||||
...props.data,
|
||||
punchRange: JSON.stringify(positions.value),
|
||||
};
|
||||
if (props.data.id) {
|
||||
updateAttendanceRange1(dataToSend)
|
||||
} else {
|
||||
addAttendanceRange1(dataToSend);
|
||||
}
|
||||
emit('send-data', dataToSend);
|
||||
};
|
||||
// 新增打卡范围接口
|
||||
const addAttendanceRange1 = (data) => {
|
||||
addAttendanceRange(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('新增打卡范围成功');
|
||||
handleClose();
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.error('新增打卡范围失败:', err);
|
||||
ElMessage.error('新增打卡范围失败');
|
||||
});
|
||||
};
|
||||
// 修改打卡范围接口
|
||||
const updateAttendanceRange1 = (data) => {
|
||||
updateAttendanceRange(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('修改打卡范围成功');
|
||||
handleClose();
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.error('修改打卡范围失败:', err);
|
||||
ElMessage.error('修改打卡范围失败');
|
||||
});
|
||||
};
|
||||
// 绘制范围
|
||||
const drawRange = () => {
|
||||
if (!earthInstance || !earthInstance.viewer) {
|
||||
ElMessage.warning('地球实例未初始化，无法绘制');
|
||||
return;
|
||||
}
|
||||
let draw = new YJ.Draw.DrawPolygon(window.Earth2);
|
||||
draw.start((err, params) => {
|
||||
if (err) {
|
||||
console.error('绘制失败:', err);
|
||||
ElMessage.error('绘制失败');
|
||||
return;
|
||||
}
|
||||
console.log('绘制成功:', params);
|
||||
positions.value = params;
|
||||
renderRange(params);
|
||||
});
|
||||
}
|
||||
// 渲染范围
|
||||
const renderRange = (params) => {
|
||||
let option = {
|
||||
id: 'Checkinrange',
|
||||
info: {
|
||||
type: "richText",
|
||||
text: "",
|
||||
hrefs: "",
|
||||
},
|
||||
positions: params,
|
||||
color: props.data.punchColor || "rgba(255,0,0,0.5)",
|
||||
line: {
|
||||
width: 3,
|
||||
color: "rgba(255,0,0,1)",
|
||||
},
|
||||
type: 0,
|
||||
show: true,
|
||||
}
|
||||
// PolygonObject
|
||||
let entity = new YJ.Obj.PolygonObject(
|
||||
window.Earth2,
|
||||
option
|
||||
);
|
||||
entity.flyTo();
|
||||
entityObject.value = entity
|
||||
}
|
||||
|
||||
|
||||
// 重新绘制
|
||||
const redraw = () => {
|
||||
if (entityObject.value) {
|
||||
entityObject.value.remove();
|
||||
}
|
||||
drawRange();
|
||||
}
|
||||
|
||||
// 组件挂载时设置容器ID
|
||||
onMounted(() => {
|
||||
if (!earthContainer.value) {
|
||||
earthContainer.value = 'earthMap'; // 设置与初始化代码中相同的ID
|
||||
}
|
||||
});
|
||||
|
||||
// 暴露显示方法给父组件
|
||||
defineExpose({
|
||||
show
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.earth-container {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 10px;
|
||||
height: calc(100% - 100px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.el-dialog) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
:deep(.el-dialog__content) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user