Proj_SafePlat_Vue_Sgh5/src/view/Home2.vue

<!-- 首页 -->
<template>
  <!-- 主要内容区域 -->
  <div class="body-bg">
    <div class="card">
      <div class="title">常用应用</div>
      <van-grid :border="false" :column-num="4">
        <van-grid-item v-for="(item,idx) in functionList" :key="idx" :to="item.jumpPath">
          <img :src="item.img" width="45rpx" />
          <span class="vanicon_text">{{ item.title }}</span>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="card">
      <div class="title">通知公告</div>
      <van-grid :border="false" :column-num="4">
        <van-grid-item to="/annex">
          <img src="../../public/images/zyqk.png" width="45rpx" />
          <span class="vanicon_text">文件发布</span>
        </van-grid-item>
        <van-grid-item to="/notice" v-if="showCheckTakeN">
          <img src="../../public/images/yj.png" width="45rpx" />
          <span class="vanicon_text">通知公告</span>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="card">
      <div class="title">制度管理</div>
      <van-grid :border="false" :column-num="4">
        <van-grid-item to="/institution/law">
          <img src="../../public/images/fl.png" width="45rpx" />
          <span class="vanicon_text">法律法规</span>
        </van-grid-item>
        <van-grid-item to="/institution/institutionRegime">
          <img src="../../public/images/aqzd.png" width="45rpx" />
          <span class="vanicon_text">安全制度管理</span>
        </van-grid-item>
        <van-grid-item to="/institution/institutionRule">
          <img src="../../public/images/zd.png" width="45rpx" />
          <span class="vanicon_text">安全操作规程</span>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="card">
      <div class="title">计划管理</div>
      <van-grid :border="false" :column-num="4">
        <van-grid-item to="/keyMatters">
          <img src="../../public/images/keyMatters.png" width="45rpx" />
          <span class="vanicon_text">重点事项</span>
        </van-grid-item>
        <van-grid-item to="/planManagement">
          <img src="../../public/images/planManagement.png" width="45rpx" />
          <span class="vanicon_text">计划任务</span>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="card">
      <div class="title">考核评价</div>
      <van-grid :border="false" :column-num="4">
        <van-grid-item to="/performanceReview/units">
          <img src="../../public/images/unitsPerformance.png" width="45rpx" />
          <span class="vanicon_text">单位考核</span>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="card">
      <div class="title">知识共享</div>
      <van-grid :border="false" :column-num="4" v-if="showCheckTakeN">
        <van-grid-item to="/knowledge/accident">
          <img src="../../public/images/zd.png" width="45rpx" />
          <span class="vanicon_text">事故案例</span>
        </van-grid-item>
        <van-grid-item to="/knowledge/manager">
          <img src="../../public/images/zd.png" width="45rpx" />
          <span class="vanicon_text">管理案例</span>
        </van-grid-item>
        <van-grid-item to="/knowledge/Culture">
          <img src="../../public/images/zd.png" width="45rpx" />
          <span class="vanicon_text">安全环保文化</span>
        </van-grid-item>
        <van-grid-item to="/knowledge/project">
          <img src="../../public/images/zd.png" width="45rpx" />
          <span class="vanicon_text">项目案例库</span>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="card">
      <div class="title">安全检查</div>
      <van-grid :border="false" :column-num="4">
        <van-grid-item to="/safeCheck/task">
          <img src="../../public/images/aq.png" width="45rpx" />
          <span class="vanicon_text">检查任务</span>
        </van-grid-item>
        <van-grid-item to="/examtask" v-if="showCheckTake">
          <img src="../../public/images/zyqk.png" width="45rpx" />
          <span class="vanicon_text">逢查必考</span>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="card">
      <div class="title">安全监督</div>
      <van-grid :border="false" :column-num="4">
        <van-grid-item to="/institution/riskList">
          <img src="../../public/images/fx.png" width="45rpx" />
          <span class="vanicon_text">风险分级管控记录</span>
        </van-grid-item>
        <van-grid-item to="/lvzhicx">
          <img src="../../public/images/lzcx.png" width="45rpx" />
          <span class="vanicon_text">履职查询</span>
        </van-grid-item>
        <van-grid-item to="/yinhuan/hdLedger">
          <img src="../../public/images/yh.png" width="45rpx" />
          <span class="vanicon_text">隐患台账</span>
        </van-grid-item>
        <van-grid-item to="/projectManage/projectWorkLedger">
          <img src="../../public/images/xm.png" width="45rpx" />
          <span class="vanicon_text">项目作业台账</span>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="card">
      <div class="title">教育培训</div>
      <van-grid :border="false" :column-num="4">
        <van-grid-item to="/courseManagement" v-if="showCheckTake">
          <img src="../../public/images/zyqk.png" width="45rpx" />
          <span class="vanicon_text">课程管理</span>
        </van-grid-item>
        <van-grid-item to="/class2" v-if="showCheckTake">
          <img src="../../public/images/zyqk.png" width="45rpx" />
          <span class="vanicon_text">在线学习考试</span>
        </van-grid-item>
        <van-grid-item to="/cardManager">
          <img src="../../public/images/zj.png" width="45rpx" />
          <span class="vanicon_text">证件管理</span>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="card">
      <div class="title">事故管理</div>
      <van-grid :border="false" :column-num="4">
        <van-grid-item to="/accidentManager/accidentBaoGaoLedger/index">
          <img src="../../public/images/sgbgtz.png" width="45rpx" />
          <span class="vanicon_text">事故报告台账</span>
        </van-grid-item>
        <van-grid-item to="/accidentManager/accidentJuBao/index">
          <img src="../../public/images/sgjb.png" width="45rpx" />
          <span class="vanicon_text">事故举报</span>
        </van-grid-item>
        <van-grid-item v-if="true" to="/accidentManager/accidentJuBaoLedger/index">
          <img src="../../public/images/sgjbtz.png" width="45rpx" />
          <span class="vanicon_text">事故举报台账</span>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="card">
      <div class="title">安环费用管理</div>
      <van-grid :border="false" :column-num="4" v-if="showCheckTakeN">
        <van-grid-item to="/moneySafe/safeMoneyManagement">
          <img src="../../public/images/aq.png" width="45rpx" />
          <span class="vanicon_text">安环费用管理</span>
        </van-grid-item>
        <van-grid-item to="/moneySafe/safeMoneyBudget">
          <img src="../../public/images/aq.png" width="45rpx" />
          <span class="vanicon_text">安全费用预算</span>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="card">
      <div class="title">隐患有奖举报</div>
      <van-grid :border="false" :column-num="4">
        <van-grid-item to="/yinhuan/hdRwardReporting">
          <img src="../../public/images/yhdb.png" width="45rpx" />
          <span class="vanicon_text">隐患有奖举报</span>
        </van-grid-item>
        <van-grid-item to="/yinhuan/hdLedgerJuBao">
          <img src="../../public/images/yh.png" width="45rpx" />
          <span class="vanicon_text">隐患有奖举报台账</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>

