feat: 甘特图嵌入

Gary Gu

7 days ago 11836748b73632ca1a28bc2a54a0098044feb5d8

 src/views/Home.vue

@@ -9,32 +9,59 @@
  </div>
  <div class="time-info">
   <div class="time-info-item">
    <i class="el-icon-date" style="color: #FFBF00;font-size: 20px;"></i>
          <i class="el-icon-date" style="color: #ffbf00; font-size: 20px"></i>
    <div class="text-white text-[16px] ml-[4px]">工程倒计时/天</div>
    <div class="text-[#FFBF00] text-[24px] font-bold ml-[28px]">{{endDate}}</div>
   </div>
   <div class="time-line">
   </div>
        <div class="time-line"> </div>
  </div>
 </div>
 <div class="bottom-nav">
  <div class="content-wrapper mb-[20px]">
   <!-- 720菜单 -->
   <div class="side-menu z-[100]" v-if="currentView === '720'">
    <el-cascader popper-class="custom-dropdown" v-model="panoValue" :options="panoList" @change="handlePanoChange" :props="{ value: 'id',label: 'label',children: 'Children'}"/>
          <el-cascader
            popper-class="custom-dropdown"
            v-model="panoValue"
            :options="panoList"
            @change="handlePanoChange"
            :props="{ value: 'id', label: 'label', children: 'Children' }"
          />
   </div>
    <!-- 项目实况-->
    <div class="side-menu z-[100]" v-if="currentView === 'project'">
      <el-cascader popper-class="custom-dropdown" v-model="liveValue" :options="liveList" @change="handleLiveChange" :props="{ value: 'id',label: 'label',children: 'JSCProjectMonitorList'}"/>
          <el-cascader
            popper-class="custom-dropdown"
            v-model="liveValue"
            :options="liveList"
            @change="handleLiveChange"
            :props="{ value: 'id', label: 'label', children: 'JSCProjectMonitorList' }"
          />
    </div>


    <!-- 主要内容区域 -->
   <div class="main-content" :style="isFullScreen  ? fullScreenStyle : ''" v-loading="isLoading">
    <!-- 模型 / 720 -->
    <div class="w-full h-full" :style="isFullScreen  ? fullScreenStyle : 'width: 100%; height: 100%;'" v-if="currentView === '720' || currentView === 'model'">
      <iframe id="model-iframe" class="content-frame w-full h-full" src="" frameborder="0" :style="isFullScreen ? fullScreenModelStyle : ''" v-if="currentView === 'model'"></iframe>
      <iframe ref="panoiframe" id="panoviewpreview" class="pano-frame w-full h-full" :style="isFullScreen ? fullScreenPanoStyle : ''" v-if="currentView === '720'"></iframe>
          <div
            class="w-full h-full"
            :style="isFullScreen ? fullScreenStyle : 'width: 100%; height: 100%;'"
            v-if="currentView === '720' || currentView === 'model'"
          >
            <iframe
              id="model-iframe"
              class="content-frame w-full h-full"
              src=""
              frameborder="0"
              :style="isFullScreen ? fullScreenModelStyle : ''"
              v-if="currentView === 'model'"
            ></iframe>
            <iframe
              ref="panoiframe"
              id="panoviewpreview"
              class="pano-frame w-full h-full"
              :style="isFullScreen ? fullScreenPanoStyle : ''"
              v-if="currentView === '720'"
            ></iframe>
    </div>
     <!-- 720全景图版本选择 -->
     <!--<div class="w-full h-[120px] bg-[rgba(19,40,64,0.8)] absolute bottom-0 left-0 right-0 flex items-center py-[10px]" :style="isFullScreen ? 'z-index: 100; height:' : ''" v-if="currentView === '720'">
