企业详情样式调整； 企业详情加载范围瀑布图；

shuishen

2024-11-08 a8b22d9a1bbee15caa378c7c3af519db51c97efc

 src/views/companyInfo/index.vue

@@ -1,100 +1,107 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-11-08 11:00:30
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-08 12:10:21
 * @FilePath: \bigScreen\src\views\companyInfo\index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<script setup>
import leftContainer from './components/leftContainer.vue'
import qyfw from "@/assets/json/qyfw"
import rightContainer from './components/rightContainer.vue'
import centerContainer from './components/centerContainer.vue' // 修改这里
import mainMenuVue from './components/mainMenu.vue';
import mainMenuVue from './components/mainMenu.vue'
import { onUnmounted } from "vue"

let buttonIndex = ref(1);
let buttonIndex = ref(1)
let data = reactive({
  companyInfo: {}
})

let curCompanyWall = new DC.VectorLayer('curCompanyWall')
window.$viewer.addLayer(curCompanyWall)

data.companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
let curCompany = qyfw.features.find(item => item.properties.name == data.companyInfo.name)

console.log(curCompany.geometry.coordinates[0].map(d => [...d, 150].join(',')).join(';'), 111)

let wall = new DC.Wall(
  curCompany.geometry.coordinates[0].map(d => [...d, 150].join(',')).join(';')
)

wall.setStyle({
  material: new DC.WallTrailMaterialProperty({
    color: DC.Color.YELLOW,
    speed: 2
  })
})
curCompanyWall.addOverlay(wall)

onMounted(() => {
    // localStorage.setItem('buttonIndex', buttonIndex.value);
  window.$viewer.zoomToPosition(new DC.Position(
    Number(data.companyInfo.lng),
    Number(data.companyInfo.lat),
    800,
    0,
    -80,
    0
  ), () => {
  })
})

onUnmounted(() => {
  window.$viewer.removeLayer(curCompanyWall)
})

const handleChildEvent = (data) => {
    console.log('子组件触发的事件，传递的数据:', data);
    buttonIndex.value = data;
    // localStorage.setItem('buttonIndex', data);
  console.log('子组件触发的事件，传递的数据:', data)
  buttonIndex.value = data
  // localStorage.setItem('buttonIndex', data);

};
}
</script>

<template>
    <div class="container page-container">
        <!-- <left-container></left-container> -->
        <centerContainer :button-index="buttonIndex" @childEvent="handleChildEvent"></centerContainer>
        <right-container :button-index="buttonIndex"></right-container>
        <main-menu-vue></main-menu-vue>
  <div class="container cur-page-container">
    <div class="main-header">
      <centerContainer :button-index="buttonIndex" @childEvent="handleChildEvent"></centerContainer>
    </div>

    <div class="main-container">
      <right-container :button-index="buttonIndex"></right-container>
    </div>
    <main-menu-vue></main-menu-vue>
  </div>
</template>

<style lang="scss" scoped>
.container {
  position: absolute;
  width: 100%;
  height: 100%;

  .main-header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    height: 6vh;
    pointer-events: auto;
  }

  .main-container {
    position: absolute;
    top: 80px;
    left: 40px;
    right: 40px;
    bottom: 40px;
  }
}

.page-container {

    .left-container,
    .right-container {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0;
        width: 400px;
        height: calc(100% - 20px);
        pointer-events: auto;
        background: rgba(28, 115, 195, 0.2);

        &>div {
            display: flex;
            flex-direction: column;

            .title-box {
                position: relative;
                height: 38px;
                line-height: 38px;
                background: url(/images/title-box.png) no-repeat center / 100% 100%;

                .title {
                    margin-left: 30px;
                    text-align: left;
                    font-size: 18px;
                    font-family: Alibaba PuHuiTi;
                    font-weight: bold;
                    font-style: italic;
                    color: transparent;
                    text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
                    background-image: linear-gradient(180deg, rgba(14, 197, 236, 0.36) 5%, rgba(49, 190, 255, 0.36) 20%, rgba(255, 255, 255, 1) 40%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparen
                }

                .title-sub {
                    position: absolute;
                    right: 10px;
                    bottom: 4px;
                    line-height: 1;
                }
            }

            .content-box {
                display: flex;
                flex-direction: column;
                height: calc(100% - 38px);
            }
        }

        .chart-box {
            // background:  rgba(42,64,120,0.68);
        }
    }

    .left-container {}

    .right-container {
        right: 0;
    }
}
.cur-page-container {}
</style>