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-task/index')"
          v-if="rhTaskFlag">
          <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.dailyReportRuiHenTaskTip") }}
              </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 rhTaskFlag = 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;
    // isShowRuiduDaily.value = true;
    rhReportFlag.value = response.data.rhReportFlag;
    rhTaskFlag.value = response.data.rhReportFlag;
    // rhTaskFlag.value = true;
    rhReportApprovalFlag.value = response.data.rhReportApprovalFlag;
    ryReportFlag.value = response.data.ryReportFlag;
    // ryReportFlag.value = true;
    ryReportApprovalFlag.value = response.data.ryReportApprovalFlag;
    // ryReportApprovalFlag.value = true;
    ryXjReportFlag.value = response.data.ryXjReportFlag;
    // ryXjReportFlag.value = true;
    ryXjReportApprovalFlag.value = response.data.ryXjReportApprovalFlag;
    // ryXjReportApprovalFlag.value = true;
  }
};
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>