pms-app/pages/home/index.vue

<template>
  <view class="page home">
    <view class="page-back"></view>
    <view class="uni-page-head navgator justify-center align-center">
      <uni-row style="width: 100%; display: flex">
        <uni-col :span="6" />
        <uni-col :span="12">
          <view class="nav-title" style="text-align: center">{{ $t('app.appName') }}</view>
        </uni-col>
        <uni-col :span="6" style="display: flex; justify-content: end; padding-right: 20px">
          <uni-badge absolute="rightTop" size="small" :text="messageCount">
            <image
              src="~@/static/home/message.png"
              style="width: 20px; height: 20px; background-color: transparent"
              @click="navigatorTo('/pages/message/index')" />
          </uni-badge>
        </uni-col>
      </uni-row>
    </view>
    <view class="page-content flex-col">
      <uni-row class="row-full">
        <uni-col class="daiban-tixing flex-row align-center justify-between">
          <!-- 				<view class="dt-title">
						<view class="todo font-BiaoTiHei">
							{{ $t('home.todo') }}
						</view>
						<view class="remind font-BiaoTiHei">
							{{ $t('home.remind') }}
						</view>
					</view> -->
          <swiper
            class="dt-swiper"
            circular="true"
            :indicator-dots="false"
            :autoplay="true"
            :vertical="true"
            :interval="2000"
            :duration="500">
            <swiper-item
              class="flex-col justify-between"
              v-for="{ item1, item2 } in overtimeTaskList"
              @click="navigatorTo('/pages/overtime/index')">
              <view class="daiban flex-row align-center justify-around" style="margin-top: 10px">
                <view class="dt-status green">
                  <!-- 超时未保养 -->
                  {{ item1.status }}
                </view>
                <view class="dt-content">
                  <!--  增压机十年使用到期保养  -->
                  {{ item1.type + '-' + item1.title }}
                </view>
                <!--								<view class="dt-time">-->
                <!--                  &lt;!&ndash;  1小时前  &ndash;&gt;-->
                <!--                  {{ item1.createTime }}-->
                <!--								</view>-->
              </view>
              <view v-if="item2" class="daiban flex-row align-center justify-around" style="margin-bottom: 10px">
                <view class="dt-status green">
                  <!--  超时未保养  -->
                  {{ item2?.status }}
                </view>
                <view class="dt-content">
                  <!--  增压机十年使用到期保养  -->
                  {{ item2?.type + '-' + item2?.title }}
                </view>
                <!--								<view class="dt-time">-->
                <!--                &lt;!&ndash; 1小时前  &ndash;&gt;-->
                <!--                  {{ item2?.createTime }}-->
                <!--								</view>-->
              </view>
            </swiper-item>
          </swiper>
        </uni-col>
      </uni-row>

      <uni-row class="row-half flex-row justify-between">
        <!-- 运行记录填报 -->
        <uni-col
          :span="12"
          class="yunxingjilu flex-col justify-between"
          @click="navigatorTo('/pages/recordFilling/list')">
          <view class="half-title">
            {{ $t('home.operationRecordFilling') }}
          </view>
          <view class="half-subtitle">
            {{ $t('home.fillDailyOperationRecord') }}
          </view>
        </uni-col>
        <!-- 保养工单 -->
        <uni-col :span="12" class="baoyang flex-col justify-between" @click="navigatorTo('/pages/maintenance/index')">
          <view class="half-title">
            {{ $t('home.maintenanceWorkOrder') }}
          </view>
          <view class="half-subtitle">
            {{ $t('home.receiveMaintenanceWorkOrderAndSubmit') }}
          </view>
        </uni-col>
      </uni-row>
      <uni-row class="row-half" :gutter="5">
        <!-- 设备维修 -->
        <uni-col :span="12" class="shebeiweixiu flex-col justify-between" @click="navigatorTo('/pages/repair/index')">
          <view class="half-title">
            {{ $t('home.equipmentMaintenance') }}
          </view>
          <view class="half-subtitle">
            {{ $t('home.fillMaintenanceWorkOrder') }}
          </view>
        </uni-col>
        <!-- 巡检工单 -->
        <uni-col :span="12" class="xunjian flex-col justify-between" @click="navigatorTo('/pages/inspection/index')">
          <view class="half-title">
            {{ $t('home.inspectionWorkOrder') }}
          </view>
          <view class="half-subtitle">
            {{ $t('home.receiveInspectionWorkOrderAndSubmit') }}
          </view>
        </uni-col>
      </uni-row>
      <uni-row class="row-full">
        <!-- 故障上报 -->
        <uni-col class="guzhang flex-row align-center" @click="navigatorTo('/pages/fault/index')">
          <view class="half-title" style="margin-right: 10px">
            {{ $t('home.faultReporting') }}
          </view>
          <view class="half-subtitle">
            {{ $t('home.fillAndReportFaultWorkOrder') }}
          </view>
        </uni-col>
      </uni-row>
      <view class="card">
        <!-- 瑞都日报 -->
        <view
          class="card-cell flex-row align-center justify-between"
          @click="navigatorTo('/pages/ruiDu/index')"
          v-if="isShowRuiduDaily">
          <image src="/static/home/ribao.svg" mode="aspectFill"></image>
          <view class="cell-con flex-row align-center justify-between">
            <view class="cell-text flex-row align-center justify-start">
              <view class="title">
                {{ $t('home.dailyReportRuiDu') }}
              </view>
              <view class="subtitle">
                {{ $t('home.dailyReportRuiDuTip') }}
              </view>
            </view>
            <uni-icons type="right" :color="'#CACCCF'" size="15" />
          </view>
        </view>
        <view
          class="card-cell flex-row align-center justify-between"
          @click="navigatorTo('/pages/ruihen/index?type=edit')"
          v-if="rhReportFlag">
          <image src="/static/home/ribao.svg" mode="aspectFill"></image>
          <view class="cell-con flex-row align-center justify-between">
            <view class="cell-text flex-row align-center justify-start">
              <view class="title">
                {{ $t('home.dailyReportRuiHen') }}
              </view>
              <view class="subtitle">
                {{ $t('home.dailyReportRuiHenTip') }}
              </view>
            </view>
            <uni-icons type="right" :color="'#CACCCF'" size="15" />
          </view>
        </view>
        <view
          class="card-cell flex-row align-center justify-between"
          @click="navigatorTo('/pages/ruihen/index?type=approval')"
          v-if="rhReportApprovalFlag">
          <image src="/static/home/ribao.svg" mode="aspectFill"></image>
          <view class="cell-con flex-row align-center justify-between">
            <view class="cell-text flex-row align-center justify-start">
              <view class="title">
                {{ $t('home.dailyReportRuiHen') }}
              </view>
              <view class="subtitle">
                {{ $t('home.dailyReportRuiHenApproval') }}
              </view>
            </view>
            <uni-icons type="right" :color="'#CACCCF'" size="15" />
          </view>
        </view>
        <view
          class="card-cell flex-row align-center justify-between"
          @click="navigatorTo('/pages/ruiying/index?type=edit')"
          v-if="ryReportFlag">
          <image src="/static/home/ribao.svg" mode="aspectFill"></image>
          <view class="cell-con flex-row align-center justify-between">
            <view class="cell-text flex-row align-center justify-start">
              <view class="title">
                {{ $t('home.dailyReportRuiYing') }}
              </view>
              <view class="subtitle">
                {{ $t('home.dailyReportRuiYingTip') }}
              </view>
            </view>
            <uni-icons type="right" :color="'#CACCCF'" size="15" />
          </view>
        </view>
        <view
          class="card-cell flex-row align-center justify-between"
          @click="navigatorTo('/pages/ruiying/index?type=approval')"
          v-if="ryReportApprovalFlag">
          <image src="/static/home/ribao.svg" mode="aspectFill"></image>
          <view class="cell-con flex-row align-center justify-between">
            <view class="cell-text flex-row align-center justify-start">
              <view class="title">
                {{ $t('home.dailyReportRuiYing') }}
              </view>
              <view class="subtitle">
                {{ $t('home.dailyReportRuiYingApproval') }}
              </view>
            </view>
            <uni-icons type="right" :color="'#CACCCF'" size="15" />
          </view>
        </view>
        <view
          class="card-cell flex-row align-center justify-between"
          @click="navigatorTo('/pages/ruiyingx/index?type=edit')"
          v-if="ryXjReportFlag">
          <image src="/static/home/ribao.svg" mode="aspectFill"></image>
          <view class="cell-con flex-row align-center justify-between">
            <view class="cell-text flex-row align-center justify-start">
              <view class="title">
                {{ $t('home.dailyReportRuiYingX') }}
              </view>
              <view class="subtitle">
                {{ $t('home.dailyReportRuiYingXTip') }}
              </view>
            </view>
            <uni-icons type="right" :color="'#CACCCF'" size="15" />
          </view>
        </view>
        <view
          class="card-cell flex-row align-center justify-between"
          @click="navigatorTo('/pages/ruiyingx/index?type=approval')"
          v-if="ryXjReportApprovalFlag">
          <image src="/static/home/ribao.svg" mode="aspectFill"></image>
          <view class="cell-con flex-row align-center justify-between">
            <view class="cell-text flex-row align-center justify-start">
              <view class="title">
                {{ $t('home.dailyReportRuiYingX') }}
              </view>
              <view class="subtitle">
                {{ $t('home.dailyReportRuiYingXApproval') }}
              </view>
            </view>
            <uni-icons type="right" :color="'#CACCCF'" size="15" />
          </view>
        </view>
        <!-- 库存查询 -->
        <view class="card-cell flex-row align-center justify-between" @click="navigatorTo('/pages/inventory/index')">
          <image src="/static/home/kucun.svg" mode="aspectFill"></image>
          <view class="cell-con flex-row align-center justify-between">
            <view class="cell-text flex-row align-center justify-start">
              <view class="title">
                {{ $t('home.inventoryQuery') }}
              </view>
              <view class="subtitle">
                {{ $t('home.clickToQueryInventoryData') }}
              </view>
            </view>
            <uni-icons type="right" :color="'#CACCCF'" size="15" />
          </view>
        </view>
        <!-- 设备台账 -->
        <view class="card-cell flex-row align-center justify-between" @click="navigatorTo('/pages/ledger/index')">
          <image src="/static/home/taizhang.svg" mode="aspectFill"></image>
          <view class="cell-con flex-row align-center justify-between">
            <view class="cell-text flex-row align-center justify-start">
              <view class="title">
                {{ $t('home.equipmentLedger') }}
              </view>
              <view class="subtitle">
                {{ $t('home.viewEquipmentLedger') }}
              </view>
            </view>
            <uni-icons type="right" :color="'#CACCCF'" size="15" />
          </view>
        </view>
        <!-- 设备状态变更 -->
        <view class="card-cell flex-row align-center justify-between" @click="navigatorTo('/pages/statusChange/index')">
          <image src="/static/home/zhuangtaibiangeng.svg" mode="aspectFill"></image>
          <view class="cell-con flex-row align-center justify-between">
            <view class="cell-text flex-row align-center justify-start">
              <view class="title">
                {{ $t('home.equipmentStatusChange') }}
              </view>
              <view class="subtitle">
                {{ $t('home.adjustEquipmentStatus') }}
              </view>
            </view>
            <uni-icons type="right" :color="'#CACCCF'" size="15" />
          </view>
        </view>
        <!-- 设备责任人 -->
        <view class="card-cell flex-row align-center justify-between" @click="navigatorTo('/pages/deviceUser/index')">
          <image src="/static/home/deviceUser.svg" mode="aspectFill"></image>
          <view class="cell-con flex-row align-center justify-between">
            <view class="cell-text flex-row align-center justify-start">
              <view class="title">
                {{ $t('home.deviceUser') }}
              </view>
              <view class="subtitle">
                {{ $t('home.deviceUserTip') }}
              </view>
            </view>
            <uni-icons type="right" :color="'#CACCCF'" size="15" />
          </view>
        </view>
        <!-- 设备实时数据监控 -->
        <view class="card-cell flex-row align-center justify-between" @click="navigatorTo('/pages/realTimeData/index')">
          <image src="/static/home/shujujiankong.svg" mode="aspectFill"></image>
          <view class="cell-con flex-row align-center justify-between">
            <view class="cell-text flex-row align-center justify-start">
              <view class="title">
                {{ $t('home.realTimeEquipmentDataMonitoring') }}
              </view>
              <view class="subtitle">
                {{ $t('home.viewRealTimeEquipmentData') }}
              </view>
            </view>
            <uni-icons type="right" :color="'#CACCCF'" size="15" />
          </view>
        </view>
        <!-- 统计分析 -->
        <view class="card-cell flex-row align-center justify-between" @click="navigatorTo('/pages/statistic/index')">
          <image src="/static/home/tongjifenxi.svg" mode="aspectFill"></image>
          <view class="cell-con flex-row align-center justify-between">
            <view class="cell-text flex-row align-center justify-start">
              <view class="title">
                {{ $t('home.statisticalAnalysis') }}
              </view>
              <view class="subtitle">
                {{ $t('home.equipmentDataStatisticalAnalysis') }}
              </view>
            </view>
            <uni-icons type="right" :color="'#CACCCF'" size="15" />
          </view>
        </view>
      </view>
    </view>
    <!-- 升级提示 -->
    <upgrade />
  </view>