@@ -46,52 +73,56 @@
     </div>-->

     <!-- 放大镜 -->
     <div class="w-[80px] h-[80px] bg-[#008C99] absolute top-[-40px] right-[-40px] rounded-[50%] z-[100]" v-if="currentView === 'model' || currentView === '720'" @click="handleZoomOut">
          <div
            class="w-[80px] h-[80px] bg-[#008C99] absolute top-[-40px] right-[-40px] rounded-[50%] z-[100]"
            v-if="currentView === 'model' || currentView === '720'"
            @click="handleZoomOut"
          >
      <img src="../assets/images/backgrounds/zoomin.png" alt="放大" class="w-[16px] h-[16px] mt-[50px] ml-[15px] cursor-pointer" v-if="isFullScreen" />
      <img src="../assets/images/backgrounds/zoomout.png" alt="缩小" class="w-[16px] h-[16px] mt-[50px] ml-[15px] cursor-pointer" v-else />
     </div>
    </div>
    <!-- 项目 -->
    <div class="w-full h-full" v-if="currentView === 'project'">
      <video controls muted controlslist="nodownload" autoplay class="video-box" ref="videoElement" style="width: 100%; height: 100%; background-color: #000;"></video>
          <video
            controls
            muted
            controlslist="nodownload"
            autoplay
            class="video-box"
            ref="videoElement"
            style="width: 100%; height: 100%; background-color: #000"
          ></video>
    </div>
   </div>

  </div>
  <div class="chart-content">
   <div
