样式调整

gjj

2025-02-26 70bebe9dae89ebddd7e77543aac618e78d730fc9

样式调整

 src/components/Header.vue

@@ -2,7 +2,7 @@
 * @Author: gjj Ganjj@probim.com.cn
 * @Date: 2025-02-14 14:32:18
 * @LastEditors: gjj Ganjj@probim.com.cn
 * @LastEditTime: 2025-02-25 11:47:12
 * @LastEditTime: 2025-02-26 15:50:22
 * @FilePath: \北京交通大学\src\components\Header.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@@ -72,9 +72,6 @@
      },
      onHomeClick(tab) {
        this.activeTab = tab;
      },
      onProjectChange(data) {
        this.$store.commit("common/setCurrentProject", data);
      },
      updateTime() {
        const now = new Date();

 src/components/MenuList.vue

File was deleted

 src/store/modules/common.js

@@ -2,7 +2,7 @@
 * @Author: gjj Ganjj@probim.com.cn
 * @Date: 2025-02-14 14:32:19
 * @LastEditors: gjj Ganjj@probim.com.cn
 * @LastEditTime: 2025-02-24 17:33:32
 * @LastEditTime: 2025-02-26 15:44:09
 * @FilePath: \北京交通大学\src\store\modules\common.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
@@ -11,6 +11,7 @@
    state: () => ({
        code: null, //用户信息
        token: null, //token
        projectEndDate: null, //项目结束日期
    }),

    mutations: {
@@ -20,6 +21,9 @@
        setToken(state, data) {
            state.token = data;
        },
        setProjectEndDate(state, data) {
            state.projectEndDate = data;
        },
    },
    actions: {
        setCode(context, data) {
@@ -28,9 +32,13 @@
        setToken(context, data) {
            context.commit("setToken", data);
        },
        setProjectEndDate(context, data) {
            context.commit("setProjectEndDate", data);
        },
    },
    getters: {
        code: (state) => state.code,
        token: (state) => state.token,
        projectEndDate: (state) => state.projectEndDate,
    },
};

 src/utils/getToken.js

@@ -10,4 +10,8 @@
export const getProjectId = () => {
    let id = window.ProjectConfig.projectId;
    return id;
}
export const getProjectEndDate = () => {
    let endDate = store.getters["common/projectEndDate"];
    return endDate;
}

 src/views/EquipmentView.vue

@@ -44,7 +44,7 @@
        }">
   </div>
   <div class="equipment-status" :style="sectionStyle">
    <div class="w-full h-[30px] mb-[10px]" :style="{
    <div class="w-full h-[30px]" :style="{
            backgroundImage: `url(${bgImage})`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center center',
@@ -71,10 +71,10 @@
     <button class="control-btn" :class="{ 'active': currentTab === '升降机监控' }" @click="handleControlBtnClick('升降机监控')">升降机监控</button>
    </div>
    <div class="divider"></div>
    <div class="progress-bar">
    <div class="progress-bar px-[10px]">
     <div class="label">运行设备总数</div>
     <div class="bar flex items-center">
      <div class="progress relative w-[80%] h-[24px]">
      <div class="progress relative w-[90%] h-[24px]">
       <div class="progress-inner" :style="{ width: `${deviceOnline / deviceTotal * 100}%` }"></div>
       <div class="progress-blocks">
        <div v-for="n in 28" :key="n" class="block" :class="{ 'active': (n-1)/28 * 100 <= (deviceOnline / deviceTotal * 100) }"></div>
@@ -560,7 +560,7 @@
}

.equipment-status {
 padding: 20px 10px;
 padding: 10px 10px;
 height: calc(100% - 5vh);
}

@@ -572,7 +572,7 @@
.status-circles {
 display: flex;
 justify-content: space-around;
 margin: 20px 0;
 margin: 15px 0;
}

.progress-circle {
@@ -628,7 +628,7 @@
 width: 100%;
 height: 1px;
 background: linear-gradient(270deg, rgba(94, 161, 209, 0.1) 0%, #4886BC 49%, rgba(48, 104, 165, 0.1) 100%);
 margin: 20px 0;
 margin: 15px 0;
}



 src/views/Home.vue

@@ -11,7 +11,7 @@
   <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]">175</div>
    <div class="text-[#FFBF00] text-[24px] font-bold ml-[28px]">{{endDate}}</div>
   </div>
   <div class="time-line">
   </div>
