package.json

@@ -29,9 +29,11 @@
    "axios": "^1.2.1",
    "crypto-js": "^4.1.1",
    "dayjs": "^1.11.7",
    "dhtmlx-gantt": "^9.0.11",
    "echarts": "^5.4.1",
    "echarts-gl": "2.0.9",
    "element-ui": "^2.15.12",
    "flv.js": "^1.6.2",
    "jquery": "^3.7.1",
    "lib-flexible": "^0.3.2",
    "lodash-es": "^4.17.21",

 public/config.js

@@ -8,12 +8,12 @@
 */
window.ProjectConfig = {
    // axiosBaseURL: "http://47.117.124.20:2002/",
    axiosBaseURL: "http://8.140.54.245:5000",
    axiosBaseURL: "http://101.201.155.10:4011",
    axiosTimeout: 1000 * 30, //毫秒
    panoUrl: 'http://8.140.54.245:4010', // 全景预览地址
    panoBaseUrl: 'http://8.140.54.245:5000', // 全景图及文档接口
    modelUrl: 'http://8.140.54.245:4010/#/Home/sceneManagementDetail?shareUrlToken=AA82C10E34245412D8E276559C8582363A2CD38177A286C582C0471DC44FA5D836CAFB932F2C33B44201FE828EF6545397771FA675F7518619FAD578EB06FB6FA7671DFBEA34C32F8241C1EF1DDEA645', // 模型预览地址
    panoUrl: 'http://101.201.155.10:4010', // 全景预览地址
    panoBaseUrl: 'http://101.201.155.10:4011', // 全景图及文档接口
    modelUrl: 'http://101.201.155.10:4010/#/Home/sceneManagementDetail?shareUrlToken=AA82C10E34245412D8E276559C8582363A2CD38177A286C582C0471DC44FA5D836CAFB932F2C33B44201FE828EF6545397771FA675F7518619FAD578EB06FB6FA7671DFBEA34C32F8241C1EF1DDEA645', // 模型预览地址
    sceneUrl: 'http://resources.vothing.com/mp4/12.mp4', // 实况地址
    projectId: 'de42bc0a-9a5a-4d43-877f-0ae980f905b2', // 项目id
    xieTongIframeSrc: 'http://8.140.54.245:4010/#/', // BIMe地址
    xieTongIframeSrc: 'http://101.201.155.10:4010/#/', // BIMe地址
}

 src/Dashboard.vue

@@ -15,172 +15,183 @@
      backgroundImage: `url(${backgroundImage})`,
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center center',
      backgroundSize: 'cover'
      backgroundSize: 'cover',
    }"
  >
    <!--头部-->
    <app-header class="absolute z-[100] top-0 left-0 right-0" :selected-id="currentProjectId" @onHomeClick="switchView" />


    <app-header
      class="absolute z-[100] top-0 left-0 right-0"
      :selected-id="currentProjectId"
      @onHomeClick="switchView"
      @onSelectChange="onSelectChange"
      @fullscreenChange="fullscreenChange"
    />

    <!--页面内容-->
    <div class="content-wrapper px-[22px] py-[10px] absolute inset-0 top-[80px] flex gap-[20px]">
      <div class="flex-1 min-w-0">
        <!-- 左侧模块 -->
        <div class="w-full h-full">
          <project-view v-if="isReady"/>
          <project-view v-if="isReady" />
        </div>
      </div>
      <div class="flex-1 min-w-0">
        <!-- 中间模块 -->
        <div class="w-full h-full">
          <equipment-view v-if="isReady"/>
          <equipment-view :selected-id="selectedId" v-if="isReady" />
        </div>
      </div>
      <div class="w-[1080px]">
        <!-- 右侧模块 -->
        <div class="w-full h-full">
          <Home v-if="isReady"/>
          <Home v-if="isReady" :selected-id="selectedId" :is-full-screen="isFullScreen" />
        </div>
      </div>
    </div>

<!--    <div class="absolute inset-0 top-[80px] flex" v-if="clickTab === 'xietong'">
    <!--    <div class="absolute inset-0 top-[80px] flex" v-if="clickTab === 'xietong'">
      <iframe :src="iframeSrc" class="xieTongIframe" frameborder='0'></iframe>
    </div>-->

    <!--multiverse渲染容器
    <div id="renderDom" class="absolute z-[40] top-0 bottom-0 left-0 right-0 w-full h-full"></div>-->


  </main>
</template>

<script>
import Vue from "vue";
import { mapGetters } from "vuex";
import Header from "./components/Header.vue";
import Home from "./views/Home.vue";
import ProjectView from "./views/ProjectView.vue";
import { sceneJSON } from "./sceneJSON.js";
import EquipmentView from "./views/EquipmentView.vue";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import relativeTime from "dayjs/plugin/relativeTime";
import { HomeAPI } from "./api/home";
dayjs.locale("zh-cn");
dayjs.extend(relativeTime);
Vue.prototype.$dayjs = dayjs;
  import Vue from "vue";
  import { mapGetters } from "vuex";
  import Header from "./components/Header.vue";
  import Home from "./views/Home.vue";
  import ProjectView from "./views/ProjectView.vue";
  import { sceneJSON } from "./sceneJSON.js";
  import EquipmentView from "./views/EquipmentView.vue";
  import dayjs from "dayjs";
  import "dayjs/locale/zh-cn";
  import relativeTime from "dayjs/plugin/relativeTime";
  import { HomeAPI } from "./api/home";
  dayjs.locale("zh-cn");
  dayjs.extend(relativeTime);
  Vue.prototype.$dayjs = dayjs;

import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;
  import * as echarts from "echarts";
  Vue.prototype.$echarts = echarts;

import { nanoid } from "nanoid";
Vue.prototype.$nanoid = nanoid;
  import { nanoid } from "nanoid";
  Vue.prototype.$nanoid = nanoid;