class="w-full h-[4vh] mb-[1vh]" :style="{
        class="w-full h-[4vh] mb-[1vh]"
        :style="{
          backgroundImage: `url(${bottomImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '100% 100%'
        }">
          backgroundSize: '100% 100%',
        }"
      >
   </div>
   <div class="chart-container" :style="sectionStyle">
    <img src="../assets/images/backgrounds/shigongjinduchart.png" alt="施工进度" class="w-full h-full" />
        <Gantt />
   </div>
  </div>
 </div>

</div>
</template>

<script>
  import flvjs from 'flv.js'
import {
 nextTick
} from 'vue'
import {
 HomeAPI
} from "../api/home";
import {
 getProjectId,
 getToken,
 getProjectEndDate
} from "../utils/getToken.js";
  import flvjs from "flv.js";
  import { nextTick } from "vue";
  import { HomeAPI } from "../api/home";
  import { getProjectId, getToken, getProjectEndDate } from "../utils/getToken.js";
  import Gantt from "@/components/Gantt.vue";
export default {
 name: 'Home',
 components: {},
    name: "Home",
    components: { Gantt },
  props: {
    selectedId: {
      type: String,
@@ -101,88 +132,99 @@
 data() {
  return {
    liveValue:[],
    playerStatus: '未就绪',
    errorMessage:'',
        playerStatus: "未就绪",
        errorMessage: "",
    flvPlayer:null,
    videoSrc: "",
   currentView: 'model',
        currentView: "model",
   chartOptions: {
    id: 'shigongjinduChart',
          id: "shigongjinduChart",
    options: {
     title: {
      text: '施工进度'
     }
    }
              text: "施工进度",
   },
   bottomImage: new URL('@/assets/images/titles/shigong.png',
    import.meta.url).href,
          },
        },
        bottomImage: new URL("@/assets/images/titles/shigong.png", import.meta.url).href,
   isLoading: false,
   panoVersionList: [],
   isFullScreen: false,
   fullScreenStyle: '',
   fullScreenPanoStyle: '',
   fullScreenModelStyle: '',
   panoList: [{
    value: 'zhinan',
    label: '指南',
    children: [{
     value: 'shejiyuanze',
     label: '设计原则'
    }, {
     value: 'daohang',
     label: '导航'
    }]
   }, {
    value: 'zujian',
    label: '组件',
    children: [{
     value: 'basic',
     label: 'Basic',
    }, {
     value: 'form',
     label: 'Form',
    }, {
     value: 'data',
     label: 'Data',
    }, {
     value: 'notice',
     label: 'Notice',
    }, {
     value: 'navigation',
     label: 'Navigation',
    }, {
     value: 'others',
     label: 'Others',
    }],
   }],
        fullScreenStyle: "",
        fullScreenPanoStyle: "",
        fullScreenModelStyle: "",
        panoList: [
          {
            value: "zhinan",
            label: "指南",
            children: [
              {
                value: "shejiyuanze",
                label: "设计原则",
              },
              {
                value: "daohang",
                label: "导航",
              },
            ],
          },
          {
            value: "zujian",
            label: "组件",
            children: [
              {
                value: "basic",
                label: "Basic",
              },
              {
                value: "form",
                label: "Form",
              },
              {
                value: "data",
                label: "Data",
              },
              {
                value: "notice",
                label: "Notice",
              },
              {
                value: "navigation",
                label: "Navigation",
              },
              {
                value: "others",
                label: "Others",
              },
            ],
          },
        ],
   panoValue: [],
    liveList: [],
    backgroundImage: new URL('@/assets/images/backgrounds/cover_bg.png',
    import.meta.url).href,
        backgroundImage: new URL("@/assets/images/backgrounds/cover_bg.png", import.meta.url).href,
   endDate: 0,
  }
      };
 }, 
 computed: {
  sectionStyle() {
   return {
    backgroundImage: `url(${this.backgroundImage})`,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center center',
    backgroundSize: '100% 100%'
   }
          backgroundRepeat: "no-repeat",
          backgroundPosition: "center center",
          backgroundSize: "100% 100%",
        };
  }, 
  projectId() {
   return getProjectId()
        return getProjectId();
  },
  projectEndDate() {
    return getProjectEndDate()
  }
        return getProjectEndDate();
      },
 },
 watch: {
  projectEndDate:{
      deep: true,
      handler (newVal) {
        console.log('newVal', newVal)
          console.log("newVal", newVal);
      const date = new Date(newVal);
      // 获取当前日期作为Date对象
      const now = new Date();
@@ -190,8 +232,8 @@
      const diffTime = Math.abs(now - date);
      // 将毫秒转换为天数
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
      this.endDate = diffDays
    }
          this.endDate = diffDays;
        },
  },
   selectedId: {
     handler(newVal) {
@@ -205,22 +247,22 @@
 },
 mounted() {
  setTimeout(() => {
    console.log('projectEndDate', getProjectEndDate())
    this.modelShow()
  }, 1000)
        console.log("projectEndDate", getProjectEndDate());
        this.modelShow();
      }, 1000);
 },
 updated() {
  if (this.$refs.panoiframe) {
    // IE
    if (this.$refs.panoiframe.attachEvent) {
      this.$refs.panoiframe.attachEvent('onload', () => {
        console.log('loading')
          this.$refs.panoiframe.attachEvent("onload", () => {
            console.log("loading");
        // 加载成功
        this.isLoading = false;
      });
    } else {
      this.$refs.panoiframe.onload = () => {
        console.log('loading2')
            console.log("loading2");
        // 加载成功
        this.isLoading = false;
      };
@@ -230,119 +272,121 @@

 methods: {
  getItemImg (item) {
    return `${window.ProjectConfig.panoBaseUrl}/Panorama${this.panoObj.PbUrl}/vtour/panos/${item.PsScenename}.tiles/thumb.jpg`
        return `${window.ProjectConfig.panoBaseUrl}/Panorama${this.panoObj.PbUrl}/vtour/panos/${item.PsScenename}.tiles/thumb.jpg`;
  },
  handleZoomOut() {
   console.log('放大')
   this.isFullScreen = !this.isFullScreen
        console.log("放大");
        this.isFullScreen = !this.isFullScreen;
   if (this.isFullScreen) {
      const clientX = document.documentElement.clientWidth || document.body.clientWidth
      const clientY = document.documentElement.clientHeight || document.body.clientHeight
      this.fullScreenStyle = `width: ${clientX - 40}px; height: ${clientY - 120}px; margin:20px; position: fixed; top: 80px; left: 0;z-index: 100;background-color: #fff;overflow: hidden;`
      if (this.currentView === '720') {
        this.fullScreenPanoStyle = `width: 100%; height: 100%; z-index: 100; `
      } else if(this.currentView === 'model'){
        this.fullScreenModelStyle = `width: ${clientX - 40}px; height: ${clientY - 120}px; margin:20px; position: fixed; top: 80px; left: 0;z-index: 100;background-color: #fff;overflow: hidden;`
          const clientX = document.documentElement.clientWidth || document.body.clientWidth;
          const clientY = document.documentElement.clientHeight || document.body.clientHeight;
          this.fullScreenStyle = `width: ${clientX - 40}px; height: ${
            clientY - 120
          }px; margin:20px; position: fixed; top: 80px; left: 0;z-index: 100;background-color: #fff;overflow: hidden;`;
          if (this.currentView === "720") {
            this.fullScreenPanoStyle = `width: 100%; height: 100%; z-index: 100; `;
          } else if (this.currentView === "model") {
            this.fullScreenModelStyle = `width: ${clientX - 40}px; height: ${
              clientY - 120
            }px; margin:20px; position: fixed; top: 80px; left: 0;z-index: 100;background-color: #fff;overflow: hidden;`;
      }
    }
  },
  handleChange(view) {
   this.isLoading = true
   this.currentView = view
   if (view === 'model') {
        this.isLoading = true;
        this.currentView = view;
        if (view === "model") {
    nextTick(() => {
     this.modelShow()
    })
   } else if (view === '720') {
            this.modelShow();
          });
        } else if (view === "720") {
    nextTick(() => {
     this.panoShow()
    })
   } else if (view === 'project') {
            this.panoShow();
          });
        } else if (view === "project") {
    nextTick(() => {
      this.getProjectLive(this.selectedId)
    })
            this.getProjectLive(this.selectedId);
          });
   }
  },
  handlePanoChange(value) {
   console.log('value', value)
   this.isLoading = true
   this.panoList.forEach(item => {
        console.log("value", value);
        this.isLoading = true;
        this.panoList.forEach((item) => {
    if (item.LabelId === value[0]) {
     item.Children.forEach(item2 => {
            item.Children.forEach((item2) => {
      if (item2.PbGuid === value[1]) {
       this.panoObj = item2
       console.log('panoObj', this.panoObj)
       this.getPanoPhase(item2)
                this.panoObj = item2;
                console.log("panoObj", this.panoObj);
                this.getPanoPhase(item2);
      }
     })
            });
    }
   })
        });
  },
  modelShow() {
   const iframe = document.getElementById('model-iframe')
   const token = getToken()
   const projectId = this.projectId
   let ifrSrc = ''
   console.log('模型中查看')
        const iframe = document.getElementById("model-iframe");
        const token = getToken();
        const projectId = this.projectId;
        let ifrSrc = "";
        console.log("模型中查看");
    //  ifrSrc = `${window.ProjectConfig.modelUrl}?token=${token}&projectId=${projectId}&isPreview=1&edit=false`
   ifrSrc = window.ProjectConfig.modelUrl
   iframe.src = ifrSrc
   console.log('加载iframe地址', ifrSrc)
   this.isLoading = false
        ifrSrc = window.ProjectConfig.modelUrl;
        iframe.src = ifrSrc;
        console.log("加载iframe地址", ifrSrc);
        this.isLoading = false;
  },
  panoShow() {
   const data = {
    projectId: this.projectId
   }
   HomeAPI.GetProjectPanoramaList(data).then(res => {
    console.log('全景图', res)
          projectId: this.projectId,
        };
        HomeAPI.GetProjectPanoramaList(data).then((res) => {
          console.log("全景图", res);
    if (res.Ret === 1) {
     const result = res.Data
            const result = res.Data;
     if (result.length > 0) {
      result.forEach(element => {
       element.id = element.LabelId
       element.label = element.LabelName
       element.Children.forEach(item => {
        item.id = item.PbGuid
        item.label = item.PbName
              result.forEach((element) => {
                element.id = element.LabelId;
                element.label = element.LabelName;
                element.Children.forEach((item) => {
                  item.id = item.PbGuid;
                  item.label = item.PbName;
       });
      });
      this.panoList = result
      this.panoValue = [result[0].id, result[0].Children[0].id]
      this.panoObj = result[0].Children[0]
      this.getPanoPhase()
              this.panoList = result;
              this.panoValue = [result[0].id, result[0].Children[0].id];
              this.panoObj = result[0].Children[0];
              this.getPanoPhase();
     }
    }
   })

        });
  },
  getPanoPhase() {
   const data = {
    pbguid: this.panoObj.PbGuid
   }
   HomeAPI.GetScenesByPbGuid(data).then(res => {
    console.log('全景图阶段', res)
          pbguid: this.panoObj.PbGuid,
        };
        HomeAPI.GetScenesByPbGuid(data).then((res) => {
          console.log("全景图阶段", res);
    if (res.Ret === 1) {
     this.panoVersionList = res.Data
     this.panoPreview(this.panoObj, this.panoVersionList[0])
            this.panoVersionList = res.Data;
            this.panoPreview(this.panoObj, this.panoVersionList[0]);
    }
   })
        });
  },
  panoPreview(item, scene) {
    // /LinkShare/PanoShare/:PanoId/:organizeId/:StartScene
    // PanoId：全景图的id，organizeId：项目id，StartScene:初始场景id
    const panoFrame = document.getElementById('panoviewpreview')
        const panoFrame = document.getElementById("panoviewpreview");
    nextTick(() => {
      if(panoFrame.src){
        panoFrame.removeAttribute("src"); //先移除上一次的src地址
      }
      setTimeout(()=>{
        let ifrSrc = ''
        ifrSrc = `${window.ProjectConfig.panoUrl}/#/LinkShare/PanoShare/${scene.PbGuid}/${this.projectId}/${scene.PsScenename}`
            let ifrSrc = "";
            ifrSrc = `${window.ProjectConfig.panoUrl}/#/LinkShare/PanoShare/${scene.PbGuid}/${this.projectId}/${scene.PsScenename}`;
        panoFrame.setAttribute("src",ifrSrc);
      }, 300)
      
    })
          }, 300);
        });
  //   removepano('krpanoSWFObject')
  //  const basepath = `${window.ProjectConfig.panoUrl}/Panorama${item.PbUrl}/vtour/`
  //  const xmlurl = `${basepath}tour.xml?r=${(Math.random() * 100000 + 1)}`