</template>

<script setup>
  import { onShow } from '@dcloudio/uni-app';
  import { nextTick, onMounted, ref } from 'vue';
  import { getUnreadMessageCount } from '@/api/message';
  import { getOvertimeTaskList } from '@/api/task';
  import { getLoginUserInfo } from '@/api/login';
  import { useDataDictStore } from '@/store/modules/dataDict';
  import { useDeptStore } from '@/store/modules/dept';
  import { useDeviceStore } from '@/store/modules/device';
  import { messageNavigate } from '@/utils/navigate';
  import Upgrade from '@/components/upgrade.vue';

  const navigatorTo = url => {
    uni.navigateTo({
      url: url,
    });
  };

  const messageCount = ref(0);
  onMounted(async () => {
    await Promise.all([
      useDataDictStore().loadDataDictList(),
      useDeptStore().loadDeptList(),
      useDeviceStore().loadDeviceTypeList(),
    ]);
  });

  // 是否展示瑞都日报入口
  const isShowRuiduDaily = ref(false);
  const rhReportFlag = ref(false);
  const rhReportApprovalFlag = ref(false);
  const ryReportFlag = ref(false);
  const ryReportApprovalFlag = ref(false);
  const ryXjReportFlag = ref(false);
  const ryXjReportApprovalFlag = ref(false);
  const userInfo = ref({});
  const getLoginUser = async () => {
    const response = await getLoginUserInfo();
    if (response.code === 0) {
      userInfo.value = response.data;
      isShowRuiduDaily.value = response.data.rdReportFlag;
      rhReportFlag.value = response.data.rhReportFlag;
      rhReportApprovalFlag.value = response.data.rhReportApprovalFlag;
      ryReportFlag.value = response.data.ryReportFlag;
      ryReportApprovalFlag.value = response.data.ryReportApprovalFlag;
      ryXjReportFlag.value = response.data.ryXjReportFlag;
      ryXjReportApprovalFlag.value = response.data.ryXjReportApprovalFlag;
    }
  };
  getLoginUser();

  const overtimeTaskList = ref([]);
  const isNavigated = ref(false);
  // 处理缓存的钉钉消息传递的消息
  onShow(async () => {
    const response = await Promise.all([getUnreadMessageCount(), getOvertimeTaskList({ pageNo: 1, pageSize: 10 })]);
    // const response = await getUnreadMessageCount()
    // messageCount.value = response.data
    if (response[0].code === 0) {
      messageCount.value = response[0].data;
    }
    if (response[1].code === 0) {
      const list = response[1].data.list;
      const mapList = [];
      for (let i = 0; i < list.length; i += 2) {
        mapList.push({
          item1: list[i],
          item2: list[i + 1],
        });
      }
      overtimeTaskList.value = mapList;
    }

    // await getOvertimeTaskList({ pageNo: 1, pageSize: 10 })

    await nextTick(() => {
      const json = uni.getStorageSync('dingTalkJson');
      // console.log('home: dingTalkJson -> ' + json + `, isTrue: ${!!json}`)
      if (json) {
        const obj = JSON.parse(json);
        if (obj.type) {
          messageNavigate(obj);
          uni.removeStorageSync('dingTalkJson');
          // console.log('home: dingTalkJson -> ' + uni.getStorageSync('dingTalkJson'))
        }
      } else {
        if (isNavigated.value) return;
        let args = '';

        // #ifdef APP
        args = plus.runtime.arguments;
        // #endif

        // console.log('home: args -> ' + args)
        const parts = args.match(/^deepoil:\/\/([^/]+)\/([^/]+)$/);
        if (parts) {
          const type = parts[1];
          const id = parts[2];
          messageNavigate({ type, id });
          isNavigated.value = true;
        }
      }
    });
  });
