# tcollespet

> 测试使用

Latest version **0.1.5** (published 2021-08-03) · 0 weekly downloads

## Install

```sh
npm install tcollespet
pnpm add tcollespet
yarn add tcollespet
bun add tcollespet
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.5 |
| Published | 2021-08-03 |
| First published | 2021-07-28 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Unpacked size | 6.1 MB |
| Known vulnerabilities | 0 (+24 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | wutongqianyu |
| Keywords | tag-area, testarea, test, 测试 |

## Links

- npm: https://www.npmjs.com/package/tcollespet
- npm.io page: https://npm.io/package/tcollespet

## Dependencies (12)

- [ol](https://npm.io/package/ol.md) ^6.6.1
- [vue](https://npm.io/package/vue.md) ^2.6.11
- [axios](https://npm.io/package/axios.md) ^0.21.1
- [dayjs](https://npm.io/package/dayjs.md) ^1.10.6
- [flv.js](https://npm.io/package/flv.js.md) ^1.6.1
- [jquery](https://npm.io/package/jquery.md) ^3.6.0
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [xgplayer](https://npm.io/package/xgplayer.md) ^2.26.5
- [element-ui](https://npm.io/package/element-ui.md) ^2.15.3
- [vue-router](https://npm.io/package/vue-router.md) ^3.5.2
- [xgplayer-flv](https://npm.io/package/xgplayer-flv.md) ^2.4.25
- [@riophae/vue-treeselect](https://npm.io/package/@riophae/vue-treeselect.md) ^0.4.0

## Alternatives

- [duck](https://npm.io/package/duck.md) — 4.2M weekly downloads
- [ava](https://npm.io/package/ava.md) — 560.2K weekly downloads
- [storybook-addon-module-mock](https://npm.io/package/storybook-addon-module-mock.md) — 71.7K weekly downloads
- [@ethereum-waffle/mock-contract](https://npm.io/package/@ethereum-waffle/mock-contract.md) — 40.0K weekly downloads
- [aws-elasticsearch-connector](https://npm.io/package/aws-elasticsearch-connector.md) — 37.4K weekly downloads

## Recent versions

- 0.1.5 (latest) — 2021-08-03
- 0.1.4 — 2021-07-29
- 0.1.3 — 2021-07-28
- 0.1.2 — 2021-07-28

## README

# tcollespe

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).


## 此包是测试练习，请勿下载

##### 安装：
```
npm i tcollespet
npm i ol
```
##### 导入项目vue中main.js
```
import tcollespet from 'tcollespet'
Vue.use(tcollespet)
```

##### 在组件中使用如下所示，若样式丢失请导入import "ol/ol.css";

```
<template>
  <div class="openlayer">
    地图管理
    <div>
      <el-button @click="changePic">点我切图</el-button>
      <el-button @click="showhaw">是否显示鹰眼</el-button>
      <el-button @click="changeMap">重新渲染map</el-button>
      <el-button @click="changeMap">添加点</el-button>
    </div>
    <openlayer-map style="height: 600px"
      :mapurls="mapUrl"
      :curmapconfig="curmap"
      :is-haw-eye="ishaw"></openlayer-map>
  </div>
</template>

<script>
import "ol/ol.css";
// import OpenlayerMap from "@/components/OpenlayerMap.vue";
export default {

  data() {
    return {
      ishaw: true,
      order: 0,
      mapIndex: 0,
      curmap: {},
      mapUrlList: [
        "https://scpic3.chinaz.net/Files/pic/pic9/202107/apic34088_s.jpg",
        "https://scpic2.chinaz.net/Files/pic/pic9/202107/hpic4220_s.jpg",
        "https://scpic.chinaz.net/Files/pic/pic9/202107/hpic4223_s.jpg",
        "https://scpic1.chinaz.net/Files/pic/pic9/202107/bpic23746_s.jpg",
        "https://scpic1.chinaz.net/Files/pic/pic9/202107/bpic23750_s.jpg",
      ],
      mapUrl: "https://scpic.chinaz.net/Files/pic/pic9/202107/bpic23751_s.jpg",
      mapData: [
        {
          mapActualX: 111,
          mapActualY: 111,
          mapName: "唯美图111",
          mapOriginX: 111,
          mapOriginY: 111,
          mapPath:
            "https://scpic2.chinaz.net/Files/pic/pic9/202107/apic34073_s.jpg",
          mapPathName: "111111.jpg",
          mapPixelX: 1000,
          mapPixelY: 1000,
          nodeName: "唯美风景图",
  
        },
        {
          mapActualX: 111,
          mapActualY: 111,
          mapName: "唯美图2222",
          mapOriginX: 111,
          mapOriginY: 111,
          mapPath:
            "https://scpic2.chinaz.net/Files/pic/pic9/202107/apic34073_s.jpg",
          mapPathName: "唯美图2222.jpg",
          mapPixelX: 1000,
          mapPixelY: 1000,
          nodeName: "唯美风景图",
        },

      ],

    };
  },
  mounted() {},
  methods: {
    showhaw() {
      this.ishaw = !this.ishaw;
    },
    changePic() {
      this.mapUrl = this.mapUrlList[this.order];
      ++this.order;
      if (this.order > this.mapUrlList.length) {
        this.order = 0;
      }
    },
    changeMap() {
      // $('#map').empty()

      let donfig = this.mapData[this.mapIndex];
      let dataconfig = {};
      dataconfig.url = donfig.mapPath;
      dataconfig.RealWidth = donfig.mapActualX;
      dataconfig.RealHeight = donfig.mapActualY;
      dataconfig.PixelWidth = donfig.mapPixelX;
      dataconfig.PixelHeight = donfig.mapPixelY;
      dataconfig.dPR = donfig.mapPixelX / donfig.mapActualX;
      (dataconfig.ZeroPoint = [donfig.mapOriginX, donfig.mapOriginY]),
        (dataconfig.param = false);
      this.curmap = dataconfig;
      ++this.mapIndex;
      if (this.mapIndex >= this.mapData.length) {
        this.mapIndex = 0;
      }
    },


  },
};
</script>

<style>
</style>


```


#### 相关参数配置如下：

## 文档
| 序号 | 参数 | 说明 | 类型 | 默认值 | 补充 |
| ---- | ---- | ---- | ---- | ---- | ---- |
| 1 | width | 宽度 | String |  100% | 建议在外部盒子设定宽度和位置|
| 2 | height | 高度 | String | 320px | - |
| 3 | title | 标题 | String |  ["源列表", "目标列表"] | - |
| 4 | button_text | 按钮名字 | Array | - | - |
| 5 | from_data | 源数据 | Array | - | 数据格式同element-ui tree组件，但必须有id和pid |
| 6 | to_data | 目标数据 | Array | - | 数据格式同element-ui tree组件，但必须有id和pid |
| 7 | defaultProps | 配置项-同el-tree中props | Object | { label: "label", children: "children", isLeaf: "leaf", disable: "disable" } | 用法和el-tree的props一样 |
| 8 | node_key | 自定义node-key的值，默认为id | String | id | 必须与treedata数据内的id参数名一致，必须唯一 |
| 9 | pid | 自定义pid的参数名，默认为"pid" | String | pid | 有网友提出后台给的字段名不叫pid，因此增加自定义支持 |
| 10 | leafOnly | 废弃 | - | - | - |
| 11 | filter | 是否开启筛选功能 | Boolean | false | 根据defaultProps参数的label字段筛选 |
| 12 | openAll | 是否默认展开全部 | Boolean | false | 存在性能问题 |
| 13 | ~~renderContent~~ renderContentLeft, renderContentRight | 自定义树节点， 用法同element-ui tree | Function | - | 2.2.3版本拆为两个函数分别定义左右两侧自定义节点 |
| 14 | mode | 设置穿梭框模式 | String | transfer | mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人 |
| 15 | transferOpenNode | 穿梭后是否展开穿梭的节点 | Boolean | true | 默认为true即展开穿梭的节点，便于视觉查看，增加此参数是因为数据量大时展开会有明显卡顿问题，但注意，如此参数设置为false则穿梭后不展开，毕竟无法确定第几层就会有庞大数据 |




## 版本更行迭代
v_0.1.3:
1.添加默认数据,显示openlayer基础控件：比例，大小缩放，全屏，鹰眼。
2.实时显示ws推送的数据内容，并显示浮动窗

v_0.1.4：
1.添加轨迹运动显示

v_0.1.5:
1.添加摄像头图标
2.添加快速统计，快速撤离，访客显示和隐藏

---
_Source: https://npm.io/package/tcollespet · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._