@@ -365,15 +409,15 @@
  //  })
  },
  sceneShow() {
   const iframe = document.getElementById('scene-iframe')
   let ifrSrc = ''
   ifrSrc = window.ProjectConfig.sceneUrl
   iframe.src = ifrSrc
   this.isLoading = false
        const iframe = document.getElementById("scene-iframe");
        let ifrSrc = "";
        ifrSrc = window.ProjectConfig.sceneUrl;
        iframe.src = ifrSrc;
        this.isLoading = false;
  },
  mounted() {
   this.isLoading = true
   this.modelShow()
        this.isLoading = true;
        this.modelShow();
  },
   /**
    * 获取项目实况数据
@@ -383,46 +427,46 @@
     const params = {
       bindId,
     };
     HomeAPI.GetJSCProjectMonitor(params).then(res => {
        HomeAPI.GetJSCProjectMonitor(params).then((res) => {
       if (res.Ret === 1) {
         const result = res.Data
            const result = res.Data;
         if (result.length > 0) {
           console.log('实况数据', result);
           result.forEach(element => {
             element.id = element.BindId
             element.label = element.BindName
             element.JSCProjectMonitorList.forEach(item => {
               item.id = item.MonitorUrl
               item.label = item.MonitorName
              console.log("实况数据", result);
              result.forEach((element) => {
                element.id = element.BindId;
                element.label = element.BindName;
                element.JSCProjectMonitorList.forEach((item) => {
                  item.id = item.MonitorUrl;
                  item.label = item.MonitorName;
             });
           });
         }
         this.isLoading = false
         this.liveList = result
         this.liveValue = [result[0].id, result[0].JSCProjectMonitorList[0].id]
         this.videoSrc = this.liveList[0].JSCProjectMonitorList[0].MonitorUrl
            this.isLoading = false;
            this.liveList = result;
            this.liveValue = [result[0].id, result[0].JSCProjectMonitorList[0].id];
            this.videoSrc = this.liveList[0].JSCProjectMonitorList[0].MonitorUrl;
         this.loadVideo();
       }
     })
        });
   },
   /**
    * 处理实况的实时变化
    * @param value
    */
   handleLiveChange(value) {
     console.log('实况变化', value);
     this.videoSrc = value[1]
        console.log("实况变化", value);
        this.videoSrc = value[1];
     this.loadVideo();
   },
   // 检查FLV支持
   checkFlvSupport() {
     if (!flvjs.isSupported()) {
       this.errorMessage = '当前浏览器不支持FLV播放'
       this.playerStatus = '不支持'
       return false
          this.errorMessage = "当前浏览器不支持FLV播放";
          this.playerStatus = "不支持";
          return false;
     }
     this.playerStatus = '已就绪'
     return true
        this.playerStatus = "已就绪";
        return true;
   },
   /**
    * 销毁播放器实例
@@ -430,68 +474,69 @@
   destroyPlayer() {
     if (this.flvPlayer) {
       try {
         this.flvPlayer.pause()
         this.flvPlayer.unload()
         this.flvPlayer.detachMediaElement()
         this.flvPlayer.destroy()
         this.flvPlayer = null
            this.flvPlayer.pause();
            this.flvPlayer.unload();
            this.flvPlayer.detachMediaElement();
            this.flvPlayer.destroy();
            this.flvPlayer = null;
       } catch (error) {
         console.error('销毁播放器时出错:', error)
            console.error("销毁播放器时出错:", error);
       }
     }
     this.isReady = false
        this.isReady = false;
   },
   /**
    * 加载视频
    */
   loadVideo() {
     if (!this.videoSrc.trim()) {
       this.errorMessage = '请播放有效的视频URL'
       return
          this.errorMessage = "请播放有效的视频URL";
          return;
     }

     if (!this.checkFlvSupport()) {
       return
          return;
     }
     this.errorMessage = ''
     this.playerStatus = '加载中...'
        this.errorMessage = "";
        this.playerStatus = "加载中...";

     try {
       // 销毁旧的播放器实例
       this.destroyPlayer()
          this.destroyPlayer();

       // 创建FLV播放器
       this.flvPlayer = flvjs.createPlayer({
         type: 'flv',
          this.flvPlayer = flvjs.createPlayer(
            {
              type: "flv",
         url: this.videoSrc,
         isLive: false, // 如果是直播流，设置为true
         cors: true,
         withCredentials: false
       }, {
              withCredentials: false,
            },
            {
         enableWorker: false,
         enableStashBuffer: true,
         stashInitialSize: 128,
         autoCleanupSourceBuffer: true
       })
              autoCleanupSourceBuffer: true,
            },
          );

       // 绑定事件监听器
       // this.bindPlayerEvents()

       // 绑定到video元素
       this.flvPlayer.attachMediaElement(this.$refs.videoElement)
          this.flvPlayer.attachMediaElement(this.$refs.videoElement);

       // 开始加载
       this.flvPlayer.load()

          this.flvPlayer.load();
     } catch (error) {
       console.error('加载视频失败:', error)
       this.errorMessage = '视频加载失败: ' + error.message
       this.playerStatus = '加载失败'
          console.error("加载视频失败:", error);
          this.errorMessage = "视频加载失败: " + error.message;
          this.playerStatus = "加载失败";
     }
   },
 }

}
    },
  };