export default {
  name: "Dashboard",
  components: {
    "app-header": Header,
    "Home": Home,
    "project-view": ProjectView,
    "equipment-view": EquipmentView  
  },
  data() {
    return {
      backgroundImage: new URL('@/assets/images/backgrounds/screen.png', import.meta.url).href,
      currentProjectId: '1c179617-a7d9-4243-b813-84fa55a17ce7',
      isReady: false,
      clickTab:'home',
      iframeSrc: window.ProjectConfig.xieTongIframeSrc
    };
  },
  computed: {
    ...mapGetters("common", [])
  },
  watch: {
  },
  mounted() {
    this.getLoginInfo();
  },
  beforeDestroy() {
    this.resetEngineRelated();
  },
  methods: {
    /**
     * 切换视图
     * @param val
     */
    switchView(val){
      switch (val){
        case 'xietong':
          window.open(window.ProjectConfig.xieTongIframeSrc, '_blank');
          break;
      }
  export default {
    name: "Dashboard",
    components: {
      "app-header": Header,
      Home: Home,
      "project-view": ProjectView,
      "equipment-view": EquipmentView,
    },
    //重置引擎相关的东西
    resetEngineRelated() {
      window.scene = window.underlay = null;
    data() {
      return {
        backgroundImage: new URL("@/assets/images/backgrounds/screen.png", import.meta.url).href,
        currentProjectId: "1c179617-a7d9-4243-b813-84fa55a17ce7",
        isReady: false,
        clickTab: "home",
        iframeSrc: window.ProjectConfig.xieTongIframeSrc,
        selectedId: "",
        isFullScreen: false,
      };
    },
    //响应切换地图
    onChangeMap(item) {
      if (window.scene && window.underlay) {
        const u = window.underlay;
        const building = window.scene.findFeature("3DBuilding");
        switch (item.id) {
          case "pic": {
            if (building) {
              building.visible = false;
            }
            u.change("satellite"); //这样需要将本地资源放在工程内
            // u.url = "http://multiverse.vothing.com/ref/style/satellite.json";
            // // 加载显示底图
            // u.load();
    computed: {
      ...mapGetters("common", []),
    },
    watch: {},
    mounted() {
      this.getLoginInfo();
    },
    beforeDestroy() {
      this.resetEngineRelated();
    },
    methods: {
      onSelectChange(val) {
        this.selectedId = val;
      },
      fullscreenChange(val) {
        this.isFullScreen = val;
      },
      /**
       * 切换视图
       * @param val
       */
      switchView(val) {
        switch (val) {
          case "xietong":
            window.open(window.ProjectConfig.xieTongIframeSrc, "_blank");
            break;
          }
          case "gis": {
            if (building) {
              building.visible = true;
            }
            u.change("darkblue"); //这样需要将本地资源放在工程内
            // u.url = "http://multiverse.vothing.com/ref/style/darkblue.json";
            // // 加载显示底图
            // u.load();
          case "zhihui":
            window.open("http://beijiaodaxiongan.zhihuibuild.com/#/autologin?next=", "_blank");
            break;
        }
      },
      //重置引擎相关的东西
      resetEngineRelated() {
        window.scene = window.underlay = null;
      },
      //响应切换地图
      onChangeMap(item) {
        if (window.scene && window.underlay) {
          const u = window.underlay;
          const building = window.scene.findFeature("3DBuilding");
          switch (item.id) {
            case "pic": {
              if (building) {
                building.visible = false;
              }
              u.change("satellite"); //这样需要将本地资源放在工程内
              // u.url = "http://multiverse.vothing.com/ref/style/satellite.json";
              // // 加载显示底图
              // u.load();
              break;
            }
            case "gis": {
              if (building) {
                building.visible = true;
              }
              u.change("darkblue"); //这样需要将本地资源放在工程内
              // u.url = "http://multiverse.vothing.com/ref/style/darkblue.json";
              // // 加载显示底图
              // u.load();
              break;
            }
          }
        }
      }
    },
    getLoginInfo() {
      this.isReady = true
      const data = {
        "UserName": "JSC",
        "Password": "JSC@jsc123",
        "IfSingleLogin": "",
      }
      HomeAPI.WhLogin(data).then(res => {
        console.log(res);
        if(res.Ret === 1) {
          const result = res.Data
          window.localStorage.setItem("token", result.token)
          console.log(result);
        }
        
      });
    },
      },
      getLoginInfo() {
        this.isReady = true;
        const data = {
          UserName: "JSC",
          Password: "JSC@jsc123",
          IfSingleLogin: "",
        };
        HomeAPI.WhLogin(data).then((res) => {
          console.log(res);
          if (res.Ret === 1) {
            const result = res.Data;
            window.localStorage.setItem("token", result.token);
            console.log(result);
          }
        });
      },

    //设置字体颜色
    cellStyle(row, _column, _rowIndex, _columnIndex) {
      // console.log("row", row);
      if (row.column.label === "状态" && row.row.status === "未处置") {
        return "color:#EF424E";
      }
      //设置字体颜色
      cellStyle(row, _column, _rowIndex, _columnIndex) {
        // console.log("row", row);
        if (row.column.label === "状态" && row.row.status === "未处置") {
          return "color:#EF424E";
        }
      },
    },
  },
};
  };
</script>
<style lang="scss" scoped>
  .xieTongIframe{
  .xieTongIframe {
    width: 100%;
    height: 100%;
  }

 src/api/home.js

@@ -8,34 +8,69 @@
 */
import { http } from "../utils/http";
export const HomeAPI = {
    GetProject: (data) => {
        return http.get("/api/User/Project/GetProject", {
            params: data
        });
    },
  GetProject: (data) => {
    return http.get("/api/User/Project/GetProject", {
      params: data,
    });
  },

    WhLogin: (data, config = {}) => {
        return http.post("/api/User/Home/WhLogin", data, config);
    },
  WhLogin: (data, config = {}) => {
    return http.post("/api/User/Home/WhLogin", data, config);
  },

    GetParticipatingList: (data) => {
        return http.get("/api/User/Home/GetParticipatingList", {
            params: data
        });
    },
    GetParticipatingNumber: (data) => {
        return http.get("/api/User/Home/GetParticipatingNumber", {
            params: data
        });
    },
    GetProjectPanoramaList: (data) => {
        return http.get("/api/Panorama/PanoramaFile/GetProjectPanoramaList", {
            params: data
        });
    },
    GetScenesByPbGuid: (data) => {
        return http.get("/api/Panorama/PanoramaFile/GetScenesByPbGuid", {
            params: data
        });
    }
};
  GetParticipatingList: (data) => {
    return http.get("/api/User/Home/GetParticipatingList", {
      params: data,
    });
  },
  GetParticipatingNumber: (data) => {
    return http.get("/api/User/Home/GetParticipatingNumber", {
      params: data,
    });
  },
  GetProjectPanoramaList: (data) => {
    return http.get("/api/Panorama/PanoramaFile/GetProjectPanoramaList", {
      params: data,
    });
  },
  GetScenesByPbGuid: (data) => {
    return http.get("/api/Panorama/PanoramaFile/GetScenesByPbGuid", {
      params: data,
    });
  },
  GetBindSelect: (data) => {
    return http.get("/api/jsc/JSCManage/GetBindSelect", {
      params: data,
    });
  },
  GetDeviceType: (data) => {
    return http.get("/api/jsc/JSCManage/GetDeviceType", {
      params: data,
    });
  },
  GetJSCDeviceState: (data) => {
    return http.get("/api/jsc/JSCManage/GetJSCDeviceState", {
      params: data,
    });
  },
  GetJSCEnvMonitor: (data) => {
    return http.get("/api/jsc/JSCManage/GetJSCEnvMonitor", {
      params: data,
    });
  },
  GetJSCProgress: (data) => {
    return http.get("/api/jsc/JSCManage/GetJSCProgress", {
      params: data,
    });
  },
  GetJSCProjectMonitor: (data) => {
    return http.get("/api/jsc/JSCManage/GetJSCProjectMonitor", {
      params: data,
    });
  },
  GetJSCUserManage: (data) => {
    return http.get("/api/jsc/JSCManage/GetJSCUserManage", {
      params: data,
    });
  },
};

 src/components/Gantt.vue

New file
@@ -0,0 +1,660 @@
<template>

  <div class="gantt-box">

    <div class="gantt-header">

      <div>

        <el-button size="small" type="primary" @click="yearClick">年</el-button>

        <el-button size="small" type="primary" @click="monthClick">月</el-button>

        <el-button size="small" type="primary" @click="weekClick">周</el-button>

        <!-- <el-button size="small" type="primary" @click="dayClick">日</el-button> -->

      </div>

      <div>

        <el-button style="margin-right: 20px" size="small" type="primary" v-if="!columnsShow" @click="toggle('1')">展开详情</el-button>

        <el-button style="margin-right: 20px" size="small" type="primary" v-else @click="toggle('2')">关闭详情</el-button>

        <span>备注:</span>

        <span>进行中</span><span class="color" style="background-color: rgb(211, 211, 0)"></span>, <span>待进行</span

        ><span class="color" style="background-color: rgb(170, 170, 127)"></span>, <span>延期未完工</span

        ><span class="color" style="background-color: rgb(255, 0, 0)"></span>, <span>延期已完工</span

        ><span class="color" style="background-color: #8bc34a"></span>, <span>已完工/提前完工</span

        ><span class="color" style="background-color: rgb(14, 172, 81)"></span>

      </div>

    </div>

    <div ref="gantt" style="height: 400px; font-size: 12px"></div>

  </div>

</template>



<script>

  import axios from "axios";

  import { gantt } from "dhtmlx-gantt";

  import "dhtmlx-gantt/codebase/dhtmlxgantt.css";



  export default {

    name: "Gantt",

    components: {},

    data() {

      return {

        taskslist: [],

        // 甘特图配置

        tasks: {

          data: [],

        },

        columnsShow: false,

      };

    },

    mounted() {

      this.init(); //初始化

      this.getProjectqryDataColl(); //获取数据

    },

    methods: {

      // 将毫秒值转换为普通的日期格式 yyyy-MM-dd

      formatDate(time) {

        const myTime = new Date(time);

        const yyyy = myTime.getFullYear();

        let MM = myTime.getMonth() + 1;

        if (MM < 10) {

          MM = "0" + MM;

        }

        let dd = myTime.getDate();

        if (dd < 10) {

          dd = "0" + dd;

        }

        const str = yyyy + "-" + MM + "-" + dd;

        return str;

      },

      // 获取两个时间相减的天数

      getDays(strDateStart, strDateEnd) {

        var strSeparator = "-";

        //日期分隔符   var oDate1;   var oDate2;

        var iDays;

        var oDate1 = strDateStart.split(strSeparator);

        var oDate2 = strDateEnd.split(strSeparator);

        var strDateS = new Date(oDate1[0], oDate1[1] - 1, oDate1[2]);

        var strDateE = new Date(oDate2[0], oDate2[1] - 1, oDate2[2]);

        var iDays = parseInt(Math.abs(strDateS - strDateE) / 1000 / 60 / 60 / 24);

        //把相差的毫秒数转换为天数

        return iDays;

      },

      getIntervalDays(timestamp) {

        const date1 = new Date();

        const date2 = new Date(timestamp);

        const diff = Math.abs(date2.getTime() - date1.getTime()); // 计算时间差（毫秒）

        return Math.floor(diff / (1000 * 60 * 60 * 24)); // 将时间差转换为天数

      },

      // 计算时间进度

      getIntervalDays2(timestamp1, timestamp2) {

        const now = new Date();

        const date1 = new Date(timestamp1);

        const date2 = new Date(timestamp2);

        const diff = Math.abs(date2.getTime() - date1.getTime()); // 计算时间差（毫秒）

        const total = Math.floor(diff / (1000 * 60 * 60 * 24)); // 将时间差转换为天数

        const diff2 = Math.abs(now.getTime() - date1.getTime()); // 计算时间差（毫秒）

        const real = Math.floor(diff2 / (1000 * 60 * 60 * 24)); // 将时间差转换为天数

        return Math.floor((real / total) * 100);

      },



      clickdataAll() {

        let clickdata = [];

        let colors = "";

        this.taskslist.map((item) => {

          var arr = this.formatDate(item.begin1).split("-");

          var arr1 = this.formatDate(item.over1).split("-");

          var startTime = arr[2] + "-" + arr[1] + "-" + arr[0];

          var endTime = arr1[2] + "-" + arr1[1] + "-" + arr1[0];



          var arr2 = [];

          var arr3 = [];

          var startTime1 = "";

          var endTime1 = "";

          var duration1 = "";

          if (item.begin2 != null) {

            startTime1 = this.formatDate(item.begin2);

          }

          if (item.over2 != null) {

            endTime1 = this.formatDate(item.over2);

          }



          if (startTime1 != "" && endTime1 != "") {

            duration1 = this.getDays(startTime1, endTime1);

          }

          if (item.zt == "0") {

            colors = "#aaaa7f";

          }

          if (item.zt == "1") {

            colors = "#d3d300";

          }

          if (item.zt == "2" || item.zt == "3") {

            colors = "#0eac51";

          }

          if (item.zt == "5") {

            colors = "#ff0000";

          }

          if (item.zt == "4") {

            colors = "#8bc34a";

          }

          clickdata.push({

            id: item.id,

            text: item.project,

            start_date: startTime,

            end_date: endTime,

            parent: item.parent,

            duration: "4",

            start_date1: startTime1,

            end_date1: endTime1,

            duration1: duration1,

            progress: 0,

            open: true,

            color: colors,

            remark: item.remark,

          });

        });

        gantt.clearAll();

        this.tasks.data = clickdata;

        gantt.parse(this.tasks);

        gantt.refreshData();

        this.ganttLoading = false;

      },



      clearDirtyData() {

        let baseList = [];

        let baseList2 = [];

        let baseList3 = [];

        this.taskslist.map((item) => {

          item.used = false;

          item.baseTitle = "";

        });

        // 先筛选父级

        this.taskslist.map((item) => {

          if (!item.used && !item.parent) {

            item.used = true;

            item.baseTitle = "[" + item.project + "]";

            baseList.push(item);

          }

        });

        baseList.map((item) => {

          this.taskslist.map((item2) => {

            if (!item2.used && item2.parent == item.id) {

              item2.used = true;

              item2.baseTitle = item.baseTitle + "->[" + item2.project + "]";

              baseList2.push(item2);

            }

          });

        });



        baseList2.map((item) => {

          this.taskslist.map((item2) => {

            if (!item2.used && item2.parent == item.id) {

              item2.used = true;

              item2.baseTitle = item.baseTitle + "->[" + item2.project + "]";

              baseList3.push(item2);

            }

          });

        });



        baseList3.map((item) => {

          this.taskslist.map((item2) => {

            if (!item2.used && item2.parent == item.id) {

              item2.used = true;

              item2.baseTitle = item.baseTitle + "->[" + item2.project + "]";

            }

          });

        });



        let copyTaskslist = [];

        this.taskslist.map((item) => {

          if (item.baseTitle) {

            copyTaskslist.push(item);

          }

        });

        this.taskslist = copyTaskslist;

      },

      // 获取工程进度项目列表

      getProjectqryDataColl() {

        axios.get("https://api.zhihuibuild.com/zuul/zuul/jinchan-device/project/qryProjectProgress").then(({ data }) => {

          // 接口获取data

          if (data.code == "200") {

            if (data.body.length != 0) {

              this.taskslist = data.body;

              this.clearDirtyData();

              let cache = [];



              this.taskslist.map((item, index) => {

                item.zIndex = index + 1;

                // 重新判断状态

                let nowTime = new Date().getTime();

                if (!item.begin2) {

                  //未开始

                  item.zt = 0;

                } else {

                  if (!item.over2) {

                    //未结束

                    if (item.over1 >= nowTime) {

                      //判断预计工期是否超过当前时间

                      item.zt = 1; //进行中

                    } else {

                      item.zt = 5; //延期未完工

                    }

                  } else {

                    if (item.over1 >= item.over2) {

                      //判断预计工期是否超过实际工期

                      item.zt = 3; //提前完工2、3

                    } else {

                      item.zt = 4; //延期完工

                    }

                  }

                }

                if (item.zt == "5") {

                  cache.push([cache.length + 1, item.project, this.getIntervalDays(item.over1)]);

                }

              });



              cache.sort(function (a, b) {

                return b[2] - a[2];

              });

              cache.map((item, index) => {

                item[0] = index + 1;

                item[2] = item[2] + "天";

              });



              setTimeout(() => {

                this.clickdataAll();

              }, 1000);

            }

          }

        });

      },

      yearClick() {

        gantt.config.scales = [

          {

            unit: "year",

            step: 1,

            date: " %Y",

          },

        ];

        gantt.init(this.$refs.gantt);

      },

      monthClick() {

        gantt.config.scales = [

          {

            unit: "year",

            step: 1,

            date: " %Y",

          },

          {

            unit: "month",

            step: 1,

            date: "%F",

          },

        ];

        gantt.init(this.$refs.gantt);

      },

      weekClick() {

        gantt.config.scales = [

          {

            unit: "year",

            step: 1,

            date: " %Y",

          },

          {

            unit: "month",

            step: 1,

            date: "%F",

          },

          {

            unit: "week",

            step: 1,

            date: "%W周",

          },

        ];

        gantt.init(this.$refs.gantt);

      },

      dayClick() {

        gantt.config.scales = [

          {

            unit: "year",

            step: 1,

            date: " %Y",

          },

          {

            unit: "month",

            step: 1,

            date: "%F",

          },

          {

            unit: "day",

            step: 1,

            date: "%j日",

          },

        ];

        gantt.init(this.$refs.gantt);

      },

      riliClick() {

        gantt.config.scales = [

          {

            unit: "month",

            step: 1,

            date: " %Y - %F",

          },

          {

            unit: "day",

            step: 1,

            date: "%j日   周%D",

          },

        ];

        gantt.init(this.$refs.gantt);

      },

      toggle(val) {

        if (val == 1) {

          this.columnsShow = true;

        } else {

          this.columnsShow = false;

        }

        //左侧显示列名

        if (val == "1") {

          gantt.config.columns = [

            {

              name: "text",

              label: "任务名称",

              tree: true,

              align: "left",

              resize: true,

              width: "*",

              min_width: 220,

            },

            {

              name: "start_date",

              label: "计划开始",

              align: "center",

              resize: true,

              width: "*",

              min_width: 100,

            },

            {

              name: "end_date",

              label: "计划结束",

              align: "center",

              resize: true,

              width: "*",

              min_width: 100,

            },

            {

              name: "duration",

              label: "工期",

              align: "center",

            },

            {

              name: "start_date1",

              label: "实际开始",

              align: "center",

              resize: true,

              width: "*",

              min_width: 100,

            },

            {

              name: "end_date1",

              label: "实际结束",

              align: "center",

              resize: true,

              width: "*",

              min_width: 100,

            },

            {

              name: "duration1",

              label: "实际工期",

              align: "center",

            },

            {

              name: "zt",

              label: "",

              align: "center",

              resize: false,

            },

          ];

        } else {

          gantt.config.columns = [

            {

              name: "text",

              label: "任务名称",

              tree: true,

              align: "left",

              resize: true,

              width: 250,

            },

          ];

        }



        // 初始化

        gantt.init(this.$refs.gantt);

        // 数据解析

        gantt.parse(this.tasks);

      },

      // 初始化

      init() {

        // 自动延长时间刻度

        gantt.config.fit_tasks = true;

        gantt.config.show_links = false;

        gantt.config.drag_progress = false; // 取消进度条

        gantt.config.row_height = 25; //进度条容器高

        gantt.config.scale_height = 50;

        gantt.config.autofit = true; //左侧是否自适应

        gantt.i18n.setLocale("cn"); // 设置中文

        gantt.config.readonly = true; // 设置为只读

        //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务

        gantt.config.autosize = false;

        gantt.config.open_split_tasks = true;

        // 允许拖放

        gantt.config.drag_project = true;

        // 设置甘特图时间的起始结束时间，并允许显示超过时间刻度任务

        // gantt.config.start_date = new Date(`${new Date().getFullYear()-1}`,'01');

        // gantt.config.end_date = new Date(`${new Date().getFullYear()+1}`,'01');

        gantt.config.show_tasks_outside_timescale = true;

        //开启提示：鼠标悬浮在gantt行上显示

        gantt.plugins({

          tooltip: true,

          // quick_info: true,// 快速信息框

          multiselect: true, // 激活多任务选择

        });



        gantt.templates.tooltip_text = function (start, end, task) {

          return (

            "<b>项目: <span style='color:" +

            task.color +

            "'>" +

            task.text +

            "</span><br/><span>实际开始:" +

            task.start_date1 +

            "</span> " +

            "</span><br/><span>实际结束:" +

            task.end_date1 +

            "</span> " +

            "</span><br/><br/><span>计划开始:" +

            gantt.templates.tooltip_date_format(start) +

            "</span> " +

            "<br/><span>计划结束:" +

            gantt.templates.tooltip_date_format(end) +

            "</span> " +

            (task.remark ? `<br/><span>备注:${task.remark}</span>` : "")

          );

        };

        // 按月

        gantt.config.scales = [

          {

            unit: "year",

            step: 1,

            date: " %Y",

          },

          {

            unit: "month",

            step: 1,

            date: "%F",

          },

        ];



        //左侧显示列名

        gantt.config.columns = [

          {

            name: "text",

            label: "任务名称",

            tree: true,

            align: "left",

            resize: true,

            width: 250,

          },

        ];

        // 初始化

        gantt.init(this.$refs.gantt);



        // 数据解析

        gantt.parse(this.tasks);

      },

    },

  };

</script>

<style lang="scss" scoped>

  .gantt-box {

    background-color: rgba(0, 0, 0, 0.2);

    margin: 10px;

    color: #fff;



    .gantt-header {

      padding-top: 5px;

      margin: 10px;

      height: 40px;

      display: flex;

      justify-content: space-between;

      align-items: center;



      .color {

        width: 36px;

        height: 16px;

        vertical-align: text-top;

        display: inline-block;

        margin-right: 5px;

        margin-left: 5px;

      }

    }



    /* 滚动条样式*/

    ::-webkit-scrollbar {

      width: 10px;

      height: 10px;

      background-color: transparent;

    }



    ::-webkit-scrollbar-thumb {

      background-color: #73abb1;

      border-radius: 6px;

    }



    ::-webkit-scrollbar-track {

      background-color: #373f4a;

      opacity: 0.9;

    }

  }

</style>

<style lang="scss">

  body {

    background-color: rgb(19, 90, 144);

  }



  /* 自定义甘特图样式 */

  .gantt_grid_data .gantt_row.gantt_selected,

  .gantt_grid_data .gantt_row.odd.gantt_selected,

  .gantt_task_row.gantt_selected {

    background-color: #409eff !important;

  }



  .gantt_grid_data .gantt_row.odd:hover,

  .gantt_grid_data .gantt_row:hover {

    background-color: #409eff !important;

  }



  .gantt_grid_scale .gantt_grid_head_cell {

    color: #fff !important;

  }



  .gantt_grid_scale,

  .gantt_task_scale,

  .gantt_task_vscroll {

    background-color: transparent;

  }



  /* 大背景透明 */

  .gantt_container {

    background-color: transparent;

  }



  /* 左标题文字白色 */

  .gantt_grid_data .gantt_cell {

    color: #fff;

  }



  /* 顶部日期白色 */

  .gantt_task .gantt_task_scale .gantt_scale_cell {

    color: #fff;

  }



  /* 偶数行背景透明 */

  .gantt_row.odd,

  .gantt_task_row.odd {

    background-color: transparent;

  }



  /* 奇数行背景透明 */

  .gantt_row,

  .gantt_task_row {

    background-color: transparent;

  }



  /* 表格边框*/

  .gantt_cell {

    border-right: 1px solid #0de8ec;

  }

  .gantt_task_cell {

    border-right: 1px solid #0de8ec;

  }



  .gantt_row,

  .gantt_task_row {

    border-bottom: 1px solid #0de8ec;

  }



  .gantt_grid_scale,

  .gantt_task_scale {

    border-bottom: 1px solid #0de8ec;

  }



  .gantt_scale_line {

    border-top: 1px solid #0de8ec;

  }



  .gantt_layout_cell_border_right {

    border-right: 1px solid #0de8ec;

  }



  .gantt_layout_cell_border_bottom {

    border-bottom: 1px solid #0de8ec;

  }



  .gantt_layout_cell_border_left {

    border-left: 1px solid #0de8ec;

  }



  .gantt_layout_cell_border_top {

    border-top: 1px solid #0de8ec;

  }



  .gantt_task_content {

    text-shadow: 0 0 4px #333;

    overflow: visible;

    transform: translateY(-12px);

  }



  /* 进度条高度 */

  .gantt_task_line {

    height: 10px !important;

    transform: translateY(10px);

  }



  .gantt_tooltip {

    width: 180px;

  }

</style>


 src/components/Header.vue

@@ -43,7 +43,7 @@
      </div>
      <div class="absolute top-0 right-0">
        <div class="flex items-center h-[80px] mr-[20px]">
          <el-select v-model="projectSelected" placeholder="请选择" class="mr-[24px]">
          <el-select v-model="bindSelected" placeholder="请选择" class="mr-[24px]" @change="handleSelect">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <i
@@ -61,6 +61,9 @@
</template>

<script>
  import { HomeAPI } from "@/api/home";
  import { mapActions } from "vuex";

  export default {
    name: "AppHeader",
    components: {},
@@ -76,12 +79,8 @@
    },
    data() {
      return {
        projectSelected: "",
        options: [
          { value: "project1", label: "项目1" },
          { value: "project2", label: "项目2" },
          { value: "project3", label: "项目3" },
        ],
        bindSelected: "",
        options: [],
        activeTab: "home",
        currentTime: "",
        currentDate: "",
@@ -91,6 +90,7 @@
    },
    mounted() {
      this.updateTime();
      this.getBinds();
      this.timer = setInterval(this.updateTime, 1000);
    },
    beforeDestroy() {
@@ -102,7 +102,9 @@
      handleFullscreen() {
        if (this.$fullscreen.isFullscreen) {
          this.$fullscreen.exit();
          this.$emit("fullscreenChange", false);
        } else {
          this.$emit("fullscreenChange", true);
          this.$fullscreen.request();
        }
      },
@@ -127,6 +129,32 @@
        const weekDay = weekDays[now.getDay()];
        this.currentDate = `${year}.${month}.${day} 星期${weekDay}`;
      },
      /**
       * 获取标段信息
       */
      getBinds() {
        HomeAPI.GetBindSelect().then((res) => {
          if (res.Ret === 1) {
            const result = res.Data;
            if (result.length > 0) {
              this.options = result.map((item) => ({
                value: item.Id,
                label: item.BindName,
              }));
              this.bindSelected = this.options[0].value; // 默认选中第一个项目
              this.handleSelect(this.bindSelected);
            } else {
              this.options = [];
            }
          }
        });
      },
      /**
       * 处理选择变化
       */
      handleSelect(val) {
        this.$emit("onSelectChange", val);
      },
    },
  };
</script>
@@ -137,7 +165,7 @@
  ::v-deep(.el-select) {
    width: 160px;
    height: 28px;
    background: rgba(33,72,115,0.9);
    background: rgba(33, 72, 115, 0.9);
    border-radius: 2px;
    .el-input {
      align-items: center;

 src/store/modules/common.js

@@ -7,38 +7,46 @@
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
export default {
    namespaced: true,
    state: () => ({
        code: null, //用户信息
        token: null, //token
        projectEndDate: null, //项目结束日期
    }),
  namespaced: true,
  state: () => ({
    code: null, //用户信息
    token: null, //token
    projectEndDate: null, //项目结束日期
    bindId: null,
  }),

    mutations: {
        setCode(state, data) {
            state.code = data;
        },
        setToken(state, data) {
            state.token = data;
        },
        setProjectEndDate(state, data) {
            state.projectEndDate = data;
        },
  mutations: {
    setCode(state, data) {
      state.code = data;
    },
    actions: {
        setCode(context, data) {
            context.commit("setCode", data);
        },
        setToken(context, data) {
            context.commit("setToken", data);
        },
        setProjectEndDate(context, data) {
            context.commit("setProjectEndDate", data);
        },
    setToken(state, data) {
      state.token = data;
    },
    getters: {
        code: (state) => state.code,
        token: (state) => state.token,
        projectEndDate: (state) => state.projectEndDate,
    setProjectEndDate(state, data) {
      state.projectEndDate = data;
    },
};
    setBindId(state, data) {
      state.bindId = data;
    },
  },
  actions: {
    setCode(context, data) {
      context.commit("setCode", data);
    },
    setToken(context, data) {
      context.commit("setToken", data);
    },
    setProjectEndDate(context, data) {
      context.commit("setProjectEndDate", data);
    },
    updateBindId({ commit }, data) {
      commit("setBindId", data);
    },
  },
  getters: {
    code: (state) => state.code,
    token: (state) => state.token,
    projectEndDate: (state) => state.projectEndDate,
    bindId: (state) => state.bindId,
  },
};

 src/utils/getToken.js

@@ -14,4 +14,8 @@
export const getProjectEndDate = () => {
    let endDate = store.getters["common/projectEndDate"];
    return endDate;
}
export const getBindId = () => {
    let bindId = store.getters["common/bindId"];
    return bindId;
}

 src/views/EquipmentView.vue

@@ -18,21 +18,21 @@
              <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/shishirenshu.png" alt="" />
              <span class="satalabel ml-[8px]">实时人数</span>
            </div>
            <div class="value text-[#00FFFF] text-[28px] font-bold">62</div>
            <div class="value text-[#00FFFF] text-[28px] font-bold">{{ userData.RealtimeUserNumber }}</div>
          </div>
          <div class="stat-item mb-[10px]">
            <div class="stat-info">
              <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/people.png" alt="" />
              <span class="satalabel ml-[8px]">今日累计/人次</span>
            </div>
            <div class="value text-[#FFD500] text-[28px] font-bold">62</div>
            <div class="value text-[#FFD500] text-[28px] font-bold">{{ userData.TodayUserNumber }}</div>
          </div>
          <div class="stat-item">
            <div class="stat-info">
              <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/zaigang.png" alt="" />
              <span class="satalabel ml-[8px]">在岗总数</span>
            </div>
            <div class="value text-[#FFD500] text-[28px] font-bold">62</div>
            <div class="value text-[#FFD500] text-[28px] font-bold">{{ userData.DutyUserTotle }}</div>
          </div>
        </div>
      </div>
@@ -49,7 +49,7 @@
        >
        </div>
        <div class="equipment-status" :style="sectionStyle">
          <el-select v-model="equipmentSelected" placeholder="请选择">
          <el-select v-model="deviceSelected" placeholder="请选择" @change="handleSelectChange">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <div
@@ -114,7 +114,7 @@
            <div class="env-info">
              <span class="envlabel">大气温度</span>
              <div class="envvalue" :style="enviorStyle">
                <span class="envvalue-text">5°C</span>
                <span class="envvalue-text">{{ evnData.Tmp + "°C" }}</span>
              </div>
            </div>
          </div>
@@ -123,7 +123,7 @@
            <div class="env-info">
              <span class="envlabel">大气湿度</span>
              <div class="envvalue" :style="enviorStyle">
                <span class="envvalue-text">22.9%</span>
                <span class="envvalue-text">{{ evnData.Rh + "%" }}</span>
              </div>
            </div>
          </div>
@@ -132,7 +132,7 @@
            <div class="env-info">
              <span class="envlabel">PM2.5</span>
              <div class="envvalue" :style="enviorStyle">
                <span class="envvalue-text">10 μg/m³</span>
                <span class="envvalue-text">{{ evnData.Pm25 + "μg/m³" }}</span>
              </div>
            </div>
          </div>
@@ -141,7 +141,7 @@
            <div class="env-info">
              <span class="envlabel">PM10</span>
              <div class="envvalue" :style="enviorStyle">
                <span class="envvalue-text">13 μg/m³</span>
                <span class="envvalue-text">{{ evnData.Pm10 + "μg/m³" }}</span>
              </div>
            </div>
          </div>
@@ -150,7 +150,7 @@
            <div class="env-info">
              <span class="envlabel">风力</span>
              <div class="envvalue" :style="enviorStyle">
                <span class="envvalue-text">3级</span>
                <span class="envvalue-text">{{ evnData.Ws }}</span>
              </div>
            </div>
          </div>
@@ -159,7 +159,7 @@
            <div class="env-info">
              <span class="envlabel">风向</span>
              <div class="envvalue" :style="enviorStyle">
                <span class="envvalue-text">北风</span>
                <span class="envvalue-text">{{ evnData.Wd }}</span>
              </div>
            </div>
          </div>
@@ -171,51 +171,50 @@

<script>
  import V2Echarts from "@/components/V2Echarts.vue";
  import { HomeAPI } from "@/api/home";
  export default {
    name: "EquipmentView",
    components: {
      V2Echarts,
    },
    props: {
      selectedId: {
        type: String,
        default: "",
      },
    },
    data() {
      return {
        equipmentSelected: "",
        options: [
          {
            value: "选项1",
            label: "黄金糕",
          },
          {
            value: "选项2",
            label: "双皮奶",
          },
          {
            value: "选项3",
            label: "蚵仔煎",
          },
          {
            value: "选项4",
            label: "龙须面",
          },
          {
            value: "选项5",
            label: "北京烤鸭",
          },
        ],
        evnData: {
          Tmp: "0",
          Rh: "0",
          Pm25: "0",
          Pm10: "0",
          Ws: "0",
          Wd: "无",
        },
        userData: {
          RealtimeUserNumber: 0,
          TodayUserNumber: 0,
          DutyUserTotle: 0,
        },
        deviceSelected: "",
        options: [],
        backgroundImage: new URL("@/assets/images/backgrounds/cover_bg.png", import.meta.url).href,
        titleImage: new URL("@/assets/images/titles/renyuan.png", import.meta.url).href,
        middleImage: new URL("@/assets/images/titles/shebei.png", import.meta.url).href,
        bottomImage: new URL("@/assets/images/titles/huanjing.png", import.meta.url).href,
        bgImage: new URL("@/assets/images/titles/title_second.png", import.meta.url).href,
        enviorImage: new URL("@/assets/images/titles/wendu_bg.png", import.meta.url).href,
        deviceOnline: 1,
        deviceTotal: 27,
        deviceOnline: 0,
        deviceTotal: 0,
        currentTab: "塔吊监控",
        circleItems: [
          {
            id: "zaixianChartBox",
            name: "总在线",
            value: 22,
            percentage: 81.5,
            value: 0,
            percentage: 0,
            options: {
              tooltip: {
                trigger: "item",
@@ -302,8 +301,8 @@
          {
            id: "lixianChartBox",
            name: "总离线",
            value: 5,
            percentage: 33,
            value: 0,
            percentage: 0,
            options: {
              tooltip: {
                trigger: "item",
@@ -391,7 +390,7 @@
            id: "baojingChartBox",
            name: "总报警",
            value: 0,
            percentage: 20,
            percentage: 0,
            options: {
              tooltip: {
                trigger: "item",
@@ -496,7 +495,387 @@
        };
      },
    },
    watch: {
      selectedId: {
        handler(newVal) {
          console.log("设备界面接收到的数据:", newVal);
          // 处理数据变化的逻辑
          this.getDeviceTypes(newVal);
          this.getEnvData(newVal);
          this.getUserData(newVal);
        },
        deep: true, // 深度监听对象内部变化
        immediate: true, // 立即执行一次
      },
    },
    mounted() {},
    methods: {
      /**
       * 处理设备选择变化
       * @param val
       */
      handleSelectChange(val) {
        this.getDeviceState(val);
        // this.getEnvData(val);
        // this.getUserData(val);
      },
      /**
       * 获取人员数据
       * @param bindId
       */
      getUserData(bindId) {
        const params = {
          bindId,
        };
        HomeAPI.GetJSCUserManage(params).then((res) => {
          if (res.Ret === 1) {
            const result = res.Data;
            if (result) {
              this.userData = result;
            } else {
              this.userData = {
                RealtimeUserNumber: 0,
                TodayUserNumber: 0,
                DutyUserTotle: 0,
              };
            }
          }
        });
      },
      /**
       * 获取环境数据
       */
      getEnvData(bindId) {
        const params = {
          bindId,
        };
        HomeAPI.GetJSCEnvMonitor(params).then((res) => {
          if (res.Ret === 1) {
            const result = res.Data;
            if (result) {
              this.evnData = result;
            } else {
              this.evnData = {
                Tmp: "0",
                Rh: "0",
                Pm25: "0",
                Pm10: "0",
                Ws: "0",
                Wd: "无",
              };
            }
          }
        });
      },
      /**
       * 获取设备类型
       * @param bindId
       */
      getDeviceTypes(bindId) {
        const params = {
          bindId,
        };
        HomeAPI.GetDeviceType(params).then((res) => {
          if (res.Ret === 1) {
            const result = res.Data;
            if (result.length > 0) {
              this.options = result.map((item) => ({
                value: item.Id,
                label: item.Name,
              }));
              this.deviceSelected = this.options[0].value; // 默认选中第一个项目
              this.getDeviceState(this.deviceSelected);
            } else {
              this.options = [];
            }
          }
        });
      },
      /**
       * 获取设备状态
       * @param deviceTypeId
       */
      getDeviceState(deviceTypeId) {
        const params = {
          bindId: this.selectedId || "",
          deviceTypeId,
        };
        HomeAPI.GetJSCDeviceState(params).then((res) => {
          if (res.Ret === 1) {
            const result = res.Data;
            if (result) {
              this.deviceOnline = result.TotalOnlineNumber;
              this.deviceTotal = result.TotalOnlineNumber + result.TotalOfflineNumber;
              this.circleItems = [
                {
                  id: "zaixianChartBox",
                  name: "总在线",
                  value: result.TotalOnlineNumber,
                  percentage: result.TotalOnlineRate,
                  options: {
                    tooltip: {
                      trigger: "item",
                      show: false,
                    },
                    legend: {
                      itemWidth: 8,
                      itemHeight: 8,
                      top: "5%",
                      left: "center",
                      show: false,
                    },
                    series: [
                      {
                        type: "pie",
                        radius: ["70%", "80%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        startAngle: 90,
                        itemStyle: {
                          normal: {
                            label: {
                              show: false,
                            },
                            labelLine: {
                              show: false,
                            },
                            shadowBlur: 40,
                            borderWidth: 5,
                            shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                          },
                        },
                        data: [
                          {
                            value: 100,
                            name: "",
                            itemStyle: {
                              color: "#234E84",
                            },
                          },
                        ],
                      },
                      {
                        type: "pie",
                        radius: ["70%", "100%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        startAngle: 90,
                        itemStyle: {
                          normal: {
                            label: {
                              show: false,
                            },
                            labelLine: {
                              show: false,
                            },
                            shadowBlur: 40,
                            borderWidth: 10,
                            shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                          },
                        },
                        data: [
                          {
                            value: result.TotalOnlineRate,
                            name: "",
                            itemStyle: {
                              color: "#00FFFF",
                            },
                          },
                          {
                            value: 100 - result.TotalOnlineRate,
                            name: "",
                            itemStyle: {
                              color: "transparent",
                            },
                          },
                        ],
                      },
                    ],
                  },
                },
                {
                  id: "lixianChartBox",
                  name: "总离线",
                  value: result.TotalOfflineNumber,
                  percentage: result.TotalOfflineRate,
                  options: {
                    tooltip: {
                      trigger: "item",
                      show: false,
                    },
                    legend: {
                      itemWidth: 8,
                      itemHeight: 8,
                      top: "5%",
                      left: "center",
                      show: false,
                    },
                    series: [
                      {
                        type: "pie",
                        radius: ["70%", "80%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        startAngle: 90,
                        itemStyle: {
                          normal: {
                            label: {
                              show: false,
                            },
                            labelLine: {
                              show: false,
                            },
                            shadowBlur: 40,
                            borderWidth: 5,
                            shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                          },
                        },
                        data: [
                          {
                            value: 100,
                            name: "",
                            itemStyle: {
                              color: "#234E84",
                            },
                          },
                        ],
                      },
                      {
                        type: "pie",
                        radius: ["70%", "100%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        startAngle: 90,
                        itemStyle: {
                          normal: {
                            label: {
                              show: false,
                            },
                            labelLine: {
                              show: false,
                            },
                            shadowBlur: 40,
                            borderWidth: 10,
                            shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                          },
                        },
                        data: [
                          {
                            value: result.TotalOfflineRate,
                            name: "",
                            itemStyle: {
                              color: "#00FFFF",
                            },
                          },
                          {
                            value: 100 - result.TotalOfflineRate,
                            name: "",
                            itemStyle: {
                              color: "transparent",
                            },
                          },
                        ],
                      },
                    ],
                  },
                },
                {
                  id: "baojingChartBox",
                  name: "总报警",
                  value: result.TotalAlarmsNumber,
                  percentage: result.TotalAlarmsRate,
                  options: {
                    tooltip: {
                      trigger: "item",
                      show: false,
                    },
                    legend: {
                      itemWidth: 8,
                      itemHeight: 8,
                      top: "5%",
                      left: "center",
                      show: false,
                    },
                    series: [
                      {
                        type: "pie",
                        radius: ["70%", "80%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        startAngle: 90,
                        itemStyle: {
                          normal: {
                            label: {
                              show: false,
                            },
                            labelLine: {
                              show: false,
                            },
                            shadowBlur: 40,
                            borderWidth: 5,
                            shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                          },
                        },
                        data: [
                          {
                            value: 100,
                            name: "",
                            itemStyle: {
                              color: "#234E84",
                            },
                          },
                        ],
                      },
                      {
                        type: "pie",
                        radius: ["70%", "100%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        startAngle: 90,
                        itemStyle: {
                          normal: {
                            label: {
                              show: false,
                            },
                            labelLine: {
                              show: false,
                            },
                            shadowBlur: 40,
                            borderWidth: 10,
                            shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                          },
                        },
                        data: [
                          {
                            value: result.TotalAlarmsRate,
                            name: "",
                            itemStyle: {
                              color: "#00FFFF",
                            },
                          },
                          {
                            value: 100 - result.TotalAlarmsRate,
                            name: "",
                            itemStyle: {
                              color: "transparent",
                            },
                          },
                        ],
                      },
                    ],
                  },
                },
              ];
            }
          }
        });
      },
      handleControlBtnClick(tab) {
        this.currentTab = tab;
      },
@@ -749,5 +1128,4 @@
  .progress-inner {
    display: none;
  }

</style>

 src/views/Home.vue

@@ -1,39 +1,82 @@
<template>
<div class="home-container">
 <!-- 顶部导航 -->
 <div class="top-nav">
  <div class="nav-items">
   <div class="nav-item mr-[8px]" :class="{ active: currentView === 'model' }" @click="handleChange('model')">模型</div>
   <div class="nav-item mr-[8px]" :class="{ active: currentView === '720' }" @click="handleChange('720')">720全景</div>
   <div class="nav-item" :class="{ active: currentView === 'project' }" @click="handleChange('project')">项目实况</div>
  </div>
  <div class="time-info">
   <div class="time-info-item">
    <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>
 </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>
   </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="home-container">
    <!-- 顶部导航 -->
    <div class="top-nav">
      <div class="nav-items">
        <div class="nav-item mr-[8px]" :class="{ active: currentView === 'model' }" @click="handleChange('model')">模型</div>
        <div class="nav-item mr-[8px]" :class="{ active: currentView === '720' }" @click="handleChange('720')">720全景</div>
        <div class="nav-item" :class="{ active: currentView === 'project' }" @click="handleChange('project')">项目实况</div>
      </div>
      <div class="time-info">
        <div class="time-info-item">
          <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>
    </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'">
    <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' }"
          />
        </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' }"
          />
        </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>
          <!-- 项目 -->
          <div class="w-full h-full" ref="videoWrapper" v-if="currentView === 'project'">
            <video
              controls
              muted
              controlslist="nodownload"
              autoplay
              class="video-box"
              ref="videoElement"
              :style="'width: 100%; height: 450px;background-color: #000'"
            ></video>
          </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'">
      <div v-for="item in panoVersionList" :key="item.value" :style="isFullScreen ? 'z-index: 100;' : ''">
       <div class="w-[160px] h-[100px] mr-[10px] ml-[10px] cursor-pointer border-[1px] border-[#3068A5] rounded-[2px]" @click="panoPreview(panoObj, item)">
        <img :src="getItemImg(item)" alt="全景图" class="w-full h-full" />
@@ -41,568 +84,731 @@
      </div>
     </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">
      <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
            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>
    </div>
    <!-- 项目 -->
    <div class="w-full h-full" v-if="currentView === 'project'">
      <iframe id="scene-iframe" frameborder='0' allowfullscreen class="scene-frame w-full h-full"></iframe>
    </div>
   </div>

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

</div>
</template>

<script>
import {
 nextTick
} from 'vue'
import {
 HomeAPI
} from "../api/home";
import {
 getProjectId,
 getToken,
 getProjectEndDate
} from "../utils/getToken.js";
export default {
 name: 'Home',
 components: {},
 data() {
  return {
   currentView: 'model',
   chartOptions: {
    id: 'shigongjinduChart',
    options: {
     title: {
      text: '施工进度'
     }
    }
   },
   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',
    }],
   }],
   panoValue: [],
   backgroundImage: new URL('@/assets/images/backgrounds/cover_bg.png',
    import.meta.url).href,
   endDate: 0,
  }
 },
 watch: {
  projectEndDate:{
      deep: true,
      handler (newVal) {
        console.log('newVal', newVal)
      const date = new Date(newVal);
      // 获取当前日期作为Date对象
      const now = new Date();
      // 计算两个日期的差异（毫秒）
      const diffTime = Math.abs(now - date);
      // 将毫秒转换为天数
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
      this.endDate = diffDays
    }
  }
 }, 
 computed: {
  sectionStyle() {
   return {
    backgroundImage: `url(${this.backgroundImage})`,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center center',
    backgroundSize: '100% 100%'
   }
  }, 
  projectId() {
   return getProjectId()
  },
  projectEndDate() {
    return getProjectEndDate()
  }
 },
 mounted() {
  setTimeout(() => {
    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.isLoading = false;
      });
    } else {
      this.$refs.panoiframe.onload = () => {
        console.log('loading2')
        // 加载成功
        this.isLoading = false;
  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: { Gantt },
    props: {
      selectedId: {
        type: String,
        default: "",
      },
      isFullScreen: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        liveValue: [],
        playerStatus: "未就绪",
        errorMessage: "",
        flvPlayer: null,
        videoSrc: "",
        currentView: "model",
        chartOptions: {
          id: "shigongjinduChart",
          options: {
            title: {
              text: "施工进度",
            },
          },
        },
        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",
              },
            ],
          },
        ],
        panoValue: [],
        liveList: [],
        backgroundImage: new URL("@/assets/images/backgrounds/cover_bg.png", import.meta.url).href,
        endDate: 0,
      };
    }
  }
},

 methods: {
  getItemImg (item) {
    return `${window.ProjectConfig.panoBaseUrl}/Panorama${this.panoObj.PbUrl}/vtour/panos/${item.PsScenename}.tiles/thumb.jpg`
  },
  handleZoomOut() {
   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;`
    },
    computed: {
      sectionStyle() {
        return {
          backgroundImage: `url(${this.backgroundImage})`,
          backgroundRepeat: "no-repeat",
          backgroundPosition: "center center",
          backgroundSize: "100% 100%",
        };
      },
      projectId() {
        return getProjectId();
      },
      projectEndDate() {
        return getProjectEndDate();
      },
    },
    watch: {
      projectEndDate: {
        deep: true,
        handler(newVal) {
          console.log("newVal", newVal);
          const date = new Date(newVal);
          // 获取当前日期作为Date对象
          const now = new Date();
          // 计算两个日期的差异（毫秒）
          const diffTime = Math.abs(now - date);
          // 将毫秒转换为天数
          const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
          this.endDate = diffDays;
        },
      },
      selectedId: {
        handler(newVal) {
          console.log("实况界面接收到的数据:", newVal);
          // 处理数据变化的逻辑
          this.getProjectLive(newVal);
        },
        deep: true, // 深度监听对象内部变化
        immediate: true, // 立即执行一次
      },
      isFullScreen: {
        handler(newVal) {
          console.log("实况界面接收到的数据:", newVal);
          // 处理数据变化的逻辑
          if (newVal) {
            this.$refs.videoElement.style.height = "100%";
          } else {
            this.$refs.videoElement.style.height = "450px";
          }
        },
        deep: true, // 深度监听对象内部变化
        immediate: true, // 立即执行一次
      },
    },
    mounted() {
      setTimeout(() => {
        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.isLoading = false;
          });
        } else {
          this.$refs.panoiframe.onload = () => {
            console.log("loading2");
            // 加载成功
            this.isLoading = false;
          };
        }
      }
    }
  },
  handleChange(view) {
   this.isLoading = true
   this.currentView = view
   if (view === 'model') {
    nextTick(() => {
     this.modelShow()
    })
   } else if (view === '720') {
    nextTick(() => {
     this.panoShow()
    })
   } else if (view === 'project') {
    nextTick(() => {
     this.sceneShow()
    })
   }
  },
  handlePanoChange(value) {
   console.log('value', value)
   this.isLoading = true
   this.panoList.forEach(item => {
    if (item.LabelId === value[0]) {
     item.Children.forEach(item2 => {
      if (item2.PbGuid === value[1]) {
       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('模型中查看')
    //  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
  },
  panoShow() {
   const data = {
    projectId: this.projectId
   }
   HomeAPI.GetProjectPanoramaList(data).then(res => {
    console.log('全景图', res)
    if (res.Ret === 1) {
     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
       });
    },
    created() {
      window.addEventListener("resize", function () {
        this.$refs.vi;
      });
      this.panoList = result
      this.panoValue = [result[0].id, result[0].Children[0].id]
      this.panoObj = result[0].Children[0]
      this.getPanoPhase()
     }
    }
   })
    },
    methods: {
      getItemImg(item) {
        return `${window.ProjectConfig.panoBaseUrl}/Panorama${this.panoObj.PbUrl}/vtour/panos/${item.PsScenename}.tiles/thumb.jpg`;
      },
      handleZoomOut() {
        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;`;
          }
        }
      },
      handleChange(view) {
        this.isLoading = true;
        this.currentView = view;
        if (view === "model") {
          nextTick(() => {
            this.modelShow();
          });
        } else if (view === "720") {
          nextTick(() => {
            this.panoShow();
          });
        } else if (view === "project") {
          nextTick(() => {
            this.getProjectLive(this.selectedId);
          });
        }
      },
      handlePanoChange(value) {
        console.log("value", value);
        this.isLoading = true;
        this.panoList.forEach((item) => {
          if (item.LabelId === value[0]) {
            item.Children.forEach((item2) => {
              if (item2.PbGuid === value[1]) {
                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("模型中查看");
        //  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;
      },
      panoShow() {
        const data = {
          projectId: this.projectId,
        };
        HomeAPI.GetProjectPanoramaList(data).then((res) => {
          console.log("全景图", res);
          if (res.Ret === 1) {
            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;
                });
              });
              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);
          if (res.Ret === 1) {
            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");
        nextTick(() => {
          if (panoFrame.src) {
            panoFrame.removeAttribute("src"); //先移除上一次的src地址
          }
          setTimeout(() => {
            let ifrSrc = "";
            ifrSrc = `${window.ProjectConfig.panoUrl}/#/LinkShare/PanoShare/${scene.PbGuid}/${this.projectId}/${scene.PsScenename}`;
            panoFrame.setAttribute("src", ifrSrc);
          }, 300);
        });
        //   removepano('krpanoSWFObject')
        //  const basepath = `${window.ProjectConfig.panoUrl}/Panorama${item.PbUrl}/vtour/`
        //  const xmlurl = `${basepath}tour.xml?r=${(Math.random() * 100000 + 1)}`
        //  let setting = {}
        //  if (scene) {
        //   const scenename = 'scene_' + scene.PsScenename
        //   setting = {
        //    startscene: scenename
        //   }
        //  }
        //  this.$nextTick(() => {
        //   embedpano({
        //    xml: xmlurl,
        //    target: 'panoviewpreview',
        //    basepath,
        //    vars: setting,
        //    html5: 'auto',
        //    passQueryParameters: true,
        //   })
        //  })
      },
      sceneShow() {
        const iframe = document.getElementById("scene-iframe");
        let ifrSrc = "";
        ifrSrc = window.ProjectConfig.sceneUrl;
        iframe.src = ifrSrc;
        this.isLoading = false;
      },
      mounted() {
        this.isLoading = true;
        this.modelShow();
      },
      /**
       * 获取项目实况数据
       * @param {string} bindId - 标段ID
       */
      getProjectLive(bindId) {
        const params = {
          bindId,
        };
        HomeAPI.GetJSCProjectMonitor(params).then((res) => {
          if (res.Ret === 1) {
            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;
                });
              });
            }
            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];
        this.loadVideo();
      },
      // 检查FLV支持
      checkFlvSupport() {
        if (!flvjs.isSupported()) {
          this.errorMessage = "当前浏览器不支持FLV播放";
          this.playerStatus = "不支持";
          return false;
        }
        this.playerStatus = "已就绪";
        return true;
      },
      /**
       * 销毁播放器实例
       */
      destroyPlayer() {
        if (this.flvPlayer) {
          try {
            this.flvPlayer.pause();
            this.flvPlayer.unload();
            this.flvPlayer.detachMediaElement();
            this.flvPlayer.destroy();
            this.flvPlayer = null;
          } catch (error) {
            console.error("销毁播放器时出错:", error);
          }
        }
        this.isReady = false;
      },
      /**
       * 加载视频
       */
      loadVideo() {
        if (!this.videoSrc.trim()) {
          this.errorMessage = "请播放有效的视频URL";
          return;
        }

  },
  getPanoPhase() {
   const data = {
    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])
    }
   })
  },
  panoPreview(item, scene) {
    // /LinkShare/PanoShare/:PanoId/:organizeId/:StartScene
    // PanoId：全景图的id，organizeId：项目id，StartScene:初始场景id
    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}`
        panoFrame.setAttribute("src",ifrSrc);
      }, 300)
      
    })
  //   removepano('krpanoSWFObject')
  //  const basepath = `${window.ProjectConfig.panoUrl}/Panorama${item.PbUrl}/vtour/`
  //  const xmlurl = `${basepath}tour.xml?r=${(Math.random() * 100000 + 1)}`
  //  let setting = {}
  //  if (scene) {
  //   const scenename = 'scene_' + scene.PsScenename
  //   setting = {
  //    startscene: scenename
  //   }
  //  }
  //  this.$nextTick(() => {
  //   embedpano({
  //    xml: xmlurl,
  //    target: 'panoviewpreview',
  //    basepath,
  //    vars: setting,
  //    html5: 'auto',
  //    passQueryParameters: true,
  //   })
  //  })
  },
  sceneShow() {
   const iframe = document.getElementById('scene-iframe')
   let ifrSrc = ''
   ifrSrc = window.ProjectConfig.sceneUrl
   iframe.src = ifrSrc
   this.isLoading = false
  },
  mounted() {
   this.isLoading = true
   this.modelShow()
  }
 }
}
        if (!this.checkFlvSupport()) {
          return;
        }
        this.errorMessage = "";
        this.playerStatus = "加载中...";

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

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

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

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

          // 开始加载
          this.flvPlayer.load();
        } catch (error) {
          console.error("加载视频失败:", error);
          this.errorMessage = "视频加载失败: " + error.message;
          this.playerStatus = "加载失败";
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
.home-container {
 display: flex;
 flex-direction: column;
 height: calc(100vh - 100px);
 overflow: hidden;
}

.top-nav {
 height: 5vh;
 display: flex;
 justify-content: space-between;
 align-items: center;
 color: white;
}

.bottom-nav {
 flex: 1;
}

.nav-items {
 display: flex;
 gap: 20px;
}

.nav-item {
 background: rgba(112, 119, 140, 0.3);
 border-radius: 2px;
 border: 1px solid rgba(112, 124, 140, 0.6);
 padding: 5px 16px;
 cursor: pointer;
}

.nav-item.active {
 background: rgba(255, 191, 0, 0.2);
 border-radius: 2px;
 border: 1px solid #FFBF00;
}

.time-info {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 200px;
}

.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%);
}

.content-wrapper {
 display: flex;
 overflow: hidden;
 position: relative;
 height: 98%;
}

.chart-content {
 width: 100%;
 height: calc(100% - 52% - 20px);
}

.side-menu {
 width: 160px;
 color: white;
 position: absolute;
 top: 10px;
 left: 10px;
 right: auto;
 bottom: auto;

 ::v-deep .el-cascader {
  width: 100%;
  height: 100%;

  .el-cascader-node__label {
   color: #fff;
  .home-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 100px);
    overflow: hidden;
  }
  .top-nav {
    height: 5vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
  }

  .el-input .el-input__inner {
   background: rgba(33, 72, 115, 0.9);
  .bottom-nav {
    flex: 1;
  }
 }
}

.menu-dropdown {
 padding: 15px;
}

.menu-select {
 width: 100%;
 padding: 8px;
 background-color: #0a1931;
 color: white;
 border: 1px solid #2a4d7d;
}

.menu-list {
 border-top: 1px solid #2a4d7d;
}

.menu-item {
 padding: 12px 20px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 cursor: pointer;
}

.menu-item:hover {
 background-color: rgba(255, 255, 255, 0.1);
}

.arrow-icon {
 border: solid white;
 border-width: 0 2px 2px 0;
 display: inline-block;
 padding: 3px;
 transform: rotate(-45deg);
}

.submenu {
 background-color: #152b4a;
}

.submenu-item {
 padding: 10px 30px;
 font-size: 14px;
 cursor: pointer;
}

.submenu-item:hover {
 background-color: rgba(255, 255, 255, 0.1);
}

.main-content {
 flex: 1;
 background-color: #fff;
 width: 100%;
 height: 100%;
}

.content-header {
 color: white;
 margin-bottom: 20px;
}

.chart-container {
 padding: 20px;
 width: 100%;
 height: calc(100% - 5vh);
}

.chart-legend {
 display: flex;
 gap: 20px;
 margin-bottom: 20px;
 color: white;
}

.legend-item {
 display: flex;
 align-items: center;
 gap: 8px;
}

.dot {
 width: 10px;
 height: 10px;
 border-radius: 50%;
}

.dot.blue {
 background-color: #00ffff;
}

.dot.yellow {
 background-color: #ffd700;
}

.chart-area {
 height: 400px;
 margin-bottom: 20px;
}

.chart-tabs {
 display: flex;
 gap: 10px;
}

.tab {
 padding: 8px 16px;
 color: white;
 cursor: pointer;
 border-radius: 4px;
}

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

 .el-cascader-menu {
  color: #fff;

  .el-cascader-node__label {
   color: #fff;
  .nav-items {
    display: flex;
    gap: 20px;
  }
 }

 .el-cascader .el-input .el-input__inner:focus,
 .el-cascader .el-input.is-focus .el-input__inner {
  height: 28px;
  line-height: 28px;
 }
  .nav-item {
    background: rgba(112, 119, 140, 0.3);
    border-radius: 2px;
    border: 1px solid rgba(112, 124, 140, 0.6);
    padding: 5px 16px;
    cursor: pointer;
  }

 .el-cascader .el-input .el-input__inner {
  height: 28px;
  line-height: 28px;
  background: rgba(33, 72, 115, 0.9);
 }
  .nav-item.active {
    background: rgba(255, 191, 0, 0.2);
    border-radius: 2px;
    border: 1px solid #ffbf00;
  }

 .el-input__icon {
  line-height: 38px;
 }
  .time-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
  }

 .el-cascader-node:not(.is-disabled):focus,
 .el-cascader-node:not(.is-disabled):hover {
  background: #3068A5;
 }
  .time-info-item {
    display: flex;
    align-items: center;
  }

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

 .el-scrollbar__wrap {
  overflow: hidden;
  margin-bottom: 0px !important;
  margin-right: 0px !important;
 }
}
  .content-wrapper {
    display: flex;
    overflow: hidden;
    position: relative;
    height: 98%;
  }

  .chart-content {
    width: 100%;
    height: calc(100% - 52% - 20px);
  }

  .side-menu {
    width: 160px;
    color: white;
    position: absolute;
    top: 10px;
    left: 10px;
    right: auto;
    bottom: auto;

    ::v-deep .el-cascader {
      width: 100%;
      height: 100%;

      .el-cascader-node__label {
        color: #fff;
      }

      .el-input .el-input__inner {
        background: rgba(33, 72, 115, 0.9);
      }
    }
  }

  .menu-dropdown {
    padding: 15px;
  }

  .menu-select {
    width: 100%;
    padding: 8px;
    background-color: #0a1931;
    color: white;
    border: 1px solid #2a4d7d;
  }

  .menu-list {
    border-top: 1px solid #2a4d7d;
  }

  .menu-item {
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }

  .menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .arrow-icon {
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
  }

  .submenu {
    background-color: #152b4a;
  }

  .submenu-item {
    padding: 10px 30px;
    font-size: 14px;
    cursor: pointer;
  }

  .submenu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .main-content {
    flex: 1;
    background-color: #fff;
    width: 100%;
    height: 100%;
  }

  .content-header {
    color: white;
    margin-bottom: 20px;
  }

  .chart-container {
    padding: 20px;
    width: 100%;
    height: calc(100% - 5vh);
  }

  .chart-legend {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    color: white;
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .dot.blue {
    background-color: #00ffff;
  }

  .dot.yellow {
    background-color: #ffd700;
  }

  .chart-area {
    height: 400px;
    margin-bottom: 20px;
  }

  .chart-tabs {
    display: flex;
    gap: 10px;
  }

  .tab {
    padding: 8px 16px;
    color: white;
    cursor: pointer;
    border-radius: 4px;
  }

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

    .el-cascader-menu {
      color: #fff;

      .el-cascader-node__label {
        color: #fff;
      }
    }

    .el-cascader .el-input .el-input__inner:focus,
    .el-cascader .el-input.is-focus .el-input__inner {
      height: 28px;
      line-height: 28px;
    }

    .el-cascader .el-input .el-input__inner {
      height: 28px;
      line-height: 28px;
      background: rgba(33, 72, 115, 0.9);
    }

    .el-input__icon {
      line-height: 38px;
    }

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

    .popper__arrow {
      display: none;
    }

    .el-scrollbar__wrap {
      overflow: hidden;
      margin-bottom: 0px !important;
      margin-right: 0px !important;
    }
  }
</style>

 vite.config.js

@@ -13,111 +13,118 @@

import PluginForViteVue2 from "@vitejs/plugin-vue2";
// 屏幕适配
const px2rem = require("postcss-px2rem")
    // 配置基本大小
const px2rem = require("postcss-px2rem");
// 配置基本大小
const postcss = px2rem({
    //配rem基准值 基准大小 baseSize
    remUnit: 192, // 设稿尺1920/10
})
  //配rem基准值 基准大小 baseSize
  remUnit: 192, // 设稿尺1920/10
});

export default defineConfig(({ mode }) => {
    return {
        resolve: {
            alias: {
                "@": path.resolve(__dirname, './src'),
                "@css": path.resolve("./src/assets/css"),
                'worker-loader': require.resolve('worker-loader'),
            },
  return {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),
        "@css": path.resolve("./src/assets/css"),
        "worker-loader": require.resolve("worker-loader"),
      },
    },
    worker: {
      // 例如，设置一个worker的入口文件
      // 注意：这是一个假设的配置，具体取决于worker-loader是否支持这样的配置
      // entry: '/path/to/worker/entry.js',
      options: { inline: true, name: "workerName.[hash].js" },
    },
    plugins: [PluginForViteVue2(), splitVendorChunkPlugin()],
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: "@import '@css/sass.scss';",
        },
        worker: {
            // 例如，设置一个worker的入口文件
            // 注意：这是一个假设的配置，具体取决于worker-loader是否支持这样的配置
            // entry: '/path/to/worker/entry.js',
            options: { inline: true, name: 'workerName.[hash].js' }
      },
      loaderOptions: {
        postcss: {
          plugins: [postcss],
        },
        plugins: [PluginForViteVue2(), splitVendorChunkPlugin()],
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: "@import '@css/sass.scss';",
                },
            },
            loaderOptions: {
                postcss: {
                    plugins: [postcss]
                }
      },
    },
    server: {
      proxy: {
        "^/api/": {
          // target: "http://47.117.124.20:2002/",
          target: "http://101.201.155.10:4011/",
          rewrite: (path) => path.replace(/^\/api\//, ""),
          changeOrigin: true, //通过浏览器查看像是"未生效",实际发送给后端的是更改过的Host(与target的host相同)
        },
      },
      port: 8081,
      host: "0.0.0.0",
      cors: true,
      open: true,
    },
    esbuild: {
      treeShaking: true,
      drop: mode === "production" ? ["console", "debugger"] : [],
    },
    chainWebpack(config) {
      config.module
        .rule("css")
        .test(/\.css$/)
        .oneOf("vue")
        .use("px2rem-loader")
        .loader("px2rem-loader")
        .options({
          remUnit: 192,
        })
        .end();
    },
    build: {
      minify: "esbuild",
      chunkSizeWarningLimit: 500, //kbs
      rollupOptions: {
        output: {
          chunkFileNames: "assets/js/[name]-[hash].js",
          entryFileNames: "assets/js/[name]-[hash].js",
          assetFileNames: "assets/[ext]/[name]-[hash].[ext]",
          // manualChunks(id) {
          //   if (id.includes("/node_modules/")) {
          //     const name = id.split("/node_modules/")[1].split("/")[0];
          //     for (const key of Object.keys(ChunksMap)) {
          //       if (ChunksMap[key].includes(name)) {
          //         return key;
          //       }
          //     }
          //     return "vendor";
          //   }
          // },

          // eslint-disable-next-line no-unused-vars
          // manualChunks(id, { getModuleInfo, getModuleIds }) {
          //   const getShouldBeVendor = splitVendorChunk();
          //   const chunkName = getShouldBeVendor(id, { getModuleInfo });
          //   if (chunkName === "vendor") {
          //     //1 在node_modules文件夹下
          //     //2 不是css类请求
          //     //3 是被静态引入的
          //     return chunkName;
          //   } else if (id.includes("src")) {
          //     const moduleInfo = getModuleInfo(id);
          //     // console.log(id, "importers", moduleInfo.importers);
          //     // console.log(id, "dynamicImporters", moduleInfo.dynamicImporters);
          //     if (moduleInfo.importers.length + moduleInfo.dynamicImporters.length > 1) {
          //       return "manifest";
          //     }
          //   }
          // },

          // eslint-disable-next-line no-unused-vars
          manualChunks(id) {
            if (id.includes("/node_modules/")) {
              return id.split("/node_modules/")[1].split("/")[0];
            }
          },
        },
        server: {
            proxy: {
                "^/api/": {
                    // target: "http://47.117.124.20:2002/",
                    target: "http://8.140.54.245:5000/",
                    rewrite: (path) => path.replace(/^\/api\//, ""),
                    changeOrigin: true, //通过浏览器查看像是"未生效",实际发送给后端的是更改过的Host(与target的host相同)
                },
            },
            port: 3000,
            host: "0.0.0.0",
            cors: true,
            open: true,
        },
        esbuild: {
            treeShaking: true,
            drop: mode === "production" ? ["console", "debugger"] : [],
        },
        chainWebpack(config) {
            config.module.rule("css").test(/\.css$/).oneOf("vue").use("px2rem-loader").loader("px2rem-loader").options({
                remUnit: 192,
            }).end();
        },
        build: {
            minify: "esbuild",
            chunkSizeWarningLimit: 500, //kbs
            rollupOptions: {
                output: {
                    chunkFileNames: "assets/js/[name]-[hash].js",
                    entryFileNames: "assets/js/[name]-[hash].js",
                    assetFileNames: "assets/[ext]/[name]-[hash].[ext]",
                    // manualChunks(id) {
                    //   if (id.includes("/node_modules/")) {
                    //     const name = id.split("/node_modules/")[1].split("/")[0];
                    //     for (const key of Object.keys(ChunksMap)) {
                    //       if (ChunksMap[key].includes(name)) {
                    //         return key;
                    //       }
                    //     }
                    //     return "vendor";
                    //   }
                    // },

                    // eslint-disable-next-line no-unused-vars
                    // manualChunks(id, { getModuleInfo, getModuleIds }) {
                    //   const getShouldBeVendor = splitVendorChunk();
                    //   const chunkName = getShouldBeVendor(id, { getModuleInfo });
                    //   if (chunkName === "vendor") {
                    //     //1 在node_modules文件夹下
                    //     //2 不是css类请求
                    //     //3 是被静态引入的
                    //     return chunkName;
                    //   } else if (id.includes("src")) {
                    //     const moduleInfo = getModuleInfo(id);
                    //     // console.log(id, "importers", moduleInfo.importers);
                    //     // console.log(id, "dynamicImporters", moduleInfo.dynamicImporters);
                    //     if (moduleInfo.importers.length + moduleInfo.dynamicImporters.length > 1) {
                    //       return "manifest";
                    //     }
                    //   }
                    // },

                    // eslint-disable-next-line no-unused-vars
                    manualChunks(id) {
                        if (id.includes("/node_modules/")) {
                            return id.split("/node_modules/")[1].split("/")[0];
                        }
                    },
                },
            },
        },
    };
});
      },
    },
  };
});

 yarn.lock

@@ -619,6 +619,11 @@
    defined "^1.0.0"
    minimist "^1.2.6"

dhtmlx-gantt@^9.0.11:
  version "9.0.11"
  resolved "https://registry.yarnpkg.com/dhtmlx-gantt/-/dhtmlx-gantt-9.0.11.tgz#4492c3d42b65b4d98c005f8bdfbb0ad9b2d87290"
  integrity sha512-tbJ4RYud/uSw4MpdBoTxolW7DzCtOnLNzxpFptP0Zqw1yaaNhU7s4Jfq3RnnkmD5WEdFx9bJ+6w6LovegFDHJw==

didyoumean@^1.2.2:
  version "1.2.2"
  resolved "https://registry.npmmirror.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
@@ -678,6 +683,11 @@
  version "3.0.0"
  resolved "https://registry.npmmirror.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==

es6-promise@^4.2.8:
  version "4.2.8"
  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==

esbuild@^0.16.3:
  version "0.16.17"
@@ -932,6 +942,14 @@
  version "3.2.7"
  resolved "https://registry.npmmirror.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
  integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==

flv.js@^1.6.2:
  version "1.6.2"
  resolved "https://registry.yarnpkg.com/flv.js/-/flv.js-1.6.2.tgz#fa3340fe3f7ee01d3977f7876aee66b8436e5922"
  integrity sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==
  dependencies:
    es6-promise "^4.2.8"
    webworkify-webpack "^2.1.5"

follow-redirects@^1.15.0:
  version "1.15.2"
@@ -2037,6 +2055,11 @@
  resolved "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==

webworkify-webpack@^2.1.5:
  version "2.1.5"
  resolved "https://registry.yarnpkg.com/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz#bf4336624c0626cbe85cf1ffde157f7aa90b1d1c"
  integrity sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw==

which@^2.0.1:
  version "2.0.2"
  resolved "https://registry.npmmirror.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"