- A+
所属分类：Web前端
以 CameraRelation 这个模块为例：
一、在html中引用vue.js、element-ui的css、element-ui的js
在index.html中添加：
<link type="text/css" rel="stylesheet" href="build/element-ui/index.css"> <script type="text/javascript" src="build/vue/vue.js"></script> <script type="text/javascript" src="build/element-ui/index.js"></script>
View Code
二、编写模块的html
cameraRelation.html代码：
<html> <head> <style type="text/css" scoped> .rightContainer { line-height: 38px; } </style> </head> <body> <div id="cameraRelation"> <el-dialog title="摄像机设备关联模型" :visible.sync="dialogVisible" width="1300px" :before-close="handleClose" :close-on-press-escape="false" :close-on-click-modal="false"> <el-row :gutter="20"> <el-col :span="6" class="rightContainer"> <span>模型ID：</span> <span>{{modelIds}}</span> </el-col> <el-col :span="12" class="rightContainer"> <span>模型名称：</span> <span>{{modelNames}}</span> </el-col> <el-col :span="4"> <el-input placeholder="请输入内容" v-model="input" clearable> </el-input> </el-col> <el-col :span="2"> <el-button type="primary" @click="search()">查询</el-button> </el-col> </el-row> <el-row> <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%" height="400"> <el-table-column type="index" width="50"> </el-table-column> <el-table-column property="id" label="ID" width="400"> </el-table-column> <el-table-column property="name" label="摄像机名称"> </el-table-column> <el-table-column property="modelId" label="关联模型ID集合" width="200"> </el-table-column> <el-table-column property="modelName" label="关联模型名称集合" width="200"> </el-table-column> </el-table> <!-- <div style="margin-top: 20px"> <el-button @click="setCurrent(tableData[1])">选中第二行</el-button> <el-button @click="setCurrent()">取消选择</el-button> </div> --> </el-row> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="deleteRelation">删除关联</el-button> <el-button type="primary" @click="ok">关 联</el-button> </span> </el-dialog> </div> </body> </html>
View Code
三、编写模块的js
CameraRelation.js代码：
/** * 平台摄像机关联模型 */ import { API } from '../js.my/API.js'; import { Msg } from '../js.my/Msg.js'; let CameraRelation = function () { let api = new API(); let msg = new Msg(); let vue = new Vue({ el: "#cameraRelation", created() { }, data() { return { dialogVisible: false, input: '', modelIds: '', modelNames: '', tableData: [{ id: '', name: '', modelId: '', modelName: '' }], currentRow: null }; }, methods: { handleClose(done) { done(); }, ok() { if (this.currentRow) { msg.confirm("确定关联？", "提示", () => { let data = { id: this.currentRow.id, name: this.currentRow.name, model_id: this.modelIds, model_name: this.modelNames } api.updatePtCameraInfo(data, () => { this.search(); msg.show("模型关联摄像机设备成功"); }); }); } else { msg.show("请点击选择一条数据"); } }, deleteRelation() { if (this.currentRow) { msg.confirm("确定删除该摄像机设备的模型关联？", "提示", () => { let data = { id: this.currentRow.id, name: this.currentRow.name, model_id: '', model_name: '' } api.updatePtCameraInfo(data, () => { this.search(); msg.show("摄像机设备删除模型关联成功"); }); }); } else { msg.show("请点击选择一条数据"); } }, show(modelIds, modelNames) { this.modelIds = modelIds; this.modelNames = modelNames; this.dialogVisible = true; this.search(); }, search() { api.getPtCameraList(this.input.trim(), data => { this.tableData = data; }); }, setCurrent(row) { this.$refs.singleTable.setCurrentRow(row); }, handleCurrentChange(val) { this.currentRow = val; } } }); this.show = vue.show; } CameraRelation.prototype.constructor = CameraRelation; export { CameraRelation }
View Code
CameraRelation.js代码中使用了Vue
四、在项目的html文件中加载模块的html
在index.html中添加(用到了jquery)：
<div id="cameraRelation-container"> </div> <script type="text/javascript"> $("#cameraRelation-container").load("./html/cameraRelation.html"); </script>
View Code
五、index.html中引用show.js
show.js是和index.html对应的业务功能的主模块
<script type="module" src="./js/show.js"></script>
View Code
五、在show.js文件中引入并使用CameraRelation模块：
Ray2.js模块用于在三维场景中拾取三维模型，然后使用对话框模块CameraRelation.js显示编辑界面
import { CameraRelation } from '../js.my/CameraRelation.js'; import { Ray2 } from '../js.my/Ray2.js'; let cameraRelation; let ray2; //平台摄像机关联模型 let rayCallback = function (result) { if (result.length > 0) { let modelIds = ""; let modelNames = ""; let pos = result[0].name.lastIndexOf('_'); let namePre = result[0].name.substr(0, pos); objects.all.map(obj => { if (obj.name.indexOf(namePre) >= 0) { modelIds += obj.id + ","; modelNames += obj.name + ","; } }); if (!cameraRelation) { cameraRelation = new CameraRelation(); } cameraRelation.show(modelIds, modelNames); } } $("#ray-start").on("click", function (event) { if (!ray2) { ray2 = new Ray2(); ray2.config(objects, camera, scene, "GV", rayCallback); ray2.start(); } else { ray2.start(); } msg.show("请点击选择摄像机模型"); }); $("#ray-stop").on("click", function (event) { if (ray2) { ray2.stop(); msg.show("摄像机关联模型操作结束"); } });
View Code
效果图：
