feat: PDA添加增量更新

曹睿

昨天 95b85a1942d41541025ec781f16b229108f75e65

 src/pages/index/index.vue

@@ -2,37 +2,41 @@
  <view style="width: 100%; height: var(--status-bar-height)" />
  <view class="home">
    <!-- 当前用户 -->
    <view class="text-[#0D867F] font-medium py-2 text-lg">亨旺特导线缆上报系统</view>
    <view class="flex items-center justify-between">
      <view class="text-[#0D867F] font-medium py-2 text-lg">
        <text>亨旺特导线缆上报系统</text>
      </view>
    </view>
    <WorkerCallingCard />

    <!-- 通知公告 -->
    <wd-notice-bar
      text="vue-uniapp-template 是一个基于 Vue3 + UniApp 的前端模板项目，提供了一套完整的前端解决方案，包括登录、权限、字典、接口请求、状态管理、页面布局、组件封装等功能。"
      custom-class="space"
    >
    <wd-notice-bar text="这是一条测试通知的数据" custom-class="space">
      <template #prefix>
        <wd-icon class="prefix" name="warn-bold" size="14px"></wd-icon>
        <text class="text-xs">通知</text>
      </template>
    </wd-notice-bar>
    <!-- 快捷导航 -->
    <wd-grid clickable :column="4" class="mt-2">
      <wd-grid-item
        v-for="(item, index) in navList"
        :key="index"
        use-slot
        link-type="navigateTo"
        :url="item.url"
      >
        <view class="p-2">
          <image class="w-72rpx h-72rpx rounded-8rpx" :src="item.icon" />
        </view>
        <view class="text">{{ item.title }}</view>
      </wd-grid-item>
    <wd-grid clickable :column="1" class="mt-2">
      <view v-for="(item, index) in navList">
        <wd-grid-item v-if="item.show" :key="index" use-slot link-type="navigateTo" :url="item.url">
          <view class="p-2">
            <image class="w-72rpx h-72rpx rounded-8rpx" :src="item.icon" />
          </view>
          <view class="text">{{ item.title }}</view>
        </wd-grid-item>
      </view>
    </wd-grid>

    <wd-message-box />
    <wd-popup v-model="fileProgress.show" custom-style="width: 300px; border-radius: 32rpx;">
      <view class="download_box">
        <view class="download_box_title">下载中...</view>
        <wd-progress :percentage="fileProgress.progress" hide-text :status="fileProgress.status" />
      </view>
    </wd-popup>
    <wd-toast />
    <!-- 数据统计 -->
    <wd-grid :column="2" :gutter="2">
    <!-- <wd-grid :column="2" :gutter="2">
      <wd-grid-item use-slot custom-class="custom-item">
        <view class="flex justify-start pl-5">
          <view class="flex-center">
@@ -55,9 +59,9 @@
          </view>
        </view>
      </wd-grid-item>
    </wd-grid>
    </wd-grid> -->

    <wd-card>
    <!-- <wd-card>
      <template #title>
        <view class="flex-between">
          <view>访问趋势</view>
@@ -78,14 +82,16 @@
      <view class="charts-box">
        <qiun-data-charts type="area" :chartData="chartData" :opts="chartOpts" />
      </view>
    </wd-card>
    </wd-card> -->
  </view>
</template>

<script setup lang="ts">
import { dayjs } from "wot-design-uni";
import { reactive } from "vue";
import { dayjs, useMessage, useToast } from "wot-design-uni";
import LogAPI, { VisitStatsVO } from "@/api/system/log";
import WorkerCallingCard from "@/components/worker-calling-card/index.vue";
import HomeApi from "@/api/home";

const visitStatsData = ref<VisitStatsVO>({
  todayUvCount: 0,
@@ -94,6 +100,15 @@
  todayPvCount: 0,
  pvGrowthRate: 0,
  totalPvCount: 0,
});

const message = useMessage();
const toast = useToast();

const fileProgress = reactive({
  show: false,
  progress: 0,
  status: undefined,
});

// 图表数据
@@ -136,24 +151,31 @@
    icon: "/static/icons/user.png",
    title: "生产管理",
    url: "/pages/production/index",
    show: false,
  },
  // {
  //   icon: "/static/icons/role.png",
  //   title: "角色管理",
  //   url: "/pages/work/role/index",
  //   prem: "sys:role:query",
  // },
  // {
  //   icon: "/static/icons/notice.png",
  //   title: "通知公告",
  //   url: "/pages/work/notice/index",
  //   prem: "sys:notice:query",
  // },
  // {
  //   icon: "/static/icons/setting.png",
  //   title: "系统配置",
  //   url: "/pages/work/config/index",
  //   prem: "sys:config:query",
  // },
  {
    icon: "/static/icons/role.png",
    title: "角色管理",
    url: "/pages/work/role/index",
    prem: "sys:role:query",
  },
  {
    icon: "/static/icons/notice.png",
    title: "通知公告",
    url: "/pages/work/notice/index",
    prem: "sys:notice:query",
  },
  {
    icon: "/static/icons/setting.png",
    title: "系统配置",
    url: "/pages/work/config/index",
    prem: "sys:config:query",
    icon: "/static/icons/log.png",
    title: "时效报工",
    url: "/pages/timely/index",
    show: false,
  },
]);

@@ -200,9 +222,74 @@
  loadVisitTrendData();
};

onReady(() => {
  loadVisitStatsData();
  loadVisitTrendData();
const init = async () => {
  checkVersion();
  const { data } = await HomeApi.getIndex();
  if (data.deviceGroupName == "时效组") {
    navList[1].show = true;
  } else {
    navList[0].show = true;
  }
};

/**
 * @description 检查版本号
 */
const checkVersion = async () => {
  const systemInfo = uni.getSystemInfoSync();
  const { code, data } = await HomeApi.getVersion({ version: systemInfo.appVersion });
  if (code == 200 && data.isUpdate) {
    message
      .confirm({
        title: "发现新版本",
        confirmButtonText: "下载",
        cancelButtonText: "忽略",
      })
      .then(() => {
        downloadApk(data.url, data.fileSize);
      })
      .catch(() => {});
  }
};

/**
 * @desc 发起下载APK
 */
const downloadApk = (url: string, fileSize: number) => {
  fileProgress.show = true;
  let dtask: any = downloadFile(url);
  // 下载任务开始下载
  dtask.start();
  // 关于进度的获取是使用定时器不断获取已经下载的文件的大小，再对比总大小即可
  let timer = setInterval(() => {
    let percent: any = (dtask.downloadedSize / fileSize).toFixed(2); // fileSize文件总大小，后端返回的
    console.log("发起下载APK", dtask.downloadedSize);
    fileProgress.progress = Math.floor(percent * 100); // 转成整数展示
    if (percent >= 1) {
      // 注意百分比，及时清除定时器即可
      clearInterval(timer);
      fileProgress.show = false;
    }
  }, 18);
};

// uniapp下载APK实例
const downloadFile = (url: string) => {
  return plus.downloader.createDownload(url, {}, (d, status) => {
    console.log(d);
    if (status == 200) {
      fileProgress.show = true;
      plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {}, (error) => {
        toast.error("安装失败");
      });
    } else {
      toast.error("更新失败");
    }
  });
};

onMounted(() => {
  init();
});
</script>

@@ -223,4 +310,16 @@
  width: 100%;
  height: 300px;
}
.download_box {
  padding: 24px;
  .download_box_title {
    text-align: center;
    font-size: 16px;
    color: #000000d9;
    line-height: 20px;
    font-weight: 500;
    padding-top: 5px;
    padding-bottom: 10px;
  }
}
</style>