</template>


<script setup>

import { ref, getCurrentInstance, onMounted } from 'vue';
import { onBeforeRouteLeave } from 'vue-router';
import { showFailToast, showSuccessToast } from 'vant';

const {
  proxy
} = getCurrentInstance();

const showCheckTake = ref(false);
const showCheckTakeN = ref(false);
const userDesc = localStorage.getItem('userDesc');
const role = localStorage.getItem('role')[0].roleCode;

if (role == 'SX0201' || role == 'SX0201' || role == 'SX0302' || role == 'SX0303') {
 showCheckTake.value = true;
}
if (userDesc == '贾俊臣' || userDesc == '张瑞楠' || userDesc == '刘焯') {
  showCheckTake.value = true;
  showCheckTakeN.value=true
}

const userCode = localStorage.getItem('userCode');
const handleClick = () => {
  console.log('111');
  const url = '/sgsafe/RecordMaster/tuisong';
  const param = {
    userCode: userCode
  };
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == 0) {
      showSuccessToast('已推送');
    } else {
      showFailToast(response.data.msg);
    }
  }, 500);
};

/**
 * 修改最近使用的页面记录
 */
const getRecentlyUsed = (jumpPath) => {
  const url = '/sgsafe/MenuRecentlyUsed/updateMenuRecentlyUsedStatus'
  const param = {
    json: JSON.stringify({
      jumpPath,
      applicationId: 'c77da6a732d34400b24374e2cea811ee',
    })
  }
  proxy.$axios.post(url,param).then(res => {
    if (res.data.code !== 0) {
      console.log('执行失败！' + res.data.msg)
    }
  })
}

