提交
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