</script>

<style lang="scss" scoped>
@@ -530,7 +575,7 @@
.nav-item.active {
 background: rgba(255, 191, 0, 0.2);
 border-radius: 2px;
 border: 1px solid #FFBF00;
    border: 1px solid #ffbf00;
}

.time-info {
@@ -543,13 +588,12 @@
.time-info-item {
 display: flex;
 align-items: center;

}

.time-line {
 width: 200px;
 height: 1px;
 background: linear-gradient(270deg, rgba(255, 191, 0, 0) 0%, #FFBF00 100%);
    background: linear-gradient(270deg, rgba(255, 191, 0, 0) 0%, #ffbf00 100%);
}

.content-wrapper {
@@ -701,12 +745,12 @@

.tab.active {
 background-color: #2a4d7d;
}
</style><style lang="scss">
  }</style
><style lang="scss">
.custom-dropdown {
 background-color: rgba(33, 72, 115, 0.9);
 border-radius: 2px;
 border: 1px solid #3068A5;
    border: 1px solid #3068a5;

 .el-cascader-menu {
  color: #fff;
@@ -734,7 +778,7 @@

 .el-cascader-node:not(.is-disabled):focus,
 .el-cascader-node:not(.is-disabled):hover {
  background: #3068A5;
      background: #3068a5;
 }

 .popper__arrow {