onBeforeRouteLeave((to, from) => {
  getRecentlyUsed(to.path)
});

/**
 * 获取最近使用页面记录
 */
const functionList = ref([]);
const coincideNotList = ref([]);
const queryMenuRecently = () => {
  const url = '/sgsafe/MenuRecentlyUsed/queryRecentlyUsed';
  const param = {
    applicationId: 'c77da6a732d34400b24374e2cea811ee'
  };
  proxy.$axios.get(url, param).then(res => {
    functionList.value = res.data.data.map(item => ({
      title: item.menuName,
      img: 'images/' + item.menuIcon,
      jumpPath: item.jumpPath
    }));

    if (functionList.value.length < 4) {
      coincideNotList.value = defaultPageList.value;
      for (let item of functionList.value) {
        coincideNotList.value = coincideNotList.value.filter(info => info.jumpPath !== item.jumpPath);
      }
      coincideNotList.value = coincideNotList.value.slice(0, 4 - functionList.value.length);
      functionList.value = [...functionList.value, ...coincideNotList.value];
    } else {
      functionList.value = functionList.value.slice(0, 4);
    }
  });
};

onMounted(() => {
  queryMenuRecently();

});

/**
 * 默认页面
 */
const defaultPageList = ref([
  { title: '隐患登记', img: 'images/yhdj.png', jumpPath: '/yinhuan/registration' },
  { title: '隐患台账', img: 'images/yh.png', jumpPath: '/yinhuan/hdLedger' },
  { title: '每日答题', img: 'images/dt.png', jumpPath: '/dailyproblem' },
  { title: '履职记录', img: 'images/lz.png', jumpPath: '/lvzhi' },
  { title: '安全制度管理', img: 'images/aqzd.png', jumpPath: '/institution/institutionRegime' },
  { title: '证件管理', img: 'images/zj.png', jumpPath: '/cardManager' },
  { title: '隐患待办', img: 'images/yhdb.png', jumpPath: '/yinhuan/todo' }
]);


/**
 * 测试消息
 */
const getAccessToken = () => {
  const url = '/sgsafe/MobileMessage/getAccessToken';
  const params = {};
  proxy.$axios.get(url, params).then(response => {
    if (response.data.code === 0) {
      console.log('accessToken操作成功', response.data.data);
    } else {
      console.log('accessToken操作失败操作失败', response.data.fullMsg);
    }
  });
};

const sendMobileMsg = () => {
  const url = '/sgsafe/MobileMessage/sendMsg';
  const params = {};
  proxy.$axios.get(url, params).then(response => {
    if (response.data.code === 0) {
      console.log('accessToken操作成功', response.data.data);
    } else {
      showFailToast('操作失败', response.data.msg);
      console.log('accessToken操作失败操作失败', response.data.fullMsg);
    }
  });
};

</script>

<style scoped>
/* 固定在顶部的标题栏样式 */
.header-title {
  background-color: #3875c6;
  height: 50px;
  padding: 15px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.title-text {
  margin-top: 12px;
  color: white;
  font-size: 18px;
  /* font-weight: 600; */
  text-align: center;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  letter-spacing: 1px;
}

.body-bg {
  background-color: #ffffff;
  padding-top: 10px;
}

:deep(.van-grid-item__text) {
  font-size: var(--van-font-size-lg0);
}

.dbTitle {
  margin-top: 10px;
}

.daiban_titile_img {
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.custom-title {
  font-size: var(--van-font-size-lg);
  font-weight: bold;
  color: var(--van-gray-9);
}

.vanicon_text {
  font-size: var(--van-font-size-lg0);
  color: var(--van-grid-item-text-color);
  margin-top: var(--van-padding-xs);
  line-height: 1.5;
  word-break: break-all;
  text-align: center;
  height: 40px;
}

.card {
  margin: 10px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.title {
  padding-left: 20px;
  padding-top: 20px;
  font-weight: bold;
  font-size: 20px;
}
</style>