123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157 |
- <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="(sign||otherSign)&&!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>
- <span style="float:right;" v-if="file.FolderName">当前对应的模型文件:{{file.FolderName}} - {{file.FloorName}}</span>
- </div>
- <!-- 展示图片 -->
- <div class="drawImg">
- <drawFloor ref="drawFloor" :isEdit="isEdit" :showTools="true" :id="1" @changeSign="changeSign"></drawFloor>
- </div>
- <!-- 查看图片弹窗 -->
- <checkGraphy ref="checkGraphy" @refresh="refresh" :alreadyRelatedModel='alreadyRelatedModel'></checkGraphy>
- </div>
- </template>
- <script>
- import drawFloor from "./drawGraphy/drawFloor";
- import checkGraphy from "./drawGraphy/checkGraphy"; //查看图片
- import { floorUpdateOutline, floorQueryAndSign } from "@/api/scan/request";
- import { getFileNameById } from "@/api/model/file";
- export default {
- components: {
- drawFloor,
- checkGraphy
- },
- data() {
- return {
- modelId: "", //
- isEdit: false, // 是否编辑模式
- file: {},
- alreadyRelatedModel: [],
- sign: false,
- otherSign: false
- };
- },
- created() {
- this.modelId = this.$route.query.modelId;
- this.FloorID = this.$route.query.FloorID;
- this.BuildID = this.$route.query.BuildID;
- this.BuildName = this.$route.query.BuildName;
- this.init();
- },
- mounted() { },
- methods: {
- init() {
- this.getFileName(this.modelId)
- this.getFloorData()
- },
- // 返回路由
- 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']
- }
- floorUpdateOutline(pa, res => {
- this.isEdit = false;
- this.$message.success("更新成功");
- })
- },
- // 取消
- cancel() {
- this.isEdit = false;
- this.$refs.drawFloor.init();
- },
- // 编辑平面图
- editGraphy() {
- this.isEdit = true;
- },
- // 替换模型文件成功
- refresh(modelId) {
- this.modelId = modelId;
- this.getFileName(this.modelId)
- },
- // 获取文件夹名称
- getFileName(modelId) {
- if (!modelId) return
- let pa = {
- Id: modelId
- }
- getFileNameById(pa, res => {
- this.file = res;
- })
- },
- // 获取楼层
- getFloorData() {
- let floorParam = {
- PageSize: 1000,
- Filters: `BuildID='${this.BuildID}'`
- };
- floorQueryAndSign(floorParam, res => {
- this.alreadyRelatedModel = res.Content.map(t => {
- if (t.FloorID != this.FloorID) return t.ModelId
- this.sign = t.Sign > 0
- this.FloorName = t.FloorLocalName || t.FloorName
- this.$refs.drawFloor.buildFloorName = `${this.BuildName}-${this.FloorName}`
- }).filter(t => t);
- });
- },
- changeSign(flag) {
- this.otherSign = flag
- }
- },
- watch: {
- modelId(n, o) {
- if (o && n != o) {
- this.$refs.drawFloor.initGraphy(n, 1);
- }
- }
- }
- };
- </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>
|