提交
This commit is contained in:
@ -5,7 +5,7 @@ import { AxiosPromise } from 'axios';
|
|||||||
export const getScreenWeather = (projectId: number | string) => {
|
export const getScreenWeather = (projectId: number | string) => {
|
||||||
return request({
|
return request({
|
||||||
url: '/project/big/screen/weather/' + projectId,
|
url: '/project/big/screen/weather/' + projectId,
|
||||||
method: 'get',
|
method: 'get'
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -13,7 +13,7 @@ export const getScreenWeather = (projectId: number | string) => {
|
|||||||
export const getScreenSafetyDay = (projectId: number | string) => {
|
export const getScreenSafetyDay = (projectId: number | string) => {
|
||||||
return request({
|
return request({
|
||||||
url: '/project/big/screen/safetyDay/' + projectId,
|
url: '/project/big/screen/safetyDay/' + projectId,
|
||||||
method: 'get',
|
method: 'get'
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -21,7 +21,7 @@ export const getScreenSafetyDay = (projectId: number | string) => {
|
|||||||
export const getScreenNews = (projectId: number | string) => {
|
export const getScreenNews = (projectId: number | string) => {
|
||||||
return request({
|
return request({
|
||||||
url: '/project/big/screen/news/' + projectId,
|
url: '/project/big/screen/news/' + projectId,
|
||||||
method: 'get',
|
method: 'get'
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -29,7 +29,7 @@ export const getScreenNews = (projectId: number | string) => {
|
|||||||
export const getScreenLand = (projectId: number | string) => {
|
export const getScreenLand = (projectId: number | string) => {
|
||||||
return request({
|
return request({
|
||||||
url: '/project/big/screen/' + projectId,
|
url: '/project/big/screen/' + projectId,
|
||||||
method: 'get',
|
method: 'get'
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -37,7 +37,7 @@ export const getScreenLand = (projectId: number | string) => {
|
|||||||
export const getScreenImgProcess = (projectId: number | string) => {
|
export const getScreenImgProcess = (projectId: number | string) => {
|
||||||
return request({
|
return request({
|
||||||
url: '/project/big/screen/imageProgress/' + projectId,
|
url: '/project/big/screen/imageProgress/' + projectId,
|
||||||
method: 'get',
|
method: 'get'
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -45,15 +45,18 @@ export const getScreenImgProcess = (projectId: number | string) => {
|
|||||||
export const getScreenPeople = (projectId: number | string) => {
|
export const getScreenPeople = (projectId: number | string) => {
|
||||||
return request({
|
return request({
|
||||||
url: '/project/big/screen/people/' + projectId,
|
url: '/project/big/screen/people/' + projectId,
|
||||||
method: 'get',
|
method: 'get'
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 查询项目AI安全巡检
|
// 查询项目AI安全巡检
|
||||||
export const getScreenSafetyInspection = (projectId: number | string) => {
|
export const getScreenSafetyInspection = (projectId: number | string) => {
|
||||||
return request({
|
return request({
|
||||||
url: '/project/big/screen/safetyInspection/' + projectId,
|
url: '/project/big/screen/safetyInspection/',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
|
params: {
|
||||||
|
projectId
|
||||||
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -61,7 +64,7 @@ export const getScreenSafetyInspection = (projectId: number | string) => {
|
|||||||
export const getScreenGeneralize = (projectId: number | string) => {
|
export const getScreenGeneralize = (projectId: number | string) => {
|
||||||
return request({
|
return request({
|
||||||
url: '/project/big/screen/generalize/' + projectId,
|
url: '/project/big/screen/generalize/' + projectId,
|
||||||
method: 'get',
|
method: 'get'
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -53,6 +53,8 @@ const router = useRouter();
|
|||||||
const getProjectGisData = async () => {
|
const getProjectGisData = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await projectGis();
|
const response = await projectGis();
|
||||||
|
console.log(response, 111111111111);
|
||||||
|
|
||||||
if (response.code === 200) {
|
if (response.code === 200) {
|
||||||
// 过滤掉没有经纬度的项目
|
// 过滤掉没有经纬度的项目
|
||||||
projectData.value = response.data.filter((item: any) => item.lng !== null && item.lat !== null && item.lng !== '' && item.lat !== '');
|
projectData.value = response.data.filter((item: any) => item.lng !== null && item.lat !== null && item.lng !== '' && item.lat !== '');
|
||||||
@ -108,6 +110,7 @@ const initEcharts = () => {
|
|||||||
// 从接口数据生成散点数据
|
// 从接口数据生成散点数据
|
||||||
const scatterData = projectData.value.map((item) => ({
|
const scatterData = projectData.value.map((item) => ({
|
||||||
name: item.projectName,
|
name: item.projectName,
|
||||||
|
id: item.id,
|
||||||
value: [parseFloat(item.lng), parseFloat(item.lat)], // 转换为数值类型
|
value: [parseFloat(item.lng), parseFloat(item.lat)], // 转换为数值类型
|
||||||
shortName: item.shortName,
|
shortName: item.shortName,
|
||||||
projectSite: item.projectSite,
|
projectSite: item.projectSite,
|
||||||
@ -200,15 +203,18 @@ const initEcharts = () => {
|
|||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
// 添加点击事件监听 - 这是关键修改部分
|
// 添加点击事件监听 - 这是关键修改部分
|
||||||
myChart.on('click', function (params: any) {
|
myChart.on('click', function (params: any) {
|
||||||
|
console.log(params, 111111);
|
||||||
// 检查点击的是散点图系列
|
// 检查点击的是散点图系列
|
||||||
if (params.componentType === 'series' && params.seriesType === 'scatter') {
|
if (params.componentType === 'series' && params.seriesType === 'scatter') {
|
||||||
// 跳转到项目详情页
|
// 跳转到项目详情页
|
||||||
navigateToProjectDetail();
|
|
||||||
|
navigateToProjectDetail(params.data);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const navigateToProjectDetail = () => {
|
const navigateToProjectDetail = (data) => {
|
||||||
window.open('http://xny.yj-3d.com:7788/ProjectScreen', '_blank');
|
window.open('http://localhost:7788/ProjectScreen?projectId=' + data.id + '&projectName=' + data.name, '_blank');
|
||||||
|
//xny.yj-3d.com
|
||||||
};
|
};
|
||||||
const risk_level_type1 = ref([]);
|
const risk_level_type1 = ref([]);
|
||||||
const safety_inspection_type1 = ref([]);
|
const safety_inspection_type1 = ref([]);
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="endPage" :class="{ 'slide-out-down': isHide }">
|
<div class="endPage" :class="{ 'slide-out-down': isHide }">
|
||||||
<Title title="AI安全巡检">
|
<Title title="AI安全巡检">
|
||||||
<img src="@/assets/projectLarge/robot.svg" alt="" height="20px" width="20px">
|
<img src="@/assets/projectLarge/robot.svg" alt="" height="20px" width="20px" />
|
||||||
</Title>
|
</Title>
|
||||||
<div class="swiper" v-if="inspectionList.length">
|
<div class="swiper" v-if="inspectionList.length">
|
||||||
<div class="arrow" :class="{ 'canUse': canLeft }" @click="swiperClick('left')">
|
<div class="arrow" :class="{ 'canUse': canLeft }" @click="swiperClick('left')">
|
||||||
@ -15,7 +15,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="swiper_content" ref="swiperContent">
|
<div class="swiper_content" ref="swiperContent">
|
||||||
<div class="swiper_item" v-for="(item, i) in inspectionList" :key="i">
|
<div class="swiper_item" v-for="(item, i) in inspectionList" :key="i">
|
||||||
<img :src="item.picture" alt="安全巡检" class="swiper_img">
|
<img :src="item.picture" alt="安全巡检" class="swiper_img" />
|
||||||
<div class="swiper_date">{{ item.createTime.slice(5, 16) }}</div>
|
<div class="swiper_date">{{ item.createTime.slice(5, 16) }}</div>
|
||||||
<div class="swiper_tip">{{ item.label || '未佩戴安全帽' }}</div>
|
<div class="swiper_tip">{{ item.label || '未佩戴安全帽' }}</div>
|
||||||
</div>
|
</div>
|
||||||
@ -31,14 +31,15 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, toRefs, getCurrentInstance } from "vue"
|
import { ref, onMounted, toRefs, getCurrentInstance } from 'vue';
|
||||||
import Title from './title.vue'
|
import Title from './title.vue';
|
||||||
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
|
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
|
||||||
import { getScreenSafetyInspection } from '@/api/projectScreen'
|
import { getScreenSafetyInspection } from '@/api/projectScreen';
|
||||||
import newMap from "./newmap.vue"
|
import newMap from './newmap.vue';
|
||||||
const { proxy } = getCurrentInstance();
|
const { proxy } = getCurrentInstance();
|
||||||
const { violation_level_type } = toRefs(proxy?.useDict('violation_level_type'));
|
const { violation_level_type } = toRefs(proxy?.useDict('violation_level_type'));
|
||||||
|
const urlParams = new URLSearchParams(new URL(window.location.href).search);
|
||||||
|
const projectIdTwo = urlParams.get('projectId');
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
isHide: {
|
isHide: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@ -46,88 +47,91 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
projectId: {
|
projectId: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ""
|
default: ''
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
const inspectionList = ref([{
|
const inspectionList = ref([
|
||||||
id: "",
|
{
|
||||||
label: "",
|
id: '',
|
||||||
picture: "",
|
label: '',
|
||||||
createTime: ""
|
picture: '',
|
||||||
}])
|
createTime: ''
|
||||||
const swiperContent = ref()
|
}
|
||||||
const swiperItemWidth = ref(100)
|
]);
|
||||||
const canLeft = ref(false)
|
const swiperContent = ref();
|
||||||
const canRight = ref(true)
|
const swiperItemWidth = ref(100);
|
||||||
|
const canLeft = ref(false);
|
||||||
|
const canRight = ref(true);
|
||||||
|
|
||||||
const swiperClick = (direction) => {
|
const swiperClick = (direction) => {
|
||||||
if (!swiperContent.value) return
|
if (!swiperContent.value) return;
|
||||||
|
|
||||||
if (direction === 'right') {
|
if (direction === 'right') {
|
||||||
if (swiperContent.value.scrollLeft >= swiperContent.value.scrollWidth - swiperContent.value.clientWidth) {
|
if (swiperContent.value.scrollLeft >= swiperContent.value.scrollWidth - swiperContent.value.clientWidth) {
|
||||||
canRight.value = false
|
canRight.value = false;
|
||||||
canLeft.value = true
|
canLeft.value = true;
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
swiperContent.value.scrollLeft += swiperItemWidth.value
|
swiperContent.value.scrollLeft += swiperItemWidth.value;
|
||||||
} else {
|
} else {
|
||||||
if (swiperContent.value.scrollLeft <= 0) {
|
if (swiperContent.value.scrollLeft <= 0) {
|
||||||
canLeft.value = false
|
canLeft.value = false;
|
||||||
canRight.value = true
|
canRight.value = true;
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
swiperContent.value.scrollLeft -= swiperItemWidth.value
|
swiperContent.value.scrollLeft -= swiperItemWidth.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新箭头状态
|
// 更新箭头状态
|
||||||
canLeft.value = swiperContent.value.scrollLeft > 0
|
canLeft.value = swiperContent.value.scrollLeft > 0;
|
||||||
canRight.value = swiperContent.value.scrollLeft < swiperContent.value.scrollWidth - swiperContent.value.clientWidth
|
canRight.value = swiperContent.value.scrollLeft < swiperContent.value.scrollWidth - swiperContent.value.clientWidth;
|
||||||
}
|
};
|
||||||
|
|
||||||
const getInspectionList = async () => {
|
const getInspectionList = () => {
|
||||||
const res = await getScreenSafetyInspection(props.projectId)
|
getScreenSafetyInspection(projectIdTwo).then((res) => {
|
||||||
const { code, data } = res
|
const { code, data } = res;
|
||||||
if (code === 200) {
|
if (code === 200) {
|
||||||
console.log(violation_level_type.value)
|
console.log(violation_level_type.value);
|
||||||
data.map(item => {
|
data.map((item) => {
|
||||||
item.label = violation_level_type.value.find((i) => i.value === item.violationType)?.label
|
item.label = violation_level_type.value.find((i) => i.value === item.violationType)?.label;
|
||||||
})
|
});
|
||||||
inspectionList.value = data
|
inspectionList.value = data;
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
|
};
|
||||||
// 创建地球
|
// 创建地球
|
||||||
const createEarth = () => {
|
const createEarth = () => {
|
||||||
window.YJ.on({
|
window.YJ.on({
|
||||||
ws: true,
|
ws: true
|
||||||
// host: getIP(), //资源所在服务器地址
|
// host: getIP(), //资源所在服务器地址
|
||||||
// username: this.loginForm.username, //用户名 可以不登录(不填写用户名),不登录时无法加载服务端的数据
|
// username: this.loginForm.username, //用户名 可以不登录(不填写用户名),不登录时无法加载服务端的数据
|
||||||
// password: md5pass, //密码 生成方式:md5(用户名_密码)
|
// password: md5pass, //密码 生成方式:md5(用户名_密码)
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
let earth = new YJ.YJEarth("earth");
|
let earth = new YJ.YJEarth('earth');
|
||||||
window.Earth1 = earth;
|
window.Earth1 = earth;
|
||||||
YJ.Global.openRightClick(window.Earth1);
|
YJ.Global.openRightClick(window.Earth1);
|
||||||
YJ.Global.openLeftClick(window.Earth1);
|
YJ.Global.openLeftClick(window.Earth1);
|
||||||
let view = {
|
let view = {
|
||||||
"position": {
|
'position': {
|
||||||
"lng": 102.03643298211526,
|
'lng': 102.03643298211526,
|
||||||
"lat": 34.393586474501,
|
'lat': 34.393586474501,
|
||||||
"alt": 11298179.51993155
|
'alt': 11298179.51993155
|
||||||
},
|
},
|
||||||
"orientation": {
|
'orientation': {
|
||||||
"heading": 360,
|
'heading': 360,
|
||||||
"pitch": -89.94481747201486,
|
'pitch': -89.94481747201486,
|
||||||
"roll": 0
|
'roll': 0
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
loadBaseMap(earth.viewer)
|
loadBaseMap(earth.viewer);
|
||||||
YJ.Global.CesiumContainer(window.Earth1, {
|
YJ.Global.CesiumContainer(window.Earth1, {
|
||||||
compass: false, //罗盘
|
compass: false //罗盘
|
||||||
});
|
});
|
||||||
// YJ.Global.flyTo(earth, view);
|
// YJ.Global.flyTo(earth, view);
|
||||||
// YJ.Global.setDefaultView(earth.viewer, view)
|
// YJ.Global.setDefaultView(earth.viewer, view)
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
// 加载底图
|
// 加载底图
|
||||||
const loadBaseMap = (viewer) => {
|
const loadBaseMap = (viewer) => {
|
||||||
// 创建瓦片提供器
|
// 创建瓦片提供器
|
||||||
@ -146,14 +150,14 @@ const loadBaseMap = (viewer) => {
|
|||||||
|
|
||||||
// 添加图层到视图
|
// 添加图层到视图
|
||||||
const layer = viewer.imageryLayers.addImageryProvider(imageryProvider);
|
const layer = viewer.imageryLayers.addImageryProvider(imageryProvider);
|
||||||
}
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getInspectionList()
|
getInspectionList();
|
||||||
if (swiperContent.value && swiperContent.value.children.length > 0) {
|
if (swiperContent.value && swiperContent.value.children.length > 0) {
|
||||||
swiperItemWidth.value = swiperContent.value.children[0].clientWidth + 20
|
swiperItemWidth.value = swiperContent.value.children[0].clientWidth + 20;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
@ -11,7 +11,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div>{{ currentProjectName }}</div>
|
<div>{{ projectName ? projectName : currentProjectName }}</div>
|
||||||
<div>施工现场数智化管理</div>
|
<div>施工现场数智化管理</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="header_right">
|
<div class="header_right">
|
||||||
@ -19,8 +19,12 @@
|
|||||||
<!-- 左侧:天气图标 + 日期文字 -->
|
<!-- 左侧:天气图标 + 日期文字 -->
|
||||||
<div class="left-section">
|
<div class="left-section">
|
||||||
<div class="weather-list" @mouseenter="requestPause" @mouseleave="resumeScroll">
|
<div class="weather-list" @mouseenter="requestPause" @mouseleave="resumeScroll">
|
||||||
<div v-for="(item, i) in weatherList" :key="i" class="weather-item"
|
<div
|
||||||
:style="{ transform: `translateY(-${offsetY}px)`, transition: transition }">
|
v-for="(item, i) in weatherList"
|
||||||
|
:key="i"
|
||||||
|
class="weather-item"
|
||||||
|
:style="{ transform: `translateY(-${offsetY}px)`, transition: transition }"
|
||||||
|
>
|
||||||
<img :src="`/assets/demo/${item.icon}.png`" alt="" />
|
<img :src="`/assets/demo/${item.icon}.png`" alt="" />
|
||||||
<div>{{ item.weather }}{{ item.tempMin }}°/{{ item.tempMax }}°</div>
|
<div>{{ item.weather }}{{ item.tempMin }}°/{{ item.tempMax }}°</div>
|
||||||
<div>{{ item.week }}({{ item.date }})</div>
|
<div>{{ item.week }}({{ item.date }})</div>
|
||||||
@ -60,7 +64,9 @@
|
|||||||
import { ref, onMounted, onUnmounted } from 'vue';
|
import { ref, onMounted, onUnmounted } from 'vue';
|
||||||
import { getScreenSafetyDay, getScreenWeather } from '@/api/projectScreen';
|
import { getScreenSafetyDay, getScreenWeather } from '@/api/projectScreen';
|
||||||
import { useUserStoreHook } from '@/store/modules/user';
|
import { useUserStoreHook } from '@/store/modules/user';
|
||||||
|
const urlParams = new URLSearchParams(new URL(window.location.href).search);
|
||||||
|
const projectIdTwo = urlParams.get('projectId');
|
||||||
|
const projectName = urlParams.get('projectName');
|
||||||
const userStore = useUserStoreHook();
|
const userStore = useUserStoreHook();
|
||||||
const currentProjectName = computed(() => userStore.selectedProject?.name);
|
const currentProjectName = computed(() => userStore.selectedProject?.name);
|
||||||
|
|
||||||
@ -81,6 +87,10 @@ const props = defineProps({
|
|||||||
isFull: {
|
isFull: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
},
|
||||||
|
projectName: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -230,13 +240,13 @@ onUnmounted(() => {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title>div:first-child {
|
.title > div:first-child {
|
||||||
/* 第一个子元素的样式 */
|
/* 第一个子元素的样式 */
|
||||||
font-size: 38px;
|
font-size: 38px;
|
||||||
letter-spacing: 0.1em;
|
letter-spacing: 0.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title>div:last-child {
|
.title > div:last-child {
|
||||||
/* 最后一个子元素的样式 */
|
/* 最后一个子元素的样式 */
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
}
|
}
|
||||||
@ -269,7 +279,7 @@ onUnmounted(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&>div:last-child {
|
& > div:last-child {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -90,7 +90,8 @@ import Title from './title.vue';
|
|||||||
import { getScreenNews, getScreenPeople } from '@/api/projectScreen/index';
|
import { getScreenNews, getScreenPeople } from '@/api/projectScreen/index';
|
||||||
import { mapOption } from './optionList';
|
import { mapOption } from './optionList';
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
const urlParams = new URLSearchParams(new URL(window.location.href).search);
|
||||||
|
const projectIdTwo = urlParams.get('projectId');
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
projectId: {
|
projectId: {
|
||||||
type: String,
|
type: String,
|
||||||
@ -128,7 +129,7 @@ const showNewsDetail = (item: any) => {
|
|||||||
* 获取项目人员出勤数据
|
* 获取项目人员出勤数据
|
||||||
*/
|
*/
|
||||||
const getPeopleData = async () => {
|
const getPeopleData = async () => {
|
||||||
const res = await getScreenPeople(props.projectId);
|
const res = await getScreenPeople(projectIdTwo);
|
||||||
const { data, code } = res;
|
const { data, code } = res;
|
||||||
if (code === 200) {
|
if (code === 200) {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
@ -143,7 +144,7 @@ const getPeopleData = async () => {
|
|||||||
* 获取项目新闻数据
|
* 获取项目新闻数据
|
||||||
*/
|
*/
|
||||||
const getNewsData = async () => {
|
const getNewsData = async () => {
|
||||||
const res = await getScreenNews(props.projectId);
|
const res = await getScreenNews(projectIdTwo);
|
||||||
const { data, code } = res;
|
const { data, code } = res;
|
||||||
if (code === 200) {
|
if (code === 200) {
|
||||||
news.value = data;
|
news.value = data;
|
||||||
|
@ -2,18 +2,22 @@
|
|||||||
import { onMounted, ref, onUnmounted, defineProps } from 'vue';
|
import { onMounted, ref, onUnmounted, defineProps } from 'vue';
|
||||||
import CesiumImageLabelEntity from '../js/CesiumImageLabelEntity.js';
|
import CesiumImageLabelEntity from '../js/CesiumImageLabelEntity.js';
|
||||||
import CesiumFlyToRoamingController from '../js/CesiumFlyToRoamingController.js';
|
import CesiumFlyToRoamingController from '../js/CesiumFlyToRoamingController.js';
|
||||||
import { setSelect, getSelectList, getGps, getModelList } from '@/api/projectScreen/index.ts'
|
import { setSelect, getSelectList, getGps, getModelList } from '@/api/projectScreen/index.ts';
|
||||||
import videoDialog from "./video.vue"
|
import videoDialog from './video.vue';
|
||||||
import { getToken } from '@/utils/auth';
|
import { getToken } from '@/utils/auth';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import md5 from 'js-md5';
|
import md5 from 'js-md5';
|
||||||
const defaultExpandedKeys = [1, 2, 3] //默认展开第一级节点
|
const defaultExpandedKeys = [1, 2, 3]; //默认展开第一级节点
|
||||||
const defaultCheckedKeys = ref([]) //默认选中节点
|
const defaultCheckedKeys = ref([]); //默认选中节点
|
||||||
const data = ref([]);
|
const data = ref([]);
|
||||||
const deviceId = ref('');
|
const deviceId = ref('');
|
||||||
const videoDialogRef = ref(null);
|
const videoDialogRef = ref(null);
|
||||||
const token = getToken();
|
const token = getToken();
|
||||||
let ws = new ReconnectingWebSocket(import.meta.env.VITE_APP_BASE_WS_API + '?Authorization=' + token + '&clientid=' + import.meta.env.VITE_APP_CLIENT_ID + '&projectId=' + '1897160897167638529');
|
const urlParams = new URLSearchParams(new URL(window.location.href).search);
|
||||||
|
const projectIdTwo = urlParams.get('projectId');
|
||||||
|
let ws = new ReconnectingWebSocket(
|
||||||
|
import.meta.env.VITE_APP_BASE_WS_API + '?Authorization=' + token + '&clientid=' + import.meta.env.VITE_APP_CLIENT_ID + '&projectId=' + projectIdTwo
|
||||||
|
);
|
||||||
// 连接ws
|
// 连接ws
|
||||||
const connectWs = () => {
|
const connectWs = () => {
|
||||||
ws.onopen = (e) => {
|
ws.onopen = (e) => {
|
||||||
@ -25,19 +29,19 @@ const connectWs = () => {
|
|||||||
console.log('ws', e);
|
console.log('ws', e);
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
}
|
};
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
isHide: {
|
isHide: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
console.log('props', props);
|
console.log('props', props);
|
||||||
|
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
children: 'children',
|
children: 'children',
|
||||||
label: 'label',
|
label: 'label'
|
||||||
}
|
};
|
||||||
let entityManager = null;
|
let entityManager = null;
|
||||||
window.deviceMap = new Map();
|
window.deviceMap = new Map();
|
||||||
window.ModelList = new Map();
|
window.ModelList = new Map();
|
||||||
@ -48,9 +52,10 @@ let modelList = ref([]);
|
|||||||
let roamingController = null;
|
let roamingController = null;
|
||||||
// 获取模型列表
|
// 获取模型列表
|
||||||
async function getModelListData() {
|
async function getModelListData() {
|
||||||
let res = await axios.post(import.meta.env.VITE_APP_BASE_EARTH_API + '/yjearth4.0/api/v1/user/sign-in',
|
let res = await axios.post(import.meta.env.VITE_APP_BASE_EARTH_API + '/yjearth4.0/api/v1/user/sign-in', {
|
||||||
{ "username": "admin", "password": "3598f66fbc93c0d5abd2dabab9de74cc" }
|
'username': 'admin',
|
||||||
)
|
'password': '3598f66fbc93c0d5abd2dabab9de74cc'
|
||||||
|
});
|
||||||
console.log('res', res.data);
|
console.log('res', res.data);
|
||||||
if (res.data.code == 0) {
|
if (res.data.code == 0) {
|
||||||
let toekn = res.data.data.token;
|
let toekn = res.data.data.token;
|
||||||
@ -59,51 +64,50 @@ async function getModelListData() {
|
|||||||
url: import.meta.env.VITE_APP_BASE_EARTH_API + '/yjearth4.0/api/v1/source/list',
|
url: import.meta.env.VITE_APP_BASE_EARTH_API + '/yjearth4.0/api/v1/source/list',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: {
|
data: {
|
||||||
data: { "page": 1, "page_size": 10 },
|
data: { 'page': 1, 'page_size': 10 }
|
||||||
},
|
},
|
||||||
headers: {
|
headers: {
|
||||||
'token': toekn
|
'token': toekn
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
if (res1.data.code == 0) {
|
if (res1.data.code == 0) {
|
||||||
modelList.value = res1.data.data.list;
|
modelList.value = res1.data.data.list;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
// 获取GPS数据
|
// 获取GPS数据
|
||||||
function getGpsData() {
|
function getGpsData() {
|
||||||
getGps('1897160897167638529').then(res => {
|
getGps(projectIdTwo).then((res) => {
|
||||||
console.log('res', res);
|
console.log('res', res);
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
data.value = res.data;
|
data.value = res.data;
|
||||||
if (res.data.length > 0) {
|
if (res.data.length > 0) {
|
||||||
res.data.forEach(element => {
|
res.data.forEach((element) => {
|
||||||
list.value = [...list.value, ...element.children]
|
list.value = [...list.value, ...element.children];
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
// 设置选中节点
|
// 设置选中节点
|
||||||
function setCheckedNode(idList) {
|
function setCheckedNode(idList) {
|
||||||
let obj = {
|
let obj = {
|
||||||
projectId: '1897160897167638529',
|
projectId: projectIdTwo,
|
||||||
idList
|
idList
|
||||||
}
|
};
|
||||||
setSelect(obj).then(res => {
|
setSelect(obj).then((res) => {
|
||||||
console.log('res', res);
|
console.log('res', res);
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
// 获取选中节点
|
// 获取选中节点
|
||||||
function getCheckedNode() {
|
function getCheckedNode() {
|
||||||
getSelectList({
|
getSelectList({
|
||||||
projectId: '1897160897167638529'
|
projectId: projectIdTwo
|
||||||
}).then(res => {
|
}).then((res) => {
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
defaultCheckedKeys.value = res.data || []
|
defaultCheckedKeys.value = res.data || [];
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
// 渲染无人机、摄像头、定位设备
|
// 渲染无人机、摄像头、定位设备
|
||||||
function renderDevice(item) {
|
function renderDevice(item) {
|
||||||
@ -135,25 +139,24 @@ function entityClickHandler(entity, item) {
|
|||||||
}
|
}
|
||||||
// 初始化地球
|
// 初始化地球
|
||||||
async function initEarth() {
|
async function initEarth() {
|
||||||
|
let earth = new YJ.YJEarth('earth');
|
||||||
let earth = new YJ.YJEarth("earth");
|
|
||||||
|
|
||||||
window.Earth1 = earth;
|
window.Earth1 = earth;
|
||||||
// 加载底图
|
// 加载底图
|
||||||
// earth.viewer.terrainProvider = Cesium.createWorldTerrain();
|
// earth.viewer.terrainProvider = Cesium.createWorldTerrain();
|
||||||
// Earth1.viewer
|
// Earth1.viewer
|
||||||
addArcgisLayer(Earth1.viewer, 'img_w')
|
addArcgisLayer(Earth1.viewer, 'img_w');
|
||||||
// 添加倾斜数据
|
// 添加倾斜数据
|
||||||
// 获取中心点
|
// 获取中心点
|
||||||
YJ.Global.CesiumContainer(window.Earth1, {
|
YJ.Global.CesiumContainer(window.Earth1, {
|
||||||
compass: false,//罗盘
|
compass: false, //罗盘
|
||||||
legend: false, //图例
|
legend: false //图例
|
||||||
});
|
});
|
||||||
// 创建实体管理器实例
|
// 创建实体管理器实例
|
||||||
list.value.forEach(item => {
|
list.value.forEach((item) => {
|
||||||
if (defaultCheckedKeys.value.includes(item.id)) {
|
if (defaultCheckedKeys.value.includes(item.id)) {
|
||||||
console.log("defaultCheckedKeys", item.id);
|
console.log('defaultCheckedKeys', item.id);
|
||||||
renderDevice(item)
|
renderDevice(item);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
roamingController = new CesiumFlyToRoamingController(window.Earth1.viewer, {
|
roamingController = new CesiumFlyToRoamingController(window.Earth1.viewer, {
|
||||||
@ -172,25 +175,25 @@ async function loadTiltData(item) {
|
|||||||
function getArcGisUrlByType(type) {
|
function getArcGisUrlByType(type) {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
//影像
|
//影像
|
||||||
case "img_w":
|
case 'img_w':
|
||||||
return "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}";
|
return 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}';
|
||||||
//电子
|
//电子
|
||||||
case "vec_w":
|
case 'vec_w':
|
||||||
return "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";
|
return 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer';
|
||||||
//蓝色底图
|
//蓝色底图
|
||||||
case "vec_blue":
|
case 'vec_blue':
|
||||||
return "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer";
|
return 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer';
|
||||||
//灰色底图
|
//灰色底图
|
||||||
case "vec_gray":
|
case 'vec_gray':
|
||||||
return "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer";
|
return 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer';
|
||||||
//暖色底图
|
//暖色底图
|
||||||
case "vec_warm":
|
case 'vec_warm':
|
||||||
return "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer";
|
return 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 添加ArcGIS图层
|
// 添加ArcGIS图层
|
||||||
function addArcgisLayer(viewer, type) {
|
function addArcgisLayer(viewer, type) {
|
||||||
let url = getArcGisUrlByType(type)
|
let url = getArcGisUrlByType(type);
|
||||||
const layerProvider = new Cesium.UrlTemplateImageryProvider({
|
const layerProvider = new Cesium.UrlTemplateImageryProvider({
|
||||||
url: url
|
url: url
|
||||||
});
|
});
|
||||||
@ -210,7 +213,7 @@ function handleCheck(checkedNodes, nodes) {
|
|||||||
// 处理单个节点的通用函数
|
// 处理单个节点的通用函数
|
||||||
const handleNode = (node) => {
|
const handleNode = (node) => {
|
||||||
if (!window.deviceMap.has(node.id)) {
|
if (!window.deviceMap.has(node.id)) {
|
||||||
console.log("defaultCheckedKeys", node.id);
|
console.log('defaultCheckedKeys', node.id);
|
||||||
renderDevice(node);
|
renderDevice(node);
|
||||||
} else {
|
} else {
|
||||||
const device = window.deviceMap.get(node.id);
|
const device = window.deviceMap.get(node.id);
|
||||||
@ -232,11 +235,15 @@ function handleCheck(checkedNodes, nodes) {
|
|||||||
// 开始漫游
|
// 开始漫游
|
||||||
function startRoaming() {
|
function startRoaming() {
|
||||||
if (roamingController) {
|
if (roamingController) {
|
||||||
roamingController.startPathRoaming([
|
roamingController.startPathRoaming(
|
||||||
|
[
|
||||||
Cesium.Cartesian3.fromDegrees(106.49556855602525, 29.534393226355515, 200),
|
Cesium.Cartesian3.fromDegrees(106.49556855602525, 29.534393226355515, 200),
|
||||||
Cesium.Cartesian3.fromDegrees(106.49142431645038, 29.534472802500083, 200),
|
Cesium.Cartesian3.fromDegrees(106.49142431645038, 29.534472802500083, 200),
|
||||||
Cesium.Cartesian3.fromDegrees(106.49142125177437, 29.541881138875755, 200)
|
Cesium.Cartesian3.fromDegrees(106.49142125177437, 29.541881138875755, 200)
|
||||||
], 3, false);
|
],
|
||||||
|
3,
|
||||||
|
false
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
console.log('请先初始化地球');
|
console.log('请先初始化地球');
|
||||||
}
|
}
|
||||||
@ -251,7 +258,6 @@ function stopRoaming() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
|
|
||||||
// 连接ws
|
// 连接ws
|
||||||
connectWs();
|
connectWs();
|
||||||
// 获取选中节点
|
// 获取选中节点
|
||||||
@ -265,19 +271,19 @@ onMounted(async () => {
|
|||||||
host: 'http://192.168.110.2:8895/'
|
host: 'http://192.168.110.2:8895/'
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
initEarth();
|
initEarth();
|
||||||
modelList.value.forEach(item => {
|
modelList.value.forEach((item) => {
|
||||||
loadTiltData(item)
|
loadTiltData(item);
|
||||||
})
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
window.deviceMap.forEach((item) => {
|
window.deviceMap.forEach((item) => {
|
||||||
item.destroy();
|
item.destroy();
|
||||||
})
|
});
|
||||||
window.deviceMap.clear();
|
window.deviceMap.clear();
|
||||||
window.roamingController.destroy();
|
window.roamingController.destroy();
|
||||||
window.Earth1.destroy();
|
window.Earth1.destroy();
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="earth-container-big">
|
<div class="earth-container-big">
|
||||||
@ -289,9 +295,19 @@ onUnmounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div v-show="isHide" class="right">
|
<div v-show="isHide" class="right">
|
||||||
<el-tree show-checkbox :data="data" :props="defaultProps" node-key="id" :expand-on-click-node="false"
|
<el-tree
|
||||||
:check-on-click-node="false" :check-on-click-leaf="false" :default-expanded-keys="defaultExpandedKeys"
|
show-checkbox
|
||||||
:default-checked-keys="defaultCheckedKeys" @check="handleCheck" @node-click="handleNodeClick" />
|
:data="data"
|
||||||
|
:props="defaultProps"
|
||||||
|
node-key="id"
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
:check-on-click-node="false"
|
||||||
|
:check-on-click-leaf="false"
|
||||||
|
:default-expanded-keys="defaultExpandedKeys"
|
||||||
|
:default-checked-keys="defaultCheckedKeys"
|
||||||
|
@check="handleCheck"
|
||||||
|
@node-click="handleNodeClick"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<videoDialog :data="deviceId" ref="videoDialogRef"></videoDialog>
|
<videoDialog :data="deviceId" ref="videoDialogRef"></videoDialog>
|
||||||
</div>
|
</div>
|
||||||
|
@ -16,30 +16,31 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, onUnmounted, nextTick } from "vue"
|
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
||||||
import Title from './title.vue'
|
import Title from './title.vue';
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import { pieOption, barOption } from './optionList';
|
import { pieOption, barOption } from './optionList';
|
||||||
import { getScreenLand, getScreenImgProcess, getScreenGeneralize } from '@/api/projectScreen';
|
import { getScreenLand, getScreenImgProcess, getScreenGeneralize } from '@/api/projectScreen';
|
||||||
|
const urlParams = new URLSearchParams(new URL(window.location.href).search);
|
||||||
|
const projectIdTwo = urlParams.get('projectId');
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
projectId: {
|
projectId: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 0
|
default: 0
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
const generalize = ref()
|
const generalize = ref();
|
||||||
// 饼图相关
|
// 饼图相关
|
||||||
const pieChartRef = ref<HTMLDivElement | null>(null);
|
const pieChartRef = ref<HTMLDivElement | null>(null);
|
||||||
let pieChart: any = null;
|
let pieChart: any = null;
|
||||||
const totalPercent = ref(0)
|
const totalPercent = ref(0);
|
||||||
// 折线图相关
|
// 折线图相关
|
||||||
const lineChartRef = ref<HTMLDivElement | null>(null);
|
const lineChartRef = ref<HTMLDivElement | null>(null);
|
||||||
let lineChart: any = null;
|
let lineChart: any = null;
|
||||||
// 土地数据 折线图
|
// 土地数据 折线图
|
||||||
const designAreaData = ref([])
|
const designAreaData = ref([]);
|
||||||
const transferAreaData = ref([])
|
const transferAreaData = ref([]);
|
||||||
// 饼图数据
|
// 饼图数据
|
||||||
let pieData = [
|
let pieData = [
|
||||||
{ label: 'areaPercentage', name: '场区', value: 0 },
|
{ label: 'areaPercentage', name: '场区', value: 0 },
|
||||||
@ -47,8 +48,8 @@ let pieData = [
|
|||||||
{ label: 'collectorLinePercentage', name: '集电线路', value: 0 },
|
{ label: 'collectorLinePercentage', name: '集电线路', value: 0 },
|
||||||
{ label: 'exportLinePercentage', name: '送出线路', value: 0 },
|
{ label: 'exportLinePercentage', name: '送出线路', value: 0 },
|
||||||
{ label: 'substationPercentage', name: '升压站', value: 0 },
|
{ label: 'substationPercentage', name: '升压站', value: 0 },
|
||||||
{ label: 'boxTransformerPercentage', name: '箱变', value: 0 },
|
{ label: 'boxTransformerPercentage', name: '箱变', value: 0 }
|
||||||
]
|
];
|
||||||
|
|
||||||
// 初始化饼图
|
// 初始化饼图
|
||||||
const initPieChart = () => {
|
const initPieChart = () => {
|
||||||
@ -56,14 +57,14 @@ const initPieChart = () => {
|
|||||||
console.error('未找到饼图容器元素');
|
console.error('未找到饼图容器元素');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
pieOption.series.data = pieData
|
pieOption.series.data = pieData;
|
||||||
pieOption.graphic[0].style.text = totalPercent.value + '%'
|
pieOption.graphic[0].style.text = totalPercent.value + '%';
|
||||||
pieChart = echarts.init(pieChartRef.value, null, {
|
pieChart = echarts.init(pieChartRef.value, null, {
|
||||||
renderer: 'canvas',
|
renderer: 'canvas',
|
||||||
useDirtyRect: false
|
useDirtyRect: false
|
||||||
});
|
});
|
||||||
pieChart.setOption(pieOption);
|
pieChart.setOption(pieOption);
|
||||||
}
|
};
|
||||||
|
|
||||||
// 初始化折线图
|
// 初始化折线图
|
||||||
const initLineChart = () => {
|
const initLineChart = () => {
|
||||||
@ -71,55 +72,55 @@ const initLineChart = () => {
|
|||||||
console.error('未找到折线图容器元素');
|
console.error('未找到折线图容器元素');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
barOption.series[0].data = designAreaData.value
|
barOption.series[0].data = designAreaData.value;
|
||||||
barOption.series[1].data = transferAreaData.value
|
barOption.series[1].data = transferAreaData.value;
|
||||||
lineChart = echarts.init(lineChartRef.value, null, {
|
lineChart = echarts.init(lineChartRef.value, null, {
|
||||||
renderer: 'canvas',
|
renderer: 'canvas',
|
||||||
useDirtyRect: false
|
useDirtyRect: false
|
||||||
});
|
});
|
||||||
lineChart.setOption(barOption);
|
lineChart.setOption(barOption);
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取项目土地统计数据
|
* 获取项目土地统计数据
|
||||||
*/
|
*/
|
||||||
const getScreenLandData = async () => {
|
const getScreenLandData = async () => {
|
||||||
const res = await getScreenLand(props.projectId);
|
const res = await getScreenLand(projectIdTwo);
|
||||||
const { data, code } = res
|
const { data, code } = res;
|
||||||
if (code === 200) {
|
if (code === 200) {
|
||||||
designAreaData.value = data.map((item: any) => Number(item.designArea))
|
designAreaData.value = data.map((item: any) => Number(item.designArea));
|
||||||
transferAreaData.value = data.map((item: any) => Number(item.transferArea))
|
transferAreaData.value = data.map((item: any) => Number(item.transferArea));
|
||||||
initLineChart();
|
initLineChart();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取项目形象进度数据
|
* 获取项目形象进度数据
|
||||||
*/
|
*/
|
||||||
const getScreenImgProcessData = async () => {
|
const getScreenImgProcessData = async () => {
|
||||||
const res = await getScreenImgProcess(props.projectId);
|
const res = await getScreenImgProcess(projectIdTwo);
|
||||||
const { data, code } = res
|
const { data, code } = res;
|
||||||
if (code === 200) {
|
if (code === 200) {
|
||||||
totalPercent.value = data.totalPercentage
|
totalPercent.value = data.totalPercentage;
|
||||||
pieData.forEach((item: any) => {
|
pieData.forEach((item: any) => {
|
||||||
item.value = data[item.label]
|
item.value = data[item.label];
|
||||||
})
|
});
|
||||||
pieData = pieData.filter((item: any) => item.value != '0.0')
|
pieData = pieData.filter((item: any) => item.value != '0.0');
|
||||||
console.log(pieData)
|
console.log(pieData);
|
||||||
initPieChart()
|
initPieChart();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取项目概况数据
|
* 获取项目概况数据
|
||||||
*/
|
*/
|
||||||
const getScreenGeneralizeData = async () => {
|
const getScreenGeneralizeData = async () => {
|
||||||
const res = await getScreenGeneralize(props.projectId);
|
const res = await getScreenGeneralize(projectIdTwo);
|
||||||
const { data, code, msg } = res
|
const { data, code, msg } = res;
|
||||||
if (code === 200) {
|
if (code === 200) {
|
||||||
generalize.value = msg
|
generalize.value = msg;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
// 响应窗口大小变化
|
// 响应窗口大小变化
|
||||||
const handleResize = () => {
|
const handleResize = () => {
|
||||||
@ -129,9 +130,9 @@ const handleResize = () => {
|
|||||||
|
|
||||||
// 组件挂载时初始化图表
|
// 组件挂载时初始化图表
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getScreenLandData()
|
getScreenLandData();
|
||||||
getScreenImgProcessData()
|
getScreenImgProcessData();
|
||||||
getScreenGeneralizeData()
|
getScreenGeneralizeData();
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
initPieChart();
|
initPieChart();
|
||||||
window.addEventListener('resize', handleResize);
|
window.addEventListener('resize', handleResize);
|
||||||
|
@ -1,15 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="large_screen">
|
<div class="large_screen">
|
||||||
<Header :projectId="projectId" :isFull="isFull" @changePage="handleChangePage" />
|
<Header :projectId="projectIdTwo ? projectIdTwo : projectId" :isFull="isFull" :projectName="projectName" @changePage="handleChangePage" />
|
||||||
<div class="nav">
|
<div class="nav">
|
||||||
<div class="nav_left" :style="{ left: isHideOther ? '-25vw' : '0' }">
|
<div class="nav_left" :style="{ left: isHideOther ? '-25vw' : '0' }">
|
||||||
<leftPage :projectId="projectId" />
|
<leftPage :projectId="projectIdTwo ? projectIdTwo : projectId" />
|
||||||
</div>
|
</div>
|
||||||
<div class="nav_center" :style="{ width: isFull ? '100%' : 'calc(50vw - 30px)' }">
|
<div class="nav_center" :style="{ width: isFull ? '100%' : 'calc(50vw - 30px)' }">
|
||||||
<centerPage :projectId="projectId" :isHide="isFull" />
|
<centerPage :projectId="projectIdTwo ? projectIdTwo : projectId" :isHide="isFull" />
|
||||||
</div>
|
</div>
|
||||||
<div class="nav_right" :style="{ right: isHideOther ? '-25vw' : '0' }">
|
<div class="nav_right" :style="{ right: isHideOther ? '-25vw' : '0' }">
|
||||||
<rightPage :projectId="projectId" />
|
<rightPage :projectId="projectIdTwo ? projectIdTwo : projectId" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -26,6 +26,10 @@ const userStore = useUserStoreHook();
|
|||||||
const projectId = computed(() => userStore.selectedProject.id);
|
const projectId = computed(() => userStore.selectedProject.id);
|
||||||
const isFull = ref(false);
|
const isFull = ref(false);
|
||||||
const isHideOther = ref(false);
|
const isHideOther = ref(false);
|
||||||
|
const urlParams = new URLSearchParams(new URL(window.location.href).search);
|
||||||
|
const projectIdTwo = urlParams.get('projectId');
|
||||||
|
const projectName = urlParams.get('projectName');
|
||||||
|
console.log(projectName);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 切换中心页面全屏
|
* 切换中心页面全屏
|
||||||
|
Reference in New Issue
Block a user