diff --git a/src/views/projectLarge/ProjectScreen/components/centerPage.vue b/src/views/projectLarge/ProjectScreen/components/centerPage.vue index d0c2451..977ec74 100644 --- a/src/views/projectLarge/ProjectScreen/components/centerPage.vue +++ b/src/views/projectLarge/ProjectScreen/components/centerPage.vue @@ -16,8 +16,8 @@
安全巡检 - -
{{ item.label }}
+
{{ item.createTime.slice(5, 16) }}
+
{{ item.label || '未佩戴安全帽' }}
@@ -89,19 +89,71 @@ const getInspectionList = async () => { const res = await getScreenSafetyInspection(props.projectId) const { code, data } = res if (code === 200) { + console.log(violation_level_type.value) 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.CesiumContainer(window.Earth1, { + compass: false, //罗盘 + }); + // 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(() => { getInspectionList() if (swiperContent.value && swiperContent.value.children.length > 0) { swiperItemWidth.value = swiperContent.value.children[0].clientWidth + 20 } }) - diff --git a/src/views/projectLarge/ProjectScreen/components/optionList.ts b/src/views/projectLarge/ProjectScreen/components/optionList.ts index bcdf958..64433d6 100644 --- a/src/views/projectLarge/ProjectScreen/components/optionList.ts +++ b/src/views/projectLarge/ProjectScreen/components/optionList.ts @@ -4,10 +4,10 @@ export let pieOption = { { type: 'text', left: 'center', - top: '40%', + top: '43%', style: { // 需要从接口替换 - text: '70%', + text: '0%', fontSize: 24, fontWeight: 'bold', fill: '#fff' @@ -16,7 +16,7 @@ export let pieOption = { { type: 'text', left: 'center', - top: '50%', + top: '55%', style: { text: '总进度', fontSize: 14, @@ -27,7 +27,7 @@ export let pieOption = { legend: { show: true, type: 'plain', - bottom: 20, + bottom: 0, itemWidth: 12, itemHeight: 12, textStyle: { @@ -38,7 +38,7 @@ export let pieOption = { type: 'pie', data: [], radius: [50, 80], - center: ['50%', '45%'], + center: ['50%', '50%'], itemStyle: { borderColor: '#fff', borderWidth: 1 @@ -73,7 +73,7 @@ export let barOption = { itemHeight: 12, // 调整文字与图标间距 data: ['计划流转面积', '已流转面积'], - top: 0, + top: 10, right: 20, textStyle: { color: '#fff', diff --git a/src/views/projectLarge/ProjectScreen/components/rightPage.vue b/src/views/projectLarge/ProjectScreen/components/rightPage.vue index 0d08c08..f583d02 100644 --- a/src/views/projectLarge/ProjectScreen/components/rightPage.vue +++ b/src/views/projectLarge/ProjectScreen/components/rightPage.vue @@ -4,12 +4,13 @@ <div class="content" v-html="generalize"></div> </div> - <div class="endPage"> + <div class="midPage"> <Title title="形象进度" /> - <div class="chart_container"> - <div ref="pieChartRef" class="echart" /> - <div ref="lineChartRef" class="echart" /> - </div> + <div ref="pieChartRef" class="echart" /> + </div> + <div class="endPage"> + <Title title="土地流转情况" /> + <div ref="lineChartRef" class="echart" /> </div> </div> </template> @@ -40,8 +41,8 @@ let lineChart: any = null; const designAreaData = ref([]) const transferAreaData = ref([]) // 饼图数据 -const pieData = [ - { label: 'areaPercentage', name: '厂区', value: 0 }, +let pieData = [ + { label: 'areaPercentage', name: '场区', value: 0 }, { label: 'roadPercentage', name: '道路', value: 0 }, { label: 'collectorLinePercentage', name: '集电线路', value: 0 }, { label: 'exportLinePercentage', name: '送出线路', value: 0 }, @@ -79,12 +80,6 @@ const initLineChart = () => { lineChart.setOption(barOption); } -// 响应窗口大小变化 -const handleResize = () => { - if (pieChart) pieChart.resize(); - if (lineChart) lineChart.resize(); -}; - /** * 获取项目土地统计数据 */ @@ -109,6 +104,8 @@ const getScreenImgProcessData = async () => { pieData.forEach((item: any) => { item.value = data[item.label] }) + pieData = pieData.filter((item: any) => item.value != '0.0') + console.log(pieData) initPieChart() } } @@ -118,12 +115,18 @@ const getScreenImgProcessData = async () => { */ const getScreenGeneralizeData = async () => { const res = await getScreenGeneralize(props.projectId); - const { data, code } = res + const { data, code, msg } = res if (code === 200) { - generalize.value = data + generalize.value = msg } } +// 响应窗口大小变化 +const handleResize = () => { + if (pieChart) pieChart.resize(); + if (lineChart) lineChart.resize(); +}; + // 组件挂载时初始化图表 onMounted(() => { getScreenLandData() @@ -137,7 +140,6 @@ onMounted(() => { // 组件卸载时清理 onUnmounted(() => { - window.removeEventListener('resize', handleResize); if (pieChart) { pieChart.dispose(); pieChart = null; @@ -156,6 +158,7 @@ onUnmounted(() => { height: 100%; .topPage, + .midPage, .endPage { display: flex; flex-direction: column; @@ -166,20 +169,13 @@ onUnmounted(() => { box-sizing: border-box; } - .endPage { + .endPage, + .midPage { flex: 1; margin-top: 23px; - .chart_container { - display: flex; - flex-direction: column; - gap: 5px; - width: 100%; - height: 100%; - } - .echart { - height: 48%; + height: 100%; width: 100%; } } @@ -189,7 +185,6 @@ onUnmounted(() => { height: 100px; margin: 0 15px; padding: 0 10px; - margin-top: 15px; box-sizing: border-box; overflow-y: auto;