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="/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="/lvzhi">
          <img src="../../public/images/lz.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 v-if='false'>
          <img src="../../public/images/zj.png" width="45rpx" @click="handleClick" />
          <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>
    </div>
    <div class="card">
      <div class="title">隐患排查治理</div>
      <van-grid :border="false" :column-num="4">
        <van-grid-item to="/yinhuan/registration">
          <img src="../../public/images/yhdj.png" width="45rpx" />
          <span class="vanicon_text">隐患登记</span>
        </van-grid-item>
        <van-grid-item to="/yinhuan/todo">
          <img src="../../public/images/yhdb.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="/yinhuan/riskChecklist">
          <img src="../../public/images/riskChecklist.png" width="45rpx" />
          <span class="vanicon_text">隐患排查清单</span>
        </van-grid-item>
        <van-grid-item to="/yinhuan/riskChecklistRecords">
          <img src="../../public/images/riskChecklistRecords.png" width="45rpx" />
          <span class="vanicon_text">隐患排查记录</span>
        </van-grid-item>
        <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 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>
    </div>
    <div class="card">
      <div class="title">教育培训</div>
      <van-grid :border="false" :column-num="4">
        <van-grid-item to="/dailyproblem">
          <img src="../../public/images/dt.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-item to="/checkTake">
          <img src="../../public/images/dt.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/emergencyPlan">
          <img src="../../public/images/yjya.png" width="45rpx" />
          <span class="vanicon_text">应急预案</span>
        </van-grid-item>
        <van-grid-item to="/emergencyResources">
          <img src="../../public/images/yj.png" width="45rpx" />
          <span class="vanicon_text">应急物资</span>
        </van-grid-item>
        <van-grid-item to="/emergencyDrillPlan">
          <img src="../../public/images/yjyl.png" width="45rpx" />
          <span class="vanicon_text">应急演练</span>
        </van-grid-item>
        <van-grid-item to="/drillProcess">
          <img src="../../public/images/drillProcess.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="/projectManage/taiZhang">
          <img src="../../public/images/xm.png" width="45rpx" />
          <span class="vanicon_text">项目台账</span>
        </van-grid-item>
        <van-grid-item to="/projectManage/projectConstructionOperation">
          <img src="../../public/images/xm.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-item to="/projectManage/todo">
          <img src="../../public/images/yhdb.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="/safeClient">
          <img src="../../public/images/zdgl.png" width="45rpx" />
          <span class="vanicon_text">终端管理</span>
        </van-grid-item>
        <van-grid-item to="/jobCondition">
          <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="/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" v-if="showCheckTakeN">
        <van-grid-item to="/assRec">
          <img src="../../public/images/zdgl.png" width="45rpx" />
          <span class="vanicon_text">考核登记</span>
        </van-grid-item>
        <van-grid-item to="/assRecN" v-if="showCheckTakeN">
          <img src="../../public/images/lzcx.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="/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>

</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 == '张瑞楠') {
  showCheckTake.value = true;
  showCheckTakeN.value=true
}

/**
 * 修改最近使用的页面记录
 */
const recentlyUsed = ref({
  userCode: localStorage.getItem('userCode'),
  menuIcon: '',
  menuName: '',
  jumpPath: ''
});
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 = () => {
  const url = '/sgsafe/MenuRecentlyUsedMobile/updateMenuRecentlyUsedStatus';
  const param = {
    json: JSON.stringify(recentlyUsed.value)
  };
  proxy.$axios.post(url, param).then(res => {
    if (res.data.code !== 0) {
      console.log('执行失败');
    }
  });
};

onBeforeRouteLeave((to, from) => {
  recentlyUsed.value.jumpPath = to.path;
  recentlyUsed.value.menuIcon = getPicPathByPath(to.path);
  recentlyUsed.value.menuName = getNameByPath(to.path);
  if (recentlyUsed.value.menuIcon) {
    getRecentlyUsed();
  }
});

/**
 * 获取最近使用页面记录
 */
const functionList = ref([]);
const coincideNotList = ref([]);
const queryMenuRecently = () => {
  const url = '/sgsafe/MenuRecentlyUsedMobile/queryRecentlyUsed';
  const param = {
    userCode: localStorage.getItem('userCode')
  };
  proxy.$axios.get(url, param).then(res => {
    functionList.value = res.data.data.map(item => ({
      title: item.menuName,
      img: 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 getNameByPath = (path) => {
  const recentlyUsedMapping = {
    '/institution/law': '法律法规',
    '/institution/institutionRegime': '安全制度管理',
    '/institution/institutionRule': '安全操作规程',
    '/lvzhi': '履职记录',
    '/lvzhicx': '履职查询',
    '/institution/riskList': '风险分级管控记录',
    '/yinhuan/registration': '隐患登记',
    '/yinhuan/todo': '隐患待办',
    '/yinhuan/hdLedger': '隐患台账',
    '/safeCheck/task': '安全检查任务',
    '/dailyproblem': '每日答题',
    '/cardManager': '证件管理',
    '/institution/emergencyPlan': '应急预案',
    '/emergencyResources': '应急物资',
    '/emergencyDrillPlan': '应急演练',
    '/projectManage/taiZhang': '项目台账',
    '/safeClient': '终端管理',
    '/jobCondition': '作业情况',
    '/yinhuan/riskChecklist': '隐患排查清单',
    '/yinhuan/riskChecklistRecords': '隐患排查记录',
    '/drillProcess': '掌上演练',
    '/checkTake': '逢查必考',
    '/projectManage/projectConstructionOperation': '项目施工作业管理',
    '/projectManage/projectWorkLedger': '项目作业台账',
    '/keyMatters': '重点事项',
    '/planManagement': '计划任务'

  };
  return recentlyUsedMapping[path];
};

/**
 * 根据路由获取图片路径
 */
const getPicPathByPath = (path) => {
  const recentlyUsedMapping = {
    '/institution/law': 'images/fl.png',
    '/institution/institutionRegime': 'images/aqzd.png',
    '/institution/institutionRule': 'images/zd.png',
    '/lvzhi': 'images/lz.png',
    '/lvzhicx': 'images/lzcx.png',
    '/institution/riskList': 'images/fx.png',
    '/yinhuan/registration': 'images/yhdj.png',
    '/yinhuan/todo': 'images/yhdb.png',
    '/yinhuan/hdLedger': 'images/yh.png',
    '/safeCheck/task': 'images/aq.png',
    '/dailyproblem': 'images/dt.png',
    '/cardManager': 'images/zj.png',
    '/institution/emergencyPlan': 'images/yjya.png',
    '/emergencyResources': 'images/yj.png',
    '/emergencyDrillPlan': 'images/yjyl.png',
    '/projectManage/taiZhang': 'images/xm.png',
    '/safeClient': 'images/zdgl.png',
    '/jobCondition': 'images/zyqk.png',
    '/yinhuan/riskChecklist': 'images/riskChecklist.png',
    '/yinhuan/riskChecklistRecords': 'images/riskChecklistRecords.png',
    '/drillProcess': 'images/drillProcess.png',
    '/checkTake': 'images/dt.png',
    '/projectManage/projectConstructionOperation': 'images/xm.png',
    '/projectManage/projectWorkLedger': 'images/xm.png',
    '/keyMatters': 'images/keyMatters.png',
    '/planManagement': 'images/planManagement.png'
  };
  return recentlyUsedMapping[path];
};

/**
 * 测试消息
 */
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>