@@ -20,7 +20,7 @@
 <div class="bottom-nav">
  <div class="content-wrapper mb-[20px]">
   <!-- 720菜单 -->
   <div class="side-menu" v-if="currentView === '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>
@@ -83,7 +83,8 @@
} from "../api/home";
import {
 getProjectId,
 getToken
 getToken,
 getProjectEndDate
} from "../utils/getToken.js";
export default {
 name: 'Home',
@@ -142,8 +143,25 @@
   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 {
@@ -152,10 +170,19 @@
    backgroundPosition: 'center center',
    backgroundSize: '100% 100%'
   }
  },
  }, 
  projectId() {
   return getProjectId()
  },
  projectEndDate() {
    return getProjectEndDate()
  }
 },
 mounted() {
  setTimeout(() => {
    console.log('projectEndDate', getProjectEndDate())
    this.modelShow()
  }, 1000)
 },

 methods: {
@@ -186,6 +213,7 @@
    })
   } else if (view === 'project') {
    nextTick(() => {
      removepano('krpanoSWFObject')
     this.sceneShow()
    })
   }
@@ -256,6 +284,7 @@
   })
  },
  panoPreview(item, scene) {
    removepano('krpanoSWFObject')
   const basepath = `${window.ProjectConfig.panoUrl}/Panorama${item.PbUrl}/vtour/`
   const xmlurl = `${basepath}tour.xml?r=${(Math.random() * 100000 + 1)}`
   let setting = {}

 src/views/ProjectView.vue

@@ -14,7 +14,7 @@
    
    <!-- 下部分 - 内容区域 -->
    <div 
      class="content flex-1 px-[16px] py-[14px] overflow-y-auto" 
      class="content flex-1 px-[16px] py-[14px] overflow-y-hidden" 
      :style="{
        backgroundImage: `url(${backgroundImage})`,
        backgroundRepeat: 'no-repeat',
@@ -77,7 +77,7 @@
            backgroundSize: '100% 100%'
          }"
        >
          <div class="text-white text-[14px] ml-[40px] leading-[35px]">项目名称：{{projectInfo.OrganizeName}}</div>
          <div class="text-white text-[14px] ml-[40px] leading-[35px]">项目名称：{{projectInfo.ProjectName}}</div>
        </div>

        <div class="text-white text-[14px] tracking-[1px] leading-[24px]">
@@ -88,10 +88,10 @@
          :src="projectInfo.Thumbnail? projectInfo.Thumbnail : '../assets/images/backgrounds/cover_bg.png'" 
          alt="" 
          class="w-full mt-[20px]"
          style="height: calc(100% - 120px);"
          style="height: calc(100% - 150px);"
        >
      </div>
      <div class="w-[100%] h-[15%]">
      <div class="w-[100%] h-[18%]">
        <!-- 参建单位 -->
        <div 
          class="w-full h-[30px] mt-[20px] mb-[10px]" 
@@ -172,7 +172,7 @@

        <!-- 表格 -->
        <div 
          class="w-full min-h-[20vh] px-[8px] py-[10px]" 
          class="chartTable w-full h-[300px] px-[8px] py-[10px] overflow-y-auto" 
          :style="{
            backgroundImage: `url(${tableImage})`,
            backgroundRepeat: 'no-repeat',
@@ -221,7 +221,7 @@
      bgImage: new URL('@/assets/images/titles/title_second.png', import.meta.url).href,
      tableImage: new URL('@/assets/images/backgrounds/table_bg.png', import.meta.url).href,
      projectInfo: {
        OrganizeName: '',
        ProjectName: '',
        Description: '',
        Thumbnail: '',
        endDate: ''
@@ -253,7 +253,8 @@
          console.log(result);
          if(result.SafeProductionEndDate && result.SafeProductionEndDate !== 'null') {
            this.projectInfo.endDate = result.SafeProductionEndDate.substring(0, 10)
            this.projectInfo.OrganizeName = result.OrganizeName
            this.$store.commit('common/setProjectEndDate', this.projectInfo.endDate)
            this.projectInfo.ProjectName = result.ProjectName
            this.projectInfo.Description = result.Description
            this.projectInfo.Thumbnail = result.Thumbnail
          } 
@@ -380,6 +381,9 @@
}
.chart-container{
  width: 100%;
  height: calc(40% - 180px);
  height: calc(40% - 170px);
  .chartTable{
    height: calc(100% - 10px);
  }
}
</style>