| 提交 | 用户 | 时间 | ||
| 850106 | 1 | <template> |
| H | 2 | <div class="data-content"> |
| 3 | <div id="meta2d_1"></div> | |
| 4 | <div class="data-right-status"> | |
| 5 | <qcfx-right-status></qcfx-right-status> | |
| 6 | </div> | |
| 7 | </div> | |
| 8 | </template> | |
| 9 | ||
| 10 | <script> | |
| 11 | import {Meta2d} from '@/utils/meta2d.js' | |
| 12 | import QcfxRightStatus from "@/views/modules/control/components/qcfx-right-status.vue"; | |
| 13 | ||
| 14 | let meta2d = null | |
| 15 | export default { | |
| 16 | name: 'meta2d_1', | |
| 17 | components: {QcfxRightStatus}, | |
| 18 | data() { | |
| 19 | return { | |
| 20 | meta2d: {} | |
| 21 | }; | |
| 22 | }, | |
| 23 | mounted() { | |
| 24 | this.initMeta2d(); | |
| 25 | }, | |
| 26 | destroyed() { | |
| 27 | meta2d?.destroy(); | |
| 28 | }, | |
| 29 | methods: { | |
| 30 | initMeta2d() { | |
| 31 | meta2d = new Meta2d("meta2d_1") | |
| 32 | window.registerCommonDiagram(); | |
| 33 | this._fetch("/json/data-qcfx.json", function (text) { | |
| 34 | let data = JSON.parse(text); | |
| 35 | data.locked = 1; | |
| 36 | meta2d.open(data); | |
| 37 | meta2d.fitView(true, 4); | |
| 38 | }); | |
| 39 | }, | |
| 40 | ||
| 41 | _fetch(url, cb) { | |
| 42 | let xhr = new XMLHttpRequest(); | |
| 43 | xhr.open("GET", url, true); | |
| 44 | xhr.send(); | |
| 45 | xhr.onreadystatechange = function () { | |
| 46 | if (xhr.readyState == 4 && xhr.status == 200) { | |
| 47 | cb && cb(xhr.responseText); | |
| 48 | } | |
| 49 | }; | |
| 50 | }, | |
| 51 | }, | |
| 52 | }; | |
| 53 | </script> | |
| 54 | <style scoped> | |
| 55 | .data-content { | |
| 56 | background-color: #000A30; | |
| 57 | background-size: 100% 100%; | |
| 58 | position: relative; | |
| 59 | height: 48vw; | |
| 60 | width: 87vw; | |
| 61 | display: flex; | |
| 62 | flex-direction: row; | |
| 63 | } | |
| 64 | ||
| 65 | #meta2d_1 { | |
| 66 | position: relative !important; | |
| 67 | width: 75%; | |
| 68 | height: 100%; | |
| 69 | } | |
| 70 | ||
| 71 | .data-right-status { | |
| 72 | width: 25%; | |
| 73 | height: 100%; | |
| 74 | } | |
| 75 | ||
| 76 | </style> | |
