Jcss Fence Plugin

介绍

Vue 电子围栏管理插件，支持地图绘制功能，基于高德地图 API 实现。

功能特点

• 围栏列表展示与管理
• 地图围栏绘制（支持圆形、矩形、多边形）
• 围栏设备绑定
• 围栏属性配置
• 响应式设计

发布npm

## step1: 登录npm (第一次发布需登陆)
npm config set registry https://registry.npmjs.org/
npm login
## step2 :这个项目终端里执行
git pull
npm run build
npm publish

本地测试

# 方式1 将生成的包本地部署到项目下(本地可以这么玩)
## step1 :这个项目里执行
npm run prepublishOnly
cd dist
npm init -y
## step2 :copy dist包并修改名称为jcss-fence-plugin 放置在需引入的项目packages下(与package.json同级目录)
npm install ./packages/jcss-fence-plugin
## step3 :在需引入的项目main.js中添加 参考下列->使用示例

安装

npm install jcss-fence-plugin

## 使用示例
// index.html 中引入地图 具体参考物联网项目
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "高德密钥",
      };
    </script>
    <script src="https://webapi.amap.com/maps?v=2.0&key=高德地图key"></script>
    <script src="https://webapi.amap.com/ui/1.1/main.js"></script>
    
// main.js
import FencePlugin from 'jcss-fence-plugin'

Vue.use(FencePlugin)

// 电子围栏列表页
<template>
  <FenceInfo handleRouteName="map" :infoApi="infoApi" :AllbindApi="AllbindApi" :bindApi="bindApi" companyCode=""/>
  # handleRouteName 为跳转详情/新增/编辑的路由名称(name)
  # companyCode 为公司code 物联网传''
</template>

<script>
import {
  listFenceInfo, //查询围栏管理列表fuction 必填 参数设计仿照物联网系统
  delFenceInfo, //删除围栏管理fuction 必填
  getFenceTree, //查询围栏管理树fuction 必填
  getFenceDeviceTree,   //查询围栏管理设备树fuction 必填
  bindFenceDevice, //绑定设备fuction 必填
} from "@/api/fence/fenceInfo";
export default {
  name: "FenceInfo",
  data() {
    return {
      infoApi: {
        listFenceInfo,
        delFenceInfo,
      },
      AllbindApi: {
        getFenceTree,
        getFenceDeviceTree,
      },
      bindApi: {
        getFenceDeviceTree,
        bindFenceDevice,
      },
    };
  },
};
</script>


// 电子围栏新增/操作/详情页

<template>
  <FenceMap companyCode="" :formApi="formApi" :mapApi="mapApi" :treeApi="treeApi" />
</template>

<script>
import {
  getFenceTree,
  getRoadList,
  getFenceInfoById,
  addFenceInfo,
  updateFenceInfo,
} from "@/api/fence/fenceInfo";

export default {
  name: "FenceMap",
  data() {
    return {
      formApi: {
        getFenceInfoById,
        addFenceInfo,
        updateFenceInfo,
      },
      mapApi: {
        getRoadList,
      },
      treeApi: {
        getFenceTree,
      },
    };
  },
};
</script>