<template>
  <div class="bim-manage main-page">
    <div id="bimManage" :key="elId">
      <div id="bimManageContainer" class="bimManageContainer"></div>
    </div>
    <div class="div-left" :class="{ isShow: leftShow, isHide: !leftShow }">
      <transition name="left">
        <div class="data-content" v-show="leftShow">
          <div class="div-row">
            <div class="row-title">
              <svg-icon icon-class="signal"></svg-icon>
              项目概况
            </div>
            <div class="prj-info">
              <div class="base-info">
                <div class="floor-area led-number">{{ prj.floorArea }}</div>
                <div class="floor-area-text">建筑面积:单位(平方米)</div>
              </div>
              <table class="tb-prj">
                <tr>
                  <th>项目名称</th>
                  <td>{{ prj.projectName }}</td>
                </tr>
                <tr>
                  <th>建设单位</th>
                  <td>{{ prj.constructionUnit }}</td>
                </tr>
                <tr>
                  <th>总包单位</th>
                  <td>{{ prj.packageUnit }}</td>
                </tr>
                <tr>
                  <th>开工日期</th>
                  <td>{{ prj.startDate | toDate }}</td>
                </tr>
                <tr>
                  <th>计划完工日期</th>
                  <td>{{ prj.endDate | toDate }}</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="div-row">
            <div class="row-title">
              <svg-icon icon-class="signal"></svg-icon>
              成本产值
            </div>
            <div class="investment-stats-cost">
              <div class="stats-grid">
                <div class="stat-card">
                  <div class="stat-title">总投资(万元)</div>
                  <div class="stat-value led-number">{{ prj.totalCost }}</div>
                </div>
                <div class="stat-card">
                  <div class="stat-title">年度投资(万元)</div>
                  <div class="stat-value led-number">{{ prj.annualCost }}</div>
                </div>
                <div class="stat-card">
                  <div class="stat-title">本月完成(万元)</div>
                  <div class="stat-value led-number">{{ prj.monthCost }}</div>
                </div>
                <div class="stat-card">
                  <div class="stat-title">开累完成(万元)</div>
                  <div class="stat-value led-number">{{ prj.accumulatedCost }}</div>
                </div>
                <div class="center-icon">
                  <div class="chart-gif chart-overview-gif"></div>
                  <span><svg-icon icon-class="money2" /></span>
                </div>
              </div>
            </div>
          </div>
          <div class="div-row">
            <div class="row-title"><svg-icon icon-class="signal"></svg-icon> 人员</div>
            <div class="prj-worker">
              <div class="worker-chart">
                <div class="chart-item" v-for="(wk, idx) in workerInfo" :key="idx">
                  <div class="chart-gif chart-overview-gif"></div>
                  <div class="chart-text led-number">{{ wk.value }}</div>
                </div>
              </div>
              <div class="worker-title">
                <div class="title-item" v-for="(wk, idx) in workerInfo" :key="idx">
                  <svg-icon icon-class="group2" />
                  <div>{{ wk.text }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
      <img :src="leftSrc" class="toSafety-fixed-left-img" @click="arrowRetract" id="arrowLeft" />
    </div>
    <div class="div-right" :class="{ isShow: leftShow, isHide: !leftShow }">
      <transition name="right">
        <div class="data-content" v-show="leftShow">
          <div class="div-row">
            <div class="row-title">
              <svg-icon icon-class="signal"></svg-icon>
              工程进度
            </div>
            <div class="plan-chart">
              <div class="chart-item">
                <my-chart :key="chart1Key" class="chart-data" id="processChart1" width="100%" height="100%"
                  :render="renderChart1"></my-chart>
                <div class="chart-title">计划完成</div>
              </div>
              <div class="chart-item">
                <my-chart :key="chart2Key" class="chart-data" id="processChart2" width="100%" height="100%"
                  :render="renderChart2"></my-chart>
                <div class="chart-title">实际完成</div>
              </div>
            </div>
          </div>
          <div class="div-row">
            <div class="row-title">
              <svg-icon icon-class="signal"></svg-icon>
              安全检查
            </div>
            <div class="warn-info">
              <div class="warn-item">
                <div class="czz-number-img czz-number-img-blue">
                  <svg-icon icon-class="notesearch" />
                </div>
                <div class="warn-data">
                  <div class="warn-data-val led-number">{{ safetyInfo.safetyCount }}</div>
                  <div class="warn-data-text">问题数</div>
                </div>
              </div>
              <div class="warn-item">
                <div class="czz-number-img czz-number-img-blue">
                  <svg-icon icon-class="tools" />
                </div>
                <div class="warn-data">
                  <div class="warn-data-val led-number">{{ safetyInfo.safetyRectifyCount }}</div>
                  <div class="warn-data-text">整改数</div>
                </div>
              </div>
              <div class="warn-item">
                <div class="czz-number-img czz-number-img-green">
                  <svg-icon icon-class="percent" class="green" />
                </div>
                <div class="warn-data">
                  <div class="warn-data-val led-number">{{ safetyInfo.safetyRectifyRate }}%</div>
                  <div class="warn-data-text">整改率</div>
                </div>
              </div>
              <div class="warn-item">
                <div class="czz-number-img czz-number-img-blue">
                  <svg-icon icon-class="warn" class="red" />
                </div>
                <div class="warn-data">
                  <div class="warn-data-val led-number">{{ safetyInfo.safetyTimeoutCount }}</div>
                  <div class="warn-data-text">超时数</div>
                </div>
              </div>
            </div>
          </div>
          <div class="div-row">
            <div class="row-title"><svg-icon icon-class="signal"></svg-icon> 项目全景</div>

            <div class="photography-list">
              <template v-if="photographyList && photographyList.length > 0">
                <el-carousel height="100%" :autoplay="false">
                  <el-carousel-item v-for="(item, idx) in photographyList" :key="idx">
                    <video controls class="photography-video">
                      <source :src="item.videoUrl" type="video/mp4" :key="item.videoUrl" />
                      您的浏览器不支持Video标签。
                    </video>
                    <div class="photography-list-title">
                      {{ item.videoDate }}
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </template>
              <template v-else>
                <div class="photography-list-nodata">
                  <div>
                    <i class="video-play">
                      <svg class="icon"
                        style="width: 30px; height: 30px; vertical-align: middle; fill: currentColor; overflow: hidden"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4551">
                        <path
                          d="M128 138.666667c0-47.232 33.322667-66.666667 74.176-43.562667l663.146667 374.954667c40.96 23.168 40.853333 60.8 0 83.882666L202.176 928.896C161.216 952.064 128 932.565333 128 885.333333v-746.666666z"
                          fill="#3D3D3D" p-id="4552"></path>
                      </svg>
                    </i>
                  </div>
                  <div class="photography-list-no-title">暂无数据</div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </transition>
      <img :src="rightSrc" class="toSafety-fixed-right-img" @click="arrowRetract" id="arrowRight" />
    </div>

    <div class="div-mode">
      <div class="mode-item" :class="{ 'is-active': mode == 'plan' }" @click="changeMode('plan')">
        <svg-icon icon-class="funnel" />
        <span>形象进度</span>
      </div>

      <div class="mode-item" :class="{ 'is-active': mode == 'model' }" @click="changeMode('model')">
        <svg-icon icon-class="city" />
        <span>整体模型</span>
      </div>
    </div>
    <div class="div-tools" :class="'menu-' + menuShowCount">
      <div class="tool-item" @click="resetScene">
        <div class="icon">
          <svg-icon icon-class="home" />
        </div>
        <span class="sp-text">默认视点</span>
      </div>

      <div class="tool-item" @click="changeDevicType(1)" :class="{ 'is-active': devicTypes.includes(1) }"
        v-if="menuShow.video">
        <div class="icon">
          <svg-icon icon-class="videoMonitor" />
        </div>
        <span class="sp-text">视频监控</span>
      </div>
      <div class="tool-item" @click="changeDevicType(2)" :class="{ 'is-active': devicTypes.includes(2) }"
        v-if="menuShow.pit">
        <div class="icon">
          <svg-icon icon-class="pitMonitor" />
        </div>
        <span class="sp-text">基坑监控</span>
      </div>
      <div class="tool-item" @click="changeDevicType(3)" :class="{ 'is-active': devicTypes.includes(3) }"
        v-if="menuShow.tower">
        <div class="icon">
          <svg-icon icon-class="towerMonitor" />
        </div>
        <span class="sp-text">塔机监控</span>
      </div>
      <div class="tool-item" @click="changeDevicType(4)" :class="{ 'is-active': devicTypes.includes(4) }"
        v-if="menuShow.power">
        <div class="icon">
          <svg-icon icon-class="power" />
        </div>
        <span class="sp-text">电箱监控</span>
      </div>
    </div>
    <div class="plan-legend" :class="{ isShow: leftShow, isHide: !leftShow }" v-if="mode == 'plan'">
      <div class="plan-item">
        <span style="background: rgba(59, 255, 0, 1)"></span>
        <span>提前完工</span>
      </div>
      <div class="plan-item">
        <span style="background: rgba(255, 255, 255, 1)"></span>
        <span>正常完工</span>
      </div>
      <div class="plan-item">
        <span style="background: rgba(250, 0, 0, 1)"></span>
        <span>延迟完工</span>
      </div>
      <div class="plan-item">
        <span style="background: rgba(0, 0, 255, 1)"></span>
        <span>正在施工</span>
      </div>
    </div>
    <video-dialog ref="videoDlg"></video-dialog>
  </div>
</template>

<script>
const css = `<style>
.tag-box {
      position: relative;
      display: flex;
      flex-flow: column;
      align-items: center;
    }
    .tag-img {
        width: 20px;
        height: 20px;
        position: absolute;
        left:50%;
        bottom:55px;
        margin-left:-10px;
    }
    .tag-bg-img{
      width: 16px;
      height: 80px;
      margin-bottom:40px;
    }
    .tag-txt {
      color: #FFF;
      font-size: 12px;
      padding: 10px;
      background: #2b4d63de;
      border: 1px solid #75fbfdaa;
    }
    .tag-txt .data-item.red{
      color:red;
    }
    .tag-bg-img-1{
        width:21px;
        height:18px;
        position: absolute;
        bottom:40px;
        left:50%;
        margin-left:-11px;
    }
    .tag-img-1 {
        width: 20px;
        height: 20px;
        position: absolute;
        left:50%;
        bottom:55px;
        margin-left:-10px;
    }
    .box-type-1{
        height:80px;
        width:60px;
        display:block;
    }
    .tb-power{
      border-collapse: collapse;
    }
    .tb-power td{
      border:solid 1px #75fbfd33;
      padding:4px 8px;
      text-align:center;
    }
    </style>`;
import debounce from "lodash.debounce";
import videoDialog from "./bim/videoDialog.vue";
export default {
  components: {
    videoDialog,
  },
  data() {
    return {
      dpi: "",
      elId: 1,
      devicTypes: [],
      viewPoint: null,
      project: null,
      selProject: null,
      addLabels: [],
      devices: [],
      showDevices: [],
      videoData: [],
      towerData: [],
      iotData: [],
      leftSrc: "./bimImages/arrow_left_retract.png",
      rightSrc: "./bimImages/arrow_right_retract.png",
      leftShow: true,
      towerWarning: [],
      prjInfo: null,
      costOutData: null,
      prj: {
        floorArea: 0,
        projectName: "",
        constructionUnit: "",
        packageUnit: "",
        startDate: "",
        endDate: "",
        totalCost: 0,
        annualCost: 0,
        monthCost: 0,
        accumulatedCost: 0,
      },
      workerInfo: [],
      chart1Key: 0,
      chart2Key: 10000,
      planFinishRate: 0,
      finishRate: 0,
      photographyList: [],
      safetyListCount: [],
      safetyInfo: {
        safetyRectifyCount: 0,
        safetyRectifyRate: 0,
        safetyTimeoutCount: 0,
        safetyTimeoutRate: 0,
      },
      menuShow: {
        video: false, //视频监控
        pit: false, //基坑监控
        tower: false, //塔机监控
        power: false, //电箱监控
      },
      menuShowCount: 0,
      isClient: false,
      modelLoadSuccess: false, //模型加载成功
      mode: "model", //显示模式 model-整体模型 plan-形象进度
      bimCfg: {//BIM显示配置
        background: '',
        showGis: false,
        clientApi: false,
      },
      hideParts: []
    };
  },
  beforeDestroy() {
    document.body.classList.remove("is-sapi");
  },
  mounted() {
    window.bimmgr = this
    this.$store.dispatch("ChangeNav", 701);
    this.dpi = this.$dpi();
    window.addEventListener("resize", () => {
      if (this.dpi != this.$dpi()) {
        this.dpi = this.$dpi();
      }
    });
    this.$bus.$on(
      "projectChange",
      debounce((prj) => {
        this.selProject = prj;
        this.elId++;
        this.initEngine();
        this.updateProjectInfo();
      })
    );
    this.selProject = this.$store.getters.selProject;
    this.updateProjectInfo();
    document.body.classList.add("is-sapi");
    this.initEngine();
    this.$api.dict("device_tower_warning").then((d) => {
      this.towerWarning = d;
    });
    this.$bus.$on("getMenus", (objs) => {
      this.updateButtonShow();
    });
    this.updateButtonShow();
  },
  methods: {
    updateButtonShow() {
      let objs = this.$root.showMenus || [];
      this.menuShow.video = objs.find((it) => it.component == "video") ? true : false;
      this.menuShow.pit = objs.find((it) => it.component == "pit") ? true : false;
      this.menuShow.tower = objs.find((it) => it.component == "tower") ? true : false;
      this.menuShow.power = objs.find((it) => it.component == "power") ? true : false;
      this.menuShowCount = 0;
      for (let key in this.menuShow) {
        if (this.menuShow[key]) {
          this.menuShowCount++;
        }
      }
    },
    renderChart1() {
      return this.renderChart(0);
    },
    renderChart2() {
      return this.renderChart(1);
    },
    renderChart(n) {
      let is1K = this.$dpi() == "1K";
      let is2K = this.$dpi() == "2K";
      let opt = {
        tooltip: {
          show: true,
          formatter: function (params) {
            return params.seriesName + "<br/>" + params.marker + (params.value * 100).toFixed(2) + "%";
          },
        },
        series: [
          {
            type: "liquidFill",
            data: [n == 0 ? this.planFinishRate : this.finishRate],
            name: n == 0 ? "计划完成" : "实际完成",
            color: [n == 0 ? "orange" : "#47D89F"], //颜色
            //波浪动画效果
            waveAnimation: true,
            animationEasingUpdate: "quinticInOut",
            backgroundStyle: {
              borderWidth: 2,
              borderColor: "#156ACF",
            },
            radius: "70%",
            outline: {
              show: false,
            },
            label: {
              fontSize: is1K ? 20 : is2K ? 30 : 40,
              formatter: function (param) {
                return (param.value * 100).toFixed(2) + "%";
              },
            },
          },
        ],
      };
      return opt;
    },
    updateProjectInfo() {
      if (!this.selProject) {
        return;
      }
      this.getProjectInfo();
      this.costOutputSelectYearAndMonth();
      //this.groupByCraftType();
      this.loadAttendanceData();
      this.getRootScheduleNode();
      this.getFinishRate();
      this.selectLastPhotography();
      this.getSafetyListCount();
    },
    getSafetyListCount() {
      let postData = {
        projectId: this.selProject.id,
        comId: this.selProject.comId,
      };
      this.$api.safety.listCountForBG({ ...postData, infoType: 0 }).then((d) => {
        this.safetyListCount = d.data;
        let func = (lbl) => {
          let obj = this.safetyListCount.find((it) => it.remark == lbl);
          return obj ? obj.id || 0 : 0;
        };
        this.safetyInfo.safetyCount = func("全部");
        this.safetyInfo.safetyRectifyCount = func("完成");
        if (this.safetyInfo.safetyCount == 0) {
          this.safetyInfo.safetyRectifyRate = 100;
        } else {
          this.safetyInfo.safetyRectifyRate = ((this.safetyInfo.safetyRectifyCount / this.safetyInfo.safetyCount) * 100.0).toFixed(2);
        }
        this.safetyInfo.safetyTimeoutCount = func("整改超时");
      });
    },
    selectLastPhotography() {
      this.$api.detail.photographyList(this.selProject.id).then((d) => {
        this.photographyList = d.data;
      });
    },
    getFinishRate() {
      this.$api.planSchedule.findAllPlanDatas(this.selProject.id).then((res) => {
        let _ywcjhs = [];

        res.data.forEach((item) => {
          if (item.taskStatus == "zcwc" || item.taskStatus == "zhwc") {
            _ywcjhs.push(item);
          }
        });

        this.finishRate = (_ywcjhs.length / res.data.length).toFixed(4);
        this.chart2Key++;
      });
    },
    getProjectInfo() {
      this.$api.project.getProjectInfo(this.selProject.id).then((d) => {
        this.prjInfo = d.data || {};
        let tmps = this.prjInfo.projectDeptsList || [];
        const func = (t) => {
          let obj = tmps.find((it) => it.deptType == t);
          return obj ? obj : {};
        };

        this.prj.floorArea = this.prjInfo.floorArea || 0;
        this.prj.projectName = this.prjInfo.projectName || "";

        this.prj.constructionUnit = func("建设单位").deptName;
        this.prj.packageUnit = this.prjInfo.disDeptName;
        this.prj.startDate = this.prjInfo.actualOperatingTime;
        this.prj.endDate = this.prjInfo?.plannedCompletionTime || "";
      });
    },
    costOutputSelectYearAndMonth() {
      let dt = this.$dt(new Date());
      this.$api.detail
        .costOutputSelectYearAndMonth({
          comId: this.selProject.comId,
          projectId: this.selProject.id,
          year: dt.$y,
          month: dt.$M + 1,
        })
        .then((d) => {
          this.costOutData = d;
          this.prj.totalCost = d.totalInv || 0;
          this.prj.annualCost = d.totalYear || 0;
          this.prj.monthCost = d.curMonth || 0;
          this.prj.accumulatedCost = d.totalMonth || 0;
        });
    },
    loadAttendanceData() {
      if (this.selProject.vendorsCode != "uni") {
        this.loadJhAttendanceData();
      } else {
        this.loadUniAttendanceData();
      }
    },
    loadJhAttendanceData() {
      let data = {
        id: 0,
        projectId: this.selProject.id,
        attendanceTime: this.$dt(new Date()).format("YYYY-MM-DD"),
      };
      let ajax = this.$api.detail.groupAllByComany;

      ajax(data).then((d) => {
        let tmps = d.data || [];
        const func = (ids) => {
          let sum = 0;
          tmps
            .filter((it) => ids.includes(it.companyTypeId))
            .map((it) => it.id)
            .forEach((it) => {
              sum += it * 1;
            });
          return sum;
        };

        this.workerInfo = [
          { text: "劳务人员", value: func(["4", "5"]) },
          { text: "监理人员", value: func(["2"]) },
          { text: "总包人员", value: func(["1"]) },
        ];
        console.log(this.attendanceData);
      });
    },
    loadUniAttendanceData() {
      let ajax = this.$api.detail.groupByCraftType;
      let posData = {
        comId: this.selProject.comId,
        projectId: this.selProject.id,
      };

      ajax(posData).then((d) => {
        this.workerInfo = (d.data || []).map((it) => {
          return {
            text: it.createBy,
            value: it.id || 0,
            id: it.craftType,
          };
        });
      });
    },
    groupByCraftType() {
      let ajax = this.$api.detail.groupByCraftType;
      let posData = {
        comId: this.selProject.comId,
        projectId: this.selProject.id,
      };
      ajax(posData).then((d) => {
        this.workerInfo = (d.data || [])
          .map((it) => {
            return {
              text: it.createBy,
              value: it.id || 0,
              id: it.craftType,
            };
          })
          .sort((a, b) => {
            return b.id - a.id;
          });
      });
    },
    getRootScheduleNode() {
      this.$api.bim
        .getRootScheduleNode({
          projectId: this.selProject.id,
        })
        .then((d) => {
          let objs = d.data || [];
          this.planFinishRate = objs.length > 0 ? ((objs[0].scheduleNode || 0) / 100.0).toFixed(4) : 0;
          this.chart1Key++;
        });
    },
    arrowRetract() {
      if (this.leftShow == true) {
        this.rightSrc = "./images/arrow_right_open.png";
        this.leftSrc = "./images/arrow_left_open.png";
        $("#arrowLeft").animate({ left: 10 + "px" }, 300);
        $("#arrowRight").animate({ right: 10 + "px" }, 300);
      } else {
        this.rightSrc = "./images/arrow_right_retract.png";
        this.leftSrc = "./images/arrow_left_retract.png";

        $("#arrowLeft").animate({ left: 490 + "px" }, 300);
        $("#arrowRight").animate({ right: 490 + "px" }, 300);
      }
      this.leftShow = !this.leftShow;
    },

    loadDevicePosition() {
      if (!this.selProject) {
        return;
      }
      this.$api.bim
        .devicePositionGet({
          projectId: this.selProject.id,
        })
        .then((res) => {
          let cnt = 0;
          this.devices = (res.data || [])
            .filter((item) => item.enabled != 0)
            .map((item) => {
              item.show = item.enabled != 0;
              item.position = this.$tryToJson(item.position, []);
              item.elId = (item.deviceId ? item.deviceId : cnt++) + "-" + item.deviceType;
              return item;
            })
            .filter((item) => item.position.length == 3);
          this.showDevices = this.devices.filter((item) => this.devicTypes.includes(item.deviceType));
          this.clearLabels();
          this.addDeviceLabel();
          setTimeout(() => {
            this.loadDeviceData();
          }, 100);
        });
    },
    changeDevicType(n) {
      if (this.devicTypes.includes(n)) {
        let idx = this.devicTypes.indexOf(n);
        this.devicTypes.splice(idx, 1);
      } else {
        this.devicTypes.push(n);
      }
      this.showDevices = this.devices.filter((item) => this.devicTypes.includes(item.deviceType));
      this.clearLabels();
      this.addDeviceLabel();
      setTimeout(() => {
        this.loadDeviceData();
      }, 100);
    },
    AddLable: function (item) {
      let html = "";
      if (item.deviceType == 1) {
        html = this.getVideoHtml(item);
      } else if (item.deviceType == 2) {
        html = this.getPitHtml(item);
      } else if (item.deviceType == 3) {
        html = this.getTowerHtml(item);
      } else if (item.deviceType == 4) {
        html = this.getIotHtml(item);
      }

      window.bimMgrApi.Label.addBalloon({
        Html: html,
        ID: item.elId,
        Pivot: "2",
        Position: item.position,
        Title: item.name,
        MaxDistance: 1e6,
        onClick: (opt) => this.deviceClick(item, opt),
      });
      this.addLabels.push(item.elId);
    },
    deviceClick(item, opt) {
      if (item.deviceType == 1) {
        let obj = this.videoData.find((d) => d.id == item.deviceId);
        this.$refs.videoDlg.showDialog(item, obj);
        return;
      }
      console.log(item, opt);
    },
    addDeviceLabel() {
      this.showDevices.forEach((d) => {
        if (d.position && d.position.length > 0) {
          this.AddLable(d);
        }
      });
    },
    removeLabel(lbl) {
      if (this.addLabels.includes(lbl)) {
        window.bimMgrApi.Label.removeBalloon(lbl);
        let idx = this.addLabels.indexOf(lbl);
        this.addLabels.splice(idx, 1);
      }
    },
    clearLabels() {
      this.addLabels.forEach((id) => {
        window.bimMgrApi.Label.removeBalloon(id);
      });
      this.addLabels = [];
    },
    initEngine() {
      let config = this.$tryToJson(this.selProject?.bimConfig, {})
      this.bimCfg.background = config.background || ''
      this.bimCfg.showGis = config.showGis || false
      this.bimCfg.clientApi = config.clientApi || false
      this.elId++;
      this.activeMenu = 0;
      setTimeout(() => {
        this.isClient = localStorage.getItem("BimClient");
        if (this.bimCfg.clientApi) {
          this.loadEngine2();
        } else {
          this.loadEngine();
        }
      }, 10);
    },
    loadEngine2() {
      let opt = {
        container: "bimManageContainer", //[必须]容器id
        showfps: false, //[可选]显示fps
        openearth: true, //[可选]开启gis场景
        // imageryprovider: "tianditu_image", //[可选]gis底图
        openterrain: false, //[可选]开启gis地形
        maxspaceerror: 5000, //[可选]模型可视距离; 建议设置：常规BIM时3000或更大、BIM启用LOD时100~1000、倾斜摄影,点云数据时0.1~0.5
        loading: false, //[可选]gis模式加载动画
        bgcolor: "#87CEFA", //[可选]bim模式场景背景色
        selectedcolor: "#FFFF00", //[可选]选中构件颜色
        throughwall: true, //[可选]相机是否穿墙
        sitepath: "../Cesium/",//[可选]设置天空盒路径，指向Cesium文件夹
        editmode: true, //[可选]是否开启编辑模式
        searchbox: true, //[可选]gis模型是否显示搜索框
        mapbox: true, //[可选]gis模型是否显示地图选择
        isRequestWebgl2: true, //[可选]是否使用webgl2进行渲染
        colorBlendMode: 1, //0:HIGHLIGHT 1:REPLACE 2:MIX ，构件选中后的着色模式
        secretkey: window.config.secretKey,
        language: "zh-CN", // 语言国际化 中文简体(zh-CN)、中文繁体(zh-TW)、英文(en), 默认中文简体
        targetFrameRate: 20, //目标渲染帧率 默认20
      };
      window.bimMgrApi = new API(opt);
      console.log("初始化成功");
      setTimeout(() => {
        this.initLoadModel();
      }, 10);
    },
    loadEngine() {
      console.log("开始初始化...");
      window.bimMgrApi = new SAPI(
        {
          serverIP: window.config.serverIP, //服务ip地址
          port: window.config.port, //HTTP端口
          useHttps: window.config.useHttps, //使用Https
          container: "bimManageContainer", //[必须]容器id
          secretKey: window.config.secretKey,
          openEarth: window.config.openEarth, //[可选]开启Gis场景
          bgColor: window.config.bgColor, //[可选]bim场景背景色, 传值即为纯色天空盒
          tintColor: window.config.tintColor, //[可选]osgb单体化颜色
          sceneTime: window.config.sceneTime, //[可选]分别为当前时间、日出时间、日落时间
          cadMode: window.config.cadMode, // 是否是Cad图纸预览模式
        },
        () => {
          this.initSuccess = true;
          console.log("初始化成功");
          setTimeout(() => {
            this.initLoadModel();
          }, 1000);
          let mapOptions = {
            imgs: {
              // 六面图片
              top: "/cdn/bim/sapi/img/top.png",
              bottom: "/cdn/bim/sapi/img/under.png",
              east: "/cdn/bim/sapi/img/east.png",
              south: "/cdn/bim/sapi/img/south.png",
              west: "/cdn/bim/sapi/img/west.png",
              north: "/cdn/bim/sapi/img/north.png",
            },
            offset: {
              // 屏幕坐标偏移
              corner: GLENavigationCube.RightTop,
              x: 25,
              y: 20,
            },
            cube: {
              hoverColor: "#7193dc", // 立方导航快鼠标移过显示颜色
              size: 32, // 导航立方尺寸
              hotPointSize: 7, // 导航立方棱角热点区域尺寸
              cubeTextColor: "#4c4c4ccc", // cube 各个面文字颜色
              cubeStrokeColor: "#374769cc", // cube 各个面边框颜色
              cubeFillColor: "#374769cc", // cube 各个面填充颜色
            },
            zoomRatios: 1, // 缩放倍率
            show: true, // 是否显示
            showAxes: true, // 是否显示XYZ轴线
          };
          bimMgrApi.Plugin.initNavCube(mapOptions);
          if (this.bimCfg.showGis) {
            let api = bimMgrApi
            api.Public.setGisState(true);
            api.Public.setTerrainState(false, "http://113.201.2.107:9304/layer.json", false)
            api.Public.setGisState(true);
          } else if (this.bimCfg.background) {
            api.Public.setGisState(false, this.bimCfg.background);
          }
        }
      );
    },
    initLoadModel() {
      if (this.selProject == null) {
        return;
      }
      this.$api.bim.getDefaultViewPoint(this.selProject.id, 1).then((d) => {
        let pt = "";
        if (d.data && d.data.length > 0) {
          pt = d.data[0].viewPosition;
          pt = this.$tryToJson(pt, null);
        }
        if (pt) {
          this.viewPoint = pt;
        }
      });
      this.$api.bim
        .listBimModel({
          pageNum: 1,
          pageSize: 100,
          comId: this.selProject.comId,
          projectId: this.selProject.id,
        })
        .then((d) => {
          this.models = (d.rows || []).map((it) => {
            it.modelId = it.lightweightName;
            it.visible = false;
            it.checked = true;
            it.gis = this.$tryToJson(it.gisJson || "{}", {});
            return it;
          });
          if (this.models.length == 0) {
            this.$message.error("暂无模型，请先关联模型");
          } else {
            this.models.forEach((item) => {
              this.addModel(item.lightweightName);
            });
            let api = bimMgrApi;
            let fnInit = () => {
              if (api.m_model.size > 0) {
                setTimeout(() => {
                  this.initModelPosition()
                }, 1000)
              } else {
                setTimeout(fnInit, 1000);
              }
            }
            fnInit();
          }
        });
    },
    addModel(modelId, cb) {
      let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
      if (this.bimCfg.clientApi) {
        url = `/bimdata/Tools/output/model/${modelId}/root.glt`;
      }
      let api = bimMgrApi;
      console.log(modelId, url);
      api.Model.add(
        url,
        modelId,
        () => { },
        () => {
          cb && cb();
          console.log("加载模型成功");
          this.loadDevicePosition();

          setTimeout(() => {

            if (this.isClient) {
            } else {
              if (this.viewPoint) {
                api.Camera.setViewPort(this.viewPoint);
              } else {
                api.Camera.getViewPort((p) => {
                  this.viewPoint = p;
                });
              }
            }
            //this.initModelPosition(modelId);
            this.modelLoadSuccess = true;
            api.Model.location(modelId)
          }, 1000);
        }
      );
    },
    initModelPosition() {
      let api = bimMgrApi;
      this.models.forEach(modelInfo => {
        if (modelInfo) {
          let modelId = modelInfo.lightweightName
          let cfg = this.$tryToJson(modelInfo.bimConfig, {});
          let x = cfg?.x || 0;
          let y = cfg?.y || 0;
          let z = cfg?.z || 0;
          let rotateZ = cfg?.rotateZ || 0;
          if (x * 1 + y * 1 + z * 1 != 0) {
            console.log("移动模型", modelId, x, y, z)
            api.Model.moveToPosition([x, y, z], 0, modelId)
          }
          if (rotateZ * 1 != 0) {
            api.Model.rotate(0, 0, rotateZ, modelId)
          }
          if (cfg && cfg.hideParts) {
            cfg.hideParts.forEach(it => {
              this.hideParts.push(it);
            })
          }
          setTimeout(() => {
            api.Model.location(modelId);
            this.resetScene();
            if (x * 1 + y * 1 + z * 1 != 0) {
              setTimeout(() => {
                api.Camera.lookAt({ position: [x, y, z], distance: 20000, heading: 90, pitch: -45 })
              }, 1000);
            }
          }, 1000);
        }
        this.initHideParts()
      });
    },
    initHideParts() {
      let api = bimMgrApi;
      let hideCnt = 0;
      let hideFn = () => {
        hideCnt++;
        if (hideCnt > 20) {
          return;
        }
        setTimeout(() => {
          let featureIds = (this.hideParts || []).map(it => it.featureId);
          if (featureIds.length > 0) {
            api.Feature.setVisible(featureIds.join("#"), false);
          }
          hideFn();
        }, 100)
      };
      hideFn();
    },
    changeMode(mode) {
      if (!this.modelLoadSuccess) {
        this.$message.error("模型加载中，请稍后");
        return;
      }
      if (mode == this.mode) {
        return;
      }
      this.mode = mode;
      let api = bimMgrApi;
      if (mode == "model") {
        this.models.forEach((it) => {
          api.Model.original(it.lightweightName);
          api.Model.setAlpha(it.lightweightName, 1);
        });
        this.resetScene();
      } else {
        this.$api.planSchedule.findPlanProgress(this.selProject.id).then((d) => {
          let datas = d.data || [];
          let beforeData = []; //提前完工
          let afterData = []; //延迟完工
          let processData = []; //进行中
          let standData = []; //正常完工
          let allData = [];
          datas.forEach((it) => {
            let planFinishDate = it.planFinishDate;
            let finishDate = it.finishDate;
            it.bim = this.$tryToJson(it.bimId, []);
            if (finishDate == "2000-01-01") {
              it.bim.forEach((item) => {
                processData.push(item);
                allData.push(item);
              });
            } else if (planFinishDate == finishDate) {
              it.bim.forEach((item) => {
                standData.push(item);
                allData.push(item);
              });
            } else if (this.$dt(planFinishDate) < this.$dt(finishDate)) {
              it.bim.forEach((item) => {
                afterData.push(item);
                allData.push(item);
              });
            } else {
              it.bim.forEach((item) => {
                beforeData.push(item);
                allData.push(item);
              });
            }
          });
          //console.log("====>",beforeData,afterData,processData,standData);
          if (allData.length > 0) {
            allData = allData.map((item) => item.featureId);
            this.models.forEach((model) => {
              api.Model.setAlpha(model.lightweightName, 0.5);
            });
            if (beforeData.length > 0) {
              api.Feature.setColor(beforeData.map((it) => it.featureId).join("#"), "rgba(59, 255, 0,1)");
            }
            if (standData.length > 0) {
              api.Feature.setColor(standData.map((it) => it.featureId).join("#"), "rgba(255,255,255,1)");
            }
            if (processData.length > 0) {
              api.Feature.setColor(processData.map((it) => it.featureId).join("#"), "rgba(0,0, 255,1)");
            }
            if (afterData.length > 0) {
              api.Feature.setColor(afterData.map((it) => it.featureId).join("#"), "rgba(250, 0, 0,1)");
            }
          }
        });
      }
    },
    resetScene() {
      bimMgrApi.Camera.stopImmersiveRoam();
      bimMgrApi.Model.location(bimMgrApi.m_model.keys().toArray()[0]);
      bimMgrApi.Plugin.deleteMiniMap();
      if (this.viewPoint) {
        bimMgrApi.Camera.setViewPort(this.viewPoint);
      }
    },
    loadDeviceData() {
      if (this.loadDevDatatimeOut) {
        clearTimeout(this.loadDevDatatimeOut);
        this.loadDevDatatimeOut = null;
      }
      let prjId = this.selProject.id;
      if (this.devicTypes.includes(1)) {
        this.$api.bim.videoMonitorBimData({ projectId: prjId }).then((res) => {
          this.videoData = res.data || [];
        });
      }
      if (this.devicTypes.includes(3)) {
        this.$api.bim.devTowerBimData({ projectId: prjId }).then((res) => {
          this.towerData = res.data || [];
          console.log("towerData", this.towerData);
          this.towerData.forEach((item) => {
            let id = item.cfgId + "-3";
            let html = this.getTowerHtml(item);
            bimMgrApi.Label.updateBalloon({
              ID: id,
              Html: html,
            });
          });
        });
      }
      if (this.devicTypes.includes(4)) {
        this.$api.bim.devIotBimData({ projectId: prjId }).then((res) => {
          this.iotData = res.data || [];
          this.iotData.forEach((item) => {
            let id = item.cfgId + "-4";
            let html = this.getIotHtml(item);
            bimMgrApi.Label.updateBalloon({
              ID: id,
              Html: html,
            });
          });
        });
      }
      this.loadDevDatatimeOut = setTimeout(this.loadDeviceData, 60 * 1000);
    },
    getTowerHtml(item) {
      let txtHtml = "";
      if (item.elId) {
        txtHtml = ``;
      } else {
        let warning = item.warnings;
        if (warning) {
          let tmps = this.towerWarning.filter((d) => d.value == item.warnings);
          warning = tmps.length > 0 ? tmps[0].label : "";
        }
        let warningHtml = warning ? `<div class='data-item red'><span class='data-label'>警报：</span><span class='data-value'>${warning}</span></div>` : "";

        txtHtml = `${warningHtml}
            <div class='data-item'><span class='data-label'>高度：</span><span class='data-value'>${item.height}</span></div>
            <div class='data-item'><span class='data-label'>吊重：</span><span class='data-value'>${item.load}</span></div>
            <div class='data-item'><span class='data-label'>回转：</span><span class='data-value'>${item.rotation}</span></div>
            <div class='data-item'><span class='data-label'>幅度：</span><span class='data-value'>${item.range}</span></div>
            <div class='data-item'><span class='data-label'>风速：</span><span class='data-value'>${item.windSpeed}</span></div>
            <div class='data-item'><span class='data-label'>水平倾角：</span><span class='data-value'>${item.leanAngleX}</span></div>
            <div class='data-item'><span class='data-label'>垂直倾角：</span><span class='data-value'>${item.leanAngleY}</span></div>
         `;
      }
      return (
        css +
        `
        <div class='tag-box box-type-3'>
          <div class='tag-txt'>
          ${txtHtml}
             </div>
          <img src='bimImages/4.png' alt='' class="tag-bg-img">
            <img src='bimImages/towerMonitor.png' class="tag-img">
        </div>`
      );
    },
    fmtData(item) {
      if (item) {
        return (item * 1).toFixed(2);
      }
      return "";
    },
    getIotHtml(item) {
      let txtHtml = "";
      if (item.elId) {
        txtHtml = ``;
      } else {
        txtHtml = `
           <table class="tb-power">
           <tr>
            <td></td>
            <td width="60">电压</td>
            <td width="60">电流</td>
            <td width="60">功率</td>
           </tr>
            <tr>
              <td>A向</td>
              <td>${this.fmtData(item?.voltageA)}</td>
              <td>${this.fmtData(item?.currentA)}</td>
              <td>${this.fmtData(item?.powerA)}</td>
            </tr>
            <tr>
              <td>B向</td>
            <td>${this.fmtData(item?.voltageB)}</td>
              <td>${this.fmtData(item?.currentB)}</td>
              <td>${this.fmtData(item?.powerB)}</td>
            </tr>
            <tr>
              <td>C向</td>
            <td>${this.fmtData(item?.voltageC)}</td>
              <td>${this.fmtData(item?.currentC)}</td>
              <td>${this.fmtData(item?.powerC)}</td>
            </tr>
           </table> 
         `;
      }
      return (
        css +
        `
        <div class='tag-box box-type-4'>
          <div class='tag-txt'>
          ${txtHtml}
             </div>
          <img src='/cdn/bim/sapi/images/4.png' alt='' class="tag-bg-img">
            <img src='/cdn/bim/sapi/images/power.png' class="tag-img">
        </div>`
      );
    },
    getVideoHtml(item) {
      return (
        css +
        `
        <div class='tag-box box-type-1'>
          <img src='/cdn/bim/sapi/images/3.png' alt='' class="tag-bg-img-1">
          <img src='/cdn/bim/sapi/images/videoMonitor.png' class="tag-img-1">
        </div>`
      );
    },
    getPitHtml(item) {
      let bg = "4.png";
      let img = "pitMonitor";

      return (
        css +
        `
        <div class='tag-box box-type-2'>
          <img src='bimImages/${bg}' alt='' class="tag-bg-img">
          <img src='bimImages/${img}.png' class="tag-img">
          <span class='tag-txt' style='color:#ffffff;font-size:14px'>
            
          </span>
        </div>`
      );
    },
  },
};
</script>

<style lang="less">
.bim-manage {
  height: 100%;
  position: relative;

  #bimManage {
    height: 100%;

    #bimManageContainer {
      height: 100%;
    }
  }

  .div-left {
    top: 10vh;
    left: 5%;
    position: absolute;
    height: 70vh;
    width: 20%;

    &.isHide {
      left: 0%;
      wdith: 0%;

      #arrowLeft {
        left: 0px !important;
      }
    }

    #arrowLeft {
      top: calc(50% - 50px);
      right: -21px;
      left: unset !important;
    }
  }

  .div-right {
    top: 10vh;
    right: 5%;
    position: absolute;
    height: 70vh;
    width: 20%;

    &.isHide {
      right: 0%;
      width: 0%;
    }

    #arrowRight {
      top: calc(50% - 50px);
      left: -21px;
    }
  }

  .data-content {
    height: 100%;

    .div-row {
      height: 33%;
      border: solid 1px #75fbfdaa;
      background-color: #06445b81;

      .row-title {
        background: linear-gradient(0deg, #105696, #c0dafb00, #1765ae);
        padding-left: 10px;
        height: 36px;
        line-height: 36px;

        .svg-icon {
          fill: #75fbfd;
        }
      }
    }
  }

  .div-mode {
    position: absolute;
    top: calc(80vh - 110px);
    left: 50%;
    display: flex;
    padding: 10px 0px;
    background: #00000080;
    border-radius: 10px;
    margin-left: -125px;

    .mode-item {
      display: flex;
      align-items: center;
      font-size: 14px;
      line-height: 30px;
      margin: 0px 10px;
      background: #05798754;
      padding: 0px 10px;
      border-radius: 13px;
      cursor: pointer;

      &.is-active {
        background: #097fca94;
        color: #75fbfd;
        border: solid 1px #75fbfd;

        .svg-icon {
          fill: #75fbfd;
        }
      }

      .svg-icon {
        width: 24px;
        height: 24px;
        margin-right: 4px;
      }
    }
  }

  .plan-legend {
    position: absolute;
    top: calc(80vh - 110px);
    right: 40px;
    padding: 10px 10px 0px;
    background: #00000080;
    border-radius: 10px;

    &.isShow {
      right: calc(20% + 140px);
    }

    .plan-item {
      display: flex;
      font-size: 12px;
      margin-bottom: 10px;
      align-items: center;

      span {
        display: block;

        &:first-child {
          width: 15px;
          height: 15px;
          margin-right: 4px;
        }
      }
    }
  }

  .div-tools {
    position: absolute;
    top: calc(80vh - 50px);
    left: 50%;

    display: flex;
    background: #00000080;
    border-radius: 10px;

    &.menu-0 {
      margin-left: -34px;
    }

    &.menu-1 {
      margin-left: -68px;
    }

    &.menu-2 {
      margin-left: -102px;
    }

    &.menu-3 {
      margin-left: -136px;
    }

    &.menu-4 {
      margin-left: -170px;
    }

    .tool-item {
      display: flex;
      flex-flow: column;
      padding: 10px;
      align-items: center;
      cursor: pointer;

      &.is-active {
        .icon {
          background: #097fca94;

          .svg-icon {
            fill: #75fbfd;
          }
        }

        .sp-text {
          color: #75fbfd;
        }
      }

      .icon {
        width: 30px;
        height: 30px;
        background: #c0c4cca1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 15px;

        .svg-icon {
          width: 20px;
          height: 20px;
        }
      }

      .sp-text {
        margin-top: 4px;
        font-size: 12px;
      }
    }
  }

  .prj-info {
    padding: 20px;

    .base-info {
      .floor-area {
        color: #b0cfff;
        font-weight: 700;
        font-size: 40px;
      }

      .floor-area-text {
        line-height: 40px;
      }
    }

    .tb-prj {
      border-collapse: collapse;
      width: 100%;

      td,
      th {
        border: solid 1px #6ea9ab68;
        padding: 7px 4px;
        font-size: 12px;
      }

      th {
        color: #b0cfff;
      }
    }
  }

  .prj-worker {
    height: calc(100% - 30px);

    .worker-chart {
      display: flex;
      height: 50%;

      .chart-item {
        position: relative;
        width: 33.33%;
        height: 100%;

        .chart-gif,
        .chart-text {
          left: 20px;
          top: 20px;
          width: 120px;
          height: 120px;
        }

        .chart-text {
          color: #3ffcff;
          font-weight: 700;
          font-size: 40px;
        }
      }
    }

    .worker-title {
      display: flex;
      height: 50%;

      .title-item {
        flex: 1;
        display: flex;
        flex-flow: column;
        align-items: center;
        padding: 10px 0px 10px 0px;

        .svg-icon {
          fill: #3ffcff;
          width: 80px;
          height: 80px;
        }

        color: #3ffcff;
      }
    }
  }

  .investment-stats-cost {
    margin: 0 auto;
    padding: 30px 20px;
    top: -18px;
    position: relative;

    .stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 24px;
      position: relative;
    }

    .stat-card {
      background: linear-gradient(45deg, #122463, #0e79c969);
      padding: 16px 0;
      text-align: center;
      color: #fff;
      position: relative;
      z-index: 1;
      box-shadow: 0 2px 8px #0004;
      border: solid 1px #22d0d2;
      border-radius: 10px;
    }

    .stat-title {
      font-size: 16px;
      color: #b0cfff;
      margin-bottom: 8px;
    }

    .stat-value {
      font-size: 40px;
      font-weight: bold;
      color: #3ffcff;
    }

    .center-icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: #112244;
      border: 2px dashed #3ffcff;
      border-radius: 50%;
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      font-size: 32px;
      color: #3ffcff;
      box-shadow: 0 0 12px #3ffcff55;
      pointer-events: none;

      .chart-gif {
        width: 70px;
        height: 70px;
        top: 5px;
        left: 5px;
      }
    }
  }

  .plan-chart {
    height: calc(100% - 30px);

    .chart-item {
      position: relative;
      flex-grow: 1;
      display: inline-block;
      width: 49%;
      height: 100%;

      .chart-data {
        top: -10px;
      }

      .chart-title {
        position: relative;
        top: -40px;
        text-align: center;
      }
    }
  }

  .photography-list {
    height: calc(100% - 30px);
    padding: 10px 0px;

    .el-carousel {
      height: calc(100% - 10px);
    }

    .photography-video {
      width: 100%;
      height: calc(100% - 30px);
    }

    .photography-list-title {
      line-height: 20px;
      text-align: center;
    }

    .photography-list-nodata {
      background: rgba(255, 255, 255, 0.2);
      width: 80%;
      height: 80%;
      margin-left: 10%;
      margin-top: 3%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-flow: column;

      .video-play {
        width: 80px;
        height: 80px;
        display: inline-block;
        background: rgba(0, 0, 0, 0.4);
        line-height: 80px;
        text-align: center;
        border-radius: 40px;
        margin-bottom: 12px;
      }

      .photography-list-no-title {
        color: rgba(255, 255, 255, 0.2);
      }
    }
  }

  .warn-info {
    height: calc(100% - 30px);

    .warn-item {
      display: inline-flex;
      width: calc(50% - 30px);
      height: 50%;
      align-items: center;
      padding-left: 30px;

      .czz-number-img {
        width: 80px;
        height: 80px;
        line-height: 80px;

        .svg-icon {
          width: 40px;
          height: 40px;
          fill: #5cc0eb;
          position: relative;
          top: 12px;

          &.red {
            fill: red;
          }

          &.green {
            fill: #00e900;
          }
        }
      }

      .warn-data {
        margin-left: 10px;

        .warn-data-val {
          font-size: 40px;
          font-weight: 700;
          color: #22d0d2;
        }

        .warn-data-text {
          margin-top: 10px;
          text-align: center;
        }
      }
    }
  }

  .test-box {
    position: absolute;
    top: 10px;
    left: 10px;
    display: none;

    .tag-box {
      position: relative;
      display: flex;
      flex-flow: column;
      align-items: center;
    }

    .tag-img {
      width: 20px;
      height: 20px;
      position: absolute;
      left: 50%;
      bottom: 18px;
      margin-left: -10px;
    }

    .tag-bg-img {
      width: 16px;
      height: 80px;
    }

    .tag-bg-img {
      width: 16px;
      height: 80px;
    }

    .tag-txt {
      box-shadow: #1a9047 0px 4px 16px, rgba(10, 31, 68, 0.06) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
      color: #75fbfd;
      font-size: 12px;
      padding: 10px;
      background: #097fca63;
      border: solid 1px #75fbfdaa;
    }

    .tb-power {
      border-collapse: collapse;
    }

    .tb-power td {
      border: solid 1px #75fbfd33;
      padding: 4px 8px;
    }
  }

  @media (max-width: 1920px) {
    .data-content {
      .div-row {
        min-height: 220px;

        .row-title {
          height: 30px;
          line-height: 30px;
          font-size: 14px;
        }
      }
    }

    .div-tools {
      border-radius: 10px;

      &.menu-0 {
        margin-left: -44px;
      }

      &.menu-1 {
        margin-left: -88px;
      }

      &.menu-2 {
        margin-left: -132px;
      }

      &.menu-3 {
        margin-left: -176px;
      }

      &.menu-4 {
        margin-left: -220px;
      }

      .tool-item {
        padding: 10px 20px;

        .icon {
          width: 30px;
          height: 30px;
          border-radius: 15px;

          .svg-icon {
            width: 20px;
            height: 20px;
          }
        }

        .sp-text {
          margin-top: 10px;
          font-size: 12px;
        }
      }
    }

    .prj-info {
      padding: 10px;

      .base-info {
        .floor-area {
          font-size: 24px;
        }

        .floor-area-text {
          line-height: 20px;
          font-size: 12px;
        }

        margin-bottom: 10px;
      }

      .tb-prj {

        td,
        th {
          border: solid 1px #6ea9ab68;
          padding: 4px;
          font-size: 10px;
        }
      }
    }

    .prj-worker {
      height: calc(100% - 50px);

      .worker-chart {
        .chart-item {

          .chart-gif,
          .chart-text {
            left: 24px;
            top: 20px;
            width: 80px;
            height: 80px;
          }

          .chart-text {
            font-size: 20px;
          }
        }
      }

      .worker-title {
        .title-item {
          padding: 20px 0px 10px 0px;

          .svg-icon {
            fill: #3ffcff;
            width: 60px;
            height: 60px;
          }

          font-size: 12px;
          color: #3ffcff;
        }
      }
    }

    .investment-stats-cost {
      padding: 20px 10px;
      top: -12px;

      .stat-card {
        padding: 16px 0;
        box-shadow: 0 2px 8px #0004;
        border-radius: 10px;
      }

      .stat-title {
        font-size: 12px;
        margin-bottom: 8px;
      }

      .stat-value {
        font-size: 20px;
      }

      .center-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;

        .chart-gif {
          width: 50px;
          height: 50px;
          top: 5px;
          left: 5px;
        }
      }
    }

    .plan-chart {
      height: calc(100% - 30px);

      .chart-item {
        .chart-title {
          font-size: 12px;
          top: -30px;
        }
      }
    }

    .photography-list {
      height: calc(100% - 30px);
      padding: 10px 0px;

      .el-carousel {
        height: calc(100% - 10px);
      }

      .photography-video {
        height: calc(100% - 30px);
      }

      .photography-list-title {
        line-height: 24px;
        font-size: 12px;
      }

      .photography-list-nodata {
        .video-play {
          width: 60px;
          height: 60px;
          line-height: 60px;
          border-radius: 30px;
          margin-bottom: 12px;
        }

        .photography-list-no-title {
          font-size: 12px;
        }
      }
    }

    .warn-info {
      height: calc(100% - 30px);

      .warn-item {
        width: calc(50% - 30px);
        height: 50%;
        padding-left: 30px;

        .czz-number-img {
          width: 70px;
          height: 70px;
          line-height: 70px;

          .svg-icon {
            width: 30px;
            height: 30px;
            top: 6px;
          }
        }

        .warn-data {
          margin-left: 10px;

          .warn-data-val {
            font-size: 30px;
          }

          .warn-data-text {
            font-size: 12px;
          }
        }
      }
    }
  }

  @media (min-width: 2561px) {
    .data-content {
      .div-row {
        min-height: 420px;

        .row-title {
          height: 48px;
          line-height: 48px;
          font-size: 28px;
        }
      }
    }

    .div-mode {
      top: calc(80vh - 170px);
      border-radius: 20px;
      padding: 20px 0px;
      margin-left: -221px;

      .mode-item {
        font-size: 24px;
        line-height: 60px;
        margin: 0px 20px;
        padding: 0px 20px;
        border-radius: 13px;

        .svg-icon {
          width: 40px;
          height: 40px;
          margin-right: 4px;
        }
      }
    }

    .plan-legend {
      top: calc(80vh - 110px);
      right: 40px;
      padding: 20px 20px 0px;

      &.isShow {
        right: calc(20% + 220px);
      }

      .plan-item {
        font-size: 24px;
        margin-bottom: 10px;

        span {
          display: block;

          &:first-child {
            width: 20px;
            height: 20px;
            margin-right: 8px;
          }
        }
      }
    }

    .div-tools {
      border-radius: 10px;

      &.menu-0 {
        margin-left: -68px;
      }

      &.menu-1 {
        margin-left: -136px;
      }

      &.menu-2 {
        margin-left: -204px;
      }

      &.menu-3 {
        margin-left: -272px;
      }

      &.menu-4 {
        margin-left: -340px;
      }

      .tool-item {
        padding: 10px 20px;

        .icon {
          width: 60px;
          height: 60px;
          border-radius: 30px;

          .svg-icon {
            width: 40px;
            height: 40px;
          }
        }

        .sp-text {
          margin-top: 10px;
          font-size: 24px;
        }
      }
    }

    .prj-info {
      padding: 20px;

      .base-info {
        .floor-area {
          font-size: 60px;
        }

        .floor-area-text {
          line-height: 40px;
          font-size: 24px;
        }

        margin-bottom: 10px;
      }

      .tb-prj {

        td,
        th {
          border: solid 1px #6ea9ab68;
          padding: 10px;
          font-size: 20px;
        }
      }
    }

    .prj-worker {
      height: calc(100% - 60px);

      .worker-chart {
        .chart-item {

          .chart-gif,
          .chart-text {
            left: 40px;
            top: 20px;
            width: 180px;
            height: 180px;
          }

          .chart-text {
            font-size: 60px;
          }
        }
      }

      .worker-title {
        .title-item {
          padding: 20px 0px 10px 0px;

          .svg-icon {
            fill: #3ffcff;
            width: 120px;
            height: 120px;
          }

          font-size: 24px;
          color: #3ffcff;
        }
      }
    }

    .investment-stats-cost {
      padding: 30px 20px;
      top: -18px;

      .stat-card {
        height: 130px;
        padding: 16px 0;
        box-shadow: 0 2px 8px #0004;
        border-radius: 10px;
      }

      .stat-title {
        font-size: 24px;
        margin-bottom: 8px;
      }

      .stat-value {
        font-size: 60px;
      }

      .center-icon {
        width: 120px;
        height: 120px;
        font-size: 48px;

        .chart-gif {
          width: 110px;
          height: 110px;
          top: 5px;
          left: 5px;
        }
      }
    }

    .plan-chart {
      height: calc(100% - 60px);

      .chart-item {
        .chart-title {
          font-size: 24px;
          top: -40px;
        }
      }
    }

    .photography-list {
      height: calc(100% - 60px);
      padding: 10px 0px;

      .el-carousel {
        height: calc(100% - 10px);
      }

      .photography-video {
        height: calc(100% - 30px);
      }

      .photography-list-title {
        line-height: 36px;
        font-size: 24px;
      }

      .photography-list-nodata {
        .video-play {
          width: 120px;
          height: 120px;
          line-height: 120px;
          border-radius: 60px;
          margin-bottom: 12px;
        }

        .photography-list-no-title {
          font-size: 24px;
        }
      }
    }

    .warn-info {
      height: calc(100% - 60px);

      .warn-item {
        width: calc(50% - 30px);
        height: 50%;
        padding-left: 30px;

        .czz-number-img {
          width: 140px;
          height: 140px;
          line-height: 140px;

          .svg-icon {
            width: 60px;
            height: 60px;
            top: 24px;
          }
        }

        .warn-data {
          margin-left: 10px;

          .warn-data-val {
            font-size: 60px;
          }

          .warn-data-text {
            font-size: 24px;
          }
        }
      }
    }
  }
}
</style>
