Welcome 🧊
山区公路应急联动平台

山区公路应急联动平台

2022.10.08 - 2023.06.27
7 分钟
公司项目 vue uniapp 浙政钉 web app h5 leaflet 大屏
1019 字

项目介绍 Link to 项目介绍

主要用于处置xx市应急事件

部分模块展示 Link to 部分模块展示

扫码绑定 扫码登录 视频绑定 应急演练 指挥调度 预案管理

项目难点 Link to 项目难点

  1. 浙政钉用户免登【uniapp中onLoad判断是否是浙政钉环境ddEnv.env.platform === ‘notInDingTalk’，如果是钉钉环境则走钉钉内部的接口dd.getAuthCode获取到用户Code后携带此Code走后端浙政钉用户免登接口从而实现免登（这个只要在onload的时候走一遍就行不用监听）】 浙政钉用户免登

  2. Pc系统【浙政钉】扫码登录【登录页面嵌套iframe,调用浙政钉二维码链接(该链接本身会实时刷新)pc端mounted钩子中监听message事件，浙政钉扫码成功并且确认后会返回一个Code最后利用这个code走后端扫码授权登录接口即可实现免登】

  3. 埋点【埋点代码分为：稳定性监控代码（Emas）和流量分析代码(A+)。稳定性监控代码（Emas）只需要在首页加入。流量分析代码(A+)每个页面都需要加入，但是可以写通用js（必须获取用户的accountId和userName），在其他页面引入。】

  4. leaflet离线地图打点 画线 画面 测距 热力图 等地图操作

  5. 展示应急事件 物资 设备设施点位有上万个因此使用懒加载（左下角和右上角坐标传给后端，后端返回可视区内的坐标点）

代码实例 Link to 代码实例

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
  /**
 * @Event 浙政钉埋点方法
 * @description: 此方法需全局注册并且在每个页面中调用
 * @param {Object} meta 页面meta信息; {Object} user 用户信息
 * @author: mhf
 * @time: 2024-01-22 11:11:41
 **/

// main.js
// import {zzdmd} from './common/zzdmd'
// Vue.prototype.zzdmd = zzdmd;
//每个xxx.vue页面里面直接调用
// mounted () {
//   this.zzdmd(this.$route.meta, this.vuex_user.user)
// }
export default function zzdmd(meta, dingUser) {
    // ******** 以下代码需在 index.html 中也添加一份 ********
    (function (w, d, s, q, i) {
        w[q] = w[q] || [];
        var f = d.getElementsByTagName(s)[0], j = d.createElement(s);
        j.async = true;
        j.id = 'beacon-aplus';
        j.src = 'https://alidt.alicdn.com/alilog/mlog/aplus_cloud.js';
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'aplus_queue');

    aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['aplus-rhost-v', 'alog-api.ding.zj.gov.cn']
    });
    aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['aplus-rhost-g', 'alog-api.ding.zj.gov.cn']
    });

    var u = navigator.userAgent
    var isAndroid = u.indexOf('Android') > -1
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

    aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['appId', isAndroid ? 'todo 看浙政钉文档' : isIOS ? 'todo 看浙政钉文档' : 'todo 看浙政钉文档']
    });
    // ******** 以上代码需在 index.html 中也添加一份 ********


    //单页应用或“单个页面”需异步补充PV日志参数还需进行如下埋点：
    //基础埋点
    aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['aplus-waiting', 'MAN']
    });//
    // 单页应用路由切换后 或 在异步获取到pv日志所需的参数后再执行sendPV：
    aplus_queue.push({
        'action': 'aplus.sendPV',
        'arguments': [{
            is_auto: false
        },  {
            // 当前你的应用信息，此两行请勿修改
            sapp_id: 'todo sapp_id', // 在开放平台app_base_info表主键
            sapp_name: 'todo sapp_name', // 在开放平台的应用标识
            bid: 'todo bid',
            signkey: 'todo signkey',
            page_id: 'xxxxx_' + meta.pagePath,
            page_name: meta.name,
            page_url: meta.pagePath
        }]
    })
    // 用户信息埋点
    //如采集用户信息是异步行为需要先执行这个BLOCK埋点
    aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['_hold', 'BLOCK']
    });
    // 设置用户ID，用户设备ID可不做上报，若上报可使用开放平台JSAPI获取UUID
    //用户id需要埋政钉用户真实信息，用户ID必须用accountId，可通过开放平台“获取用户详情”接口获取。
    aplus_queue.push({
        action: "aplus.setMetaInfo",
        arguments: ["_user_id", dingUser.accountId]
    });
    aplus_queue.push({
        action: "aplus.setMetaInfo",
        arguments: ["_user_nick", dingUser.userName],
    });
    // 如采集用户信息是异步行为，需要先设置完用户信息后再执行这个START埋点
    // 此时被block住的日志会携带上用户信息逐条发出
    aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['_hold', 'START']
    });
};

Telegram
Douban
Reddit
Pocket