# AIOT2.0_visualization

**Repository Path**: pat_1/aiot2.0_visualization

## Basic Information

- **Project Name**: AIOT2.0_visualization
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-11-13
- **Last Updated**: 2023-11-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目基础

    安装依赖以及运行项目(需要nodeJS稳定版环境)
    建议使用VSCode编辑器

```javascript
npm install 或者 npm install -g yarn 之后执行 yarn
建议使用yarn，国内源，速度快且会读取缓存
使用npm建议安装淘宝镜像
```

```javascript
npm run dev 或者 yarn dev(前提是安装好了yarn)。
运行后在浏览器打开控制台输出的对应地址
```

```javascript
npm run build:prod 或者 yarn build:prod(前提是安装好了yarn)。
运行后打包项目，在项目根目录生成dist文件夹
```

```javascript
// 组件对应页面信息

persionTrack 轨迹查看 timeline
personTrackList 密集人员列表
personTrackContent 具体人员基本信息
realTimeData 圳防疫哨兵-南山区 右侧列表 健康吗信息
SceneApplication 圳防疫哨兵-南山区 右侧列表 使用场景
veriReport 核验报告
errorPersonContent 人员异常处置详情
veriRecord 小哨兵核验记录
singleDevice 单个设备
abnormalPersonList 异常人员列表
statisticsForm 地图信息窗
```

## 项目目录

```javasript
├── src
│   ├── App.vue （路由载体，入口文件）
│   ├── api （定义所有的http接口）
│   ├── assets  （静态文件）
│   ├── components  （自定义组件）
│   ├── hooks （自定义hooks）
│   ├── main.js （程序入口文件）
│   ├── plugins （自定义插件）
│   ├── router （路由）
│   ├── store （pinia状态管理代替vuex）
│   ├── utils （工具类）
│   └── views （页面）
└── vue.config.js （项目配置文件）
```

## 高德地图 API

- 初始化地图

```javascript
// /hooks/useMap.js
import AMapLoader from '@amap/amap-jsapi-loader';
class ScottMap {
  constructor() {
    this.AMap = null;
  }

  initAMap() {
    return new Promise((resolve, reject) => {
      AMapLoader.load({
        key: '8588992a9a92522d7726a2cebd559736', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.DistrictSearch', 'AMap.InfoWindow', 'AMap.Weather'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((map) => {
          this.AMap = map;
          resolve(map);
        })
        .catch((e) => {
          console.error(e);
          reject(e);
        });
    });
  }
  // 初始化地图
  initMap(container, mapConfig) {
    return new Promise((resolve) => {
      this.initAMap().then((AMap) => {
        const map = new AMap.Map(container, mapConfig);
        resolve(map);
      });
    });
  }
}

export default new ScottMap();

// 调用
import ScottMap from '@/hooks/useMap';
const SMap = await ScottMap.initAMap();
```

## 自定义页面上的弹窗

```javascript
/**
 * @description {自定义页面上的弹窗，动态的向页面内添加一个iframe页面}
 * @param {*} duration
 * 弹窗显示的方向，windowLeft，windowMiddle,windowRight
 * @param {*} url
 * iframe的url
 * @param {*} width
 * iframe窗体宽度
 * @param {*} height
 * iframe窗体高度
 * @param {*} middleX
 * windowMiddle的自定义left值
 * @param {*} container
 * iframe的id属性
 */
import ScottApi from '@/hooks/useIframe';
ScottApi.showCustomWindow(duration, url, width, height, middleX, container);
ScottApi.hideCustomWindow();
```

## Axios 二次封装

- /src/hooks/useRequest.js 封装了 axios，且进行了响应拦截，可根据实际需求进行更改

- http 请求示例(建议将所有 http 请求统一管理)

```javascript
// api/xxx.js 其他目录请自行修改路径
import request from '@/hooks/useRequest';

// 查询设备列表
export function listDevice(params) {
  return request({
    url: '/equipment/device/list',
    method: 'GET',
    params,
  });
}
```

## 状态管理（ [Pinia](https://juejin.cn/post/7115217259932418078/) ）

```javaScript
// 定义
import { defineStore } from 'pinia';
export const useAppStore = defineStore('app-store', {
  state: () => ({
    tooltipData: true,
  }),
  actions: {
    async setTooltipData(data) {
      this.tooltipData = data;
    }
  },
});


// 使用
const app = useAppStore()
app.tooltipData.xxx
app.setTooltipData({})
```