</script>

<style lang="scss" scoped>
  .home {
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
  }

  .row-full {
    width: 100%;
    height: 64px;
    margin-bottom: 10px;
  }

  .row-half {
    width: 100%;
    height: 68px;
    margin-bottom: 5px;

    .uni-col {
      padding: 15px !important;
      box-sizing: border-box;
    }
  }

  .daiban-tixing {
    height: 100%;
    min-height: 128rpx;
    background-image: url('/static/home/kapian.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0 10px !important;
    padding-left: 15px !important;
    box-sizing: border-box;
  }

  .dt-title {
    width: 37px;
    font-size: 20px;
    line-height: 20px;
    text-shadow: 0 2px 4px rgba(98, 114, 125, 0.36);
    text-align: center;
    font-style: normal;

    .todo {
      color: #004098;
    }

    .remind {
      color: #333333;
    }
  }

  .dt-swiper {
    width: calc(100%);
    height: 100%;
  }

  .dt-status {
    width: 60px;
    height: 18px;
    background: #ffffff;
    box-shadow: 0 2px 4px 0 rgba(98, 114, 125, 0.36), 0 2px 4px 0 rgba(0, 0, 0, 0.13);
    border-radius: 6px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 10px;
    line-height: 18px;
    text-shadow: 0px 2px 4px rgba(98, 114, 125, 0.36);
    text-align: center;

    &.green {
      color: #2bbb80;
    }

    &.blue {
      color: #3b63c9;
    }
  }

  .dt-content {
    flex: 1;
    width: auto;
    margin-left: 10px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 10px;
    color: #595959;
    line-height: 14px;
    text-shadow: 0px 2px 4px rgba(98, 114, 125, 0.36);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .dt-time {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 10px;
    color: #646464;
    line-height: 14px;
    text-shadow: 0px 2px 4px rgba(98, 114, 125, 0.36);
  }

  .half-title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
  }

  .half-subtitle {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 10px;
    color: #ffffff;
  }

  .yunxingjilu {
    width: calc(50% - 2.5px);
    height: 100%;
    background-image: url('/static/home/yunxingjilu.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 2.5px;
  }

  .baoyang {
    width: calc(50% - 2.5px);
    height: 100%;
    background-image: url('/static/home/baoyang.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-left: 2.5px;
  }

  .shebeiweixiu {
    width: calc(50% - 2.5px);
    height: 100%;
    background-image: url('/static/home/shebeiweixiu.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 2.5px;
  }

  .xunjian {
    width: calc(50% - 2.5px);
    height: 100%;
    background-image: url('/static/home/xunjian.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-left: 2.5px;
  }

  .guzhang {
    // width: 100%;
    height: 100%;
    background-image: url('/static/home/guzhang.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;

    padding: 15px !important;
    box-sizing: border-box;
  }

  .card {
    width: 100%;
    background: #ffffff;
    border-radius: 6px;
    padding: 20px;
    box-sizing: border-box;
  }

  .card-cell {
    width: 100%;
    height: 50px;

    image {
      width: 32px;
      height: 32px;
    }
  }

  .cell-con {
    margin-left: 10px;
    margin-right: 10px;
    width: calc(100% - 32px - 10px - 10px);
    height: 100%;
    border-bottom: 0.5px solid #cacccf;
  }

  .cell-text {
    width: 100%;
    font-weight: 500;

    .title {
      font-size: 14px;
      color: #333333;
      line-height: 20px;
    }

    .subtitle {
      font-size: 12px;
      color: #999999;
      line-height: 17px;
      margin-left: 10px;
    }

    .icon {
      width: 6px;
      height: 10px;
    }
  }
</style>