123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149 |
- <template>
- <!-- 拓扑图demo -->
- <el-container>
- <el-aside width="200px" class="el-scrollbar">
- <div title="划线">
- <el-button size="mini" @click="drawline" icon="el-icon-crop"></el-button>
- </div>
- <div title="适配底图">
- <el-button size="mini" @click="fitClick" icon="el-icon-crop"></el-button>
- </div>
- <div title="添加item">
- <el-button size="mini" @click="additem" icon="el-icon-crop"></el-button>
- </div>
- </el-aside>
- <el-main>
- <div ref="graphy" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
- element-loading-background="rgba(0, 0, 0, 0.8)" style="height: 100%">
- <canvas id="bg" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
- </div>
- </el-main>
- </el-container>
- </template>
- <script>
- import { TopoScene, TopoView } from "@saga-web/topology/lib";
- export default {
- data() {
- return {
- view: null,
- scene: null,
- loading: false,
- canvasWidth: 800,
- canvasHeight: 800,
- }
- },
- mounted() {
- this.canvasWidth = this.$refs.graphy.offsetWidth;
- this.canvasHeight = this.$refs.graphy.offsetHeight;
- this.createGraphy();
- document.onkeydown = E => {
- console.log(E)
- }
- window.onresize = () => {
- this.canvasWidth = this.$refs.graphy.offsetWidth;
- this.canvasHeight = this.$refs.graphy.offsetHeight;
- }
- },
- beforeCreate() {
- // 读取文件
- FileReader.prototype.reading = function ({ encode } = pms) {
- let bytes = new Uint8Array(this.result); //无符号整型数组
- let text = new TextDecoder(encode || 'UTF-8').decode(bytes);
- return text;
- };
- /* 重写readAsBinaryString函数 */
- FileReader.prototype.readAsBinaryString = function (f) {
- if (!this.onload) //如果this未重写onload函数,则创建一个公共处理方式
- this.onload = e => { //在this.onload函数中,完成公共处理
- let rs = this.reading();
- console.log(rs);
- };
- this.readAsArrayBuffer(f); //内部会回调this.onload方法
- };
- },
- methods: {
- createGraphy() {
- this.clearGraphy();
- this.scene = new TopoScene()
- this.view.scene = this.scene;
- },
- // 清除canvas
- clearGraphy() {
- if (this.view) {
- this.view.scene = null;
- return
- }
- this.view = new TopoView('bg')
- },
- fitClick() {
- this.view.fitSceneToView();
- },
- additem() {
- let equipdata = {
- ID: this.uuid(),
- Size: {
- Width: 100,
- Height: 50
- },
- Pos: {},
- AnchorList: [{ Pos: { X: 0, Y: -25 } },{ Pos: { X: 0, Y: 25 } },{ Pos: { X: -50, Y: 0 } },{ Pos: { X: 50, Y: 0} }]
- }
- this.scene.createItem(equipdata)
- },
- drawline() {
- this.scene.isLining = true;
- },
- uuid(len, radix) {
- var chars = '0123456789abcdef'.split('');
- var uuid = [],
- i;
- radix = radix || chars.length;
- if (len) {
- for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
- } else {
- var r;
- uuid[8] = uuid[13] = uuid[18] = uuid[23] = '';
- uuid[14] = '4';
- for (i = 0; i < 32; i++) {
- if (!uuid[i]) {
- r = 0 | Math.random() * 16;
- uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
- }
- }
- }
- return uuid.join('');
- }
- },
- }
- </script>
- <style lang="less" scoped>
- .el-container {
- background: #fff;
- /deep/ textarea.el-textarea__inner {
- width: 100%;
- height: 100% !important;
- }
- .el-aside {
- padding: 10px;
- border: 1px solid #e4e4e4;
- }
- .el-aside > div {
- margin: 10px auto;
- text-align: right;
- }
- .el-main {
- padding: 10px !important;
- border: 1px solid #e4e4e4;
- border-left: none;
- }
- input[type="file"] {
- display: none;
- }
- }
- </style>
|