123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- <template>
- <!-- 查看平面图页面 -->
- <div id="repetitionGraphy">
- <div class="buttons">
- <el-button icon="el-icon-back" size="mini" @click="backRouter"></el-button>
- <el-button v-if="!isEdit" size="mini" @click="changeGraphy">替换平面图</el-button>
- <el-button v-if="!isEdit" size="mini" @click="editGraphy">编辑平面图</el-button>
- <el-button v-if="isEdit" size="mini" @click="cancel">取消</el-button>
- <el-button v-if="isEdit" size="mini" @click="confirm" type="primary">确认</el-button>
- </div>
- <!-- 展示图片 -->
- <div class="drawImg">
- <drawFloor ref="drawFloor" :isEdit="isEdit" :showTools="true" :id="1"></drawFloor>
- </div>
- <!-- 查看图片弹窗 -->
- <checkGraphy ref="checkGraphy" @refresh="refresh"></checkGraphy>
- </div>
- </template>
- <script>
- import drawFloor from "./drawGraphy/drawFloor";
- import checkGraphy from "./drawGraphy/checkGraphy"; //查看图片
- import { floorUpdate } from "@/api/scan/request";
- export default {
- components: {
- drawFloor,
- checkGraphy
- },
- data() {
- return {
- modelId: "", //
- isEdit: false, // 是否编辑模式
- };
- },
- created() {
- this.modelId = this.$route.query.modelId;
- this.FloorID = this.$route.query.FloorID;
- this.BuildID = this.$route.query.BuildID;
- this.OutlineFlag = this.$route.query.OutlineFlag;
- },
- mounted() {
- this.$refs.drawFloor.initGraphy(this.modelId)
- },
- methods: {
- // 返回路由
- backRouter() {
- this.$router.push({ name: 'buildFloor' })
- },
- // 替换模型文件
- changeGraphy() {
- this.$refs.checkGraphy.showDialog({ FloorID: this.FloorID, BuildID: this.BuildID })
- },
- // 确认保存
- confirm() {
- let sceneMark = this.$refs.drawFloor.drawMainScene.sceneMark, Outline = null;
- if (sceneMark) {
- if (sceneMark.outLine.length < 3) {
- this.$message.warning('请添加轮廓线');
- return;
- }
- if (!sceneMark.closeFlag) {
- this.$message.warning('请按回车闭合轮廓线');
- this.$refs.drawFloor.focus();
- return;
- }
- Outline = this.$refs.drawFloor.drawMainScene.sceneMark.outLine
- Outline = Outline.map(t => {
- return {
- x: t.x.toFixed(2),
- y: t.y.toFixed(2),
- }
- })
- }
- let pa = {
- Content: [{ FloorID: this.FloorID, Outline: Outline }],
- Projection: ['Outline']
- }
- floorUpdate(pa, res => {
- this.isEdit = false;
- this.$message.success("更新成功");
- })
- },
- // 取消
- cancel() {
- this.isEdit = false;
- this.$refs.drawFloor.initGraphy(this.modelId)
- },
- // 编辑平面图
- editGraphy() {
- this.isEdit = true;
- },
- // 替换模型文件成功
- refresh(modelId) {
- this.modelId = modelId
- }
- },
- watch: {
- modelId(n, o) {
- if (o && n != o) {
- this.$refs.drawFloor.initGraphy(n)
- }
- }
- }
- };
- </script>
- <style lang="less">
- #repetitionGraphy {
- width: 100%;
- height: 100%;
- background: #fff;
- position: relative;
- padding: 10px;
- box-sizing: border-box;
- .drawImg {
- width: 100%;
- margin-top: 10px;
- height: calc(100% - 40px);
- }
- }
- </style>
|