graphy.vue 40 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230
  1. <template>
  2. <div id="graphy" ref="graphy" v-loading="canvasLoading">
  3. <div v-show="!FloorMap">
  4. <div style="margin-right:10px;width: 100%;margin-bottom: 10px" v-if="showOtherFlag">
  5. <!-- 平面图其他分区 -->
  6. <el-button type="primary" @click="addZoneBtn">添加分区</el-button>
  7. <el-select v-model="OtherValue" placeholder="请选择分区类型" @change="changeOtherZone">
  8. <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
  9. </el-option>
  10. </el-select>
  11. </div>
  12. <div class="center" style="height: 400px;padding-top:182px;box-sizing:border-box;">
  13. <i class="icon-wushuju iconfont"></i>
  14. 暂无数据
  15. </div>
  16. </div>
  17. <div class="canvas-box" v-show="FloorMap">
  18. <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
  19. <!-- 初始两个按钮 -->
  20. <el-row class="buttons-box">
  21. <div style="margin-right:10px;width: 100%;margin-bottom: 10px" v-if="showOtherFlag">
  22. <!-- 平面图其他分区 -->
  23. <el-button type="primary" @click="addZoneBtn">添加分区</el-button>
  24. <el-select v-model="OtherValue" placeholder="请选择分区类型" @change="changeOtherZone">
  25. <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
  26. </el-option>
  27. </el-select>
  28. </div>
  29. <div>
  30. <el-autocomplete popper-class="my-autocomplete" v-model="search" :fetch-suggestions="querySearch" placeholder="输入平面图中已有的业务空间名称进行查找"
  31. width="180px" @select="handleSelect">
  32. <i class="el-icon-search el-input__icon" slot="suffix" @click="handleSelect"></i>
  33. <template slot-scope="{ item }">
  34. <div class="name" style="position: relative;padding-right:40px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
  35. :title="item.data.RoomLocalName">
  36. {{ item.data.RoomLocalName }}
  37. <span class="addr" style="position: absolute;right:0;color:#409EFF;">定位</span>
  38. </div>
  39. </template>
  40. </el-autocomplete>
  41. </div>
  42. <div class="button-group">
  43. <!-- 默认操作模式 -->
  44. <div v-show="type==1">
  45. <el-dropdown split-button type="primary" @click="editGraphy" @command="handleCommand">
  46. 创建业务空间
  47. <el-dropdown-menu slot="dropdown">
  48. <el-dropdown-item command="groupCreateBSpace">批量创建业务空间</el-dropdown-item>
  49. </el-dropdown-menu>
  50. </el-dropdown>
  51. <!-- 点击已经关联的业务空间 -->
  52. <el-button type="primary" plain @click="refactorBSP" :disabled="zoneDisable" style="margin-left:10px;">重新划分业务空间</el-button>
  53. <el-button type="primary" @click="editeSpaceDetail" :disabled="zoneDisable">编辑空间详情</el-button>
  54. <el-button type="primary" plain @click="confirmZoneSpace" :disabled="zoneDisable||(!zoneDisable&&!curZoneItem.isInfected)">确认业务空间
  55. </el-button>
  56. <el-button plain @click="cancelGraphy" v-show="!zoneDisable">取 消</el-button>
  57. </div>
  58. <!-- 点击已经关联的业务空间 -->
  59. <!-- <div v-show="type==2">
  60. </div> -->
  61. <!-- 点击未关联的业务空间 -->
  62. <div v-show="type==3">
  63. <el-button plain @click="createNewZone">创建单个全新的业务空间</el-button>
  64. <el-button plain @click="lookUnrelatBSpace(true)">从未关联平面图的业务空间中选择</el-button>
  65. <el-button plain @click="cancelGraphy">取 消</el-button>
  66. </div>
  67. <!-- 重新划分业务空间 -->
  68. <div v-show="type==4">
  69. <el-button plain @click="cancelGraphy">取 消</el-button>
  70. <el-button type="primary" @click="saveRefactorBSP">保存</el-button>
  71. <el-button type="primary" v-show='curZoneItem.isInfected' @click="confirmAndSave">保存并确认业务空间</el-button>
  72. </div>
  73. <!-- 批量创建所选业务空间 -->
  74. <div v-show="type==5">
  75. <el-button type="primary" @click="groupCreateZone">批量创建所选业务空间</el-button>
  76. <el-button plain @click="cancelGraphy">取 消</el-button>
  77. </div>
  78. <div style="position: absolute;right: 10px;">
  79. <el-button type="text" @click="lookUnrelatBSpace(false)">未关联平面图的业务空间 {{num}} 条</el-button>
  80. </div>
  81. </div>
  82. </el-row>
  83. <!-- 底部操作按钮 -->
  84. <el-row class="canvas-actions-box">
  85. <canvasFun @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @undo="undo" @redo="redo"
  86. @changeAbsorb="changeAbsorb" @scale="scale" @groupSelect="groupSelect" :config="config" ref="canvasFun" @saveJson="saveJson"></canvasFun>
  87. </el-row>
  88. </div>
  89. <!-- -->
  90. <!-- 未关联元空间的业务空间 -->
  91. <unRelateBSP ref="unRelateBSP" :isAction="isAction" @createFromUnrelated="createFromUnrelated" :code="tab.code"></unRelateBSP>
  92. <!-- 创建新的业务空间 -->
  93. <createBSP ref="createBSP" @createRoom="createRoom"></createBSP>
  94. <!-- 批量创建选择弹窗 -->
  95. <el-dialog title="提示" :visible.sync="groupCreateDialogVis" width="30%">
  96. <div id="autoRelate">
  97. <p>批量创建面积大于此值的默认空间为业务空间:</p>
  98. <div style="padding:10px 20px;margin:0 0 10px 0;">
  99. <el-slider v-model="areaValue" :marks="areaMarks" :step="10" :format-tooltip='val=>val/100'> </el-slider>
  100. </div>
  101. <p>请选择批量创建方式:</p>
  102. <p>
  103. <el-radio v-model="groupCreateType" :label="1">批量将所有的空白空间创建业务空间</el-radio>
  104. </p>
  105. <p>
  106. <el-radio v-model="groupCreateType" :label="2">批量选择空白空间创建业务空间</el-radio>
  107. </p>
  108. </div>
  109. <span slot="footer" class="dialog-footer">
  110. <el-button size="small" @click="groupCreateDialogVis=false">取消</el-button>
  111. <el-button size="small" type="primary" @click="confirm">确认</el-button>
  112. </span>
  113. </el-dialog>
  114. <dialogZone ref="zone" @createSuccess="getOtherType" />
  115. </div>
  116. </template>
  117. <script>
  118. import canvasFun from "./canvasFun"
  119. import { mapGetters } from "vuex";
  120. import { SPoint } from "@saga-web/draw/lib";
  121. import { DivideFloorScene, FloorView, SpaceItem, ZoneItem } from "@saga-web/cad-engine/lib";
  122. import { colorArr } from "@/utils/spaceColor"
  123. import unRelateBSP from "./unRelateBSP";
  124. import createBSP from "./createBSP";
  125. import dialogZone from "../../ledger/addDialog/dialogZone";
  126. import {
  127. createRelateInZoneAndISp,
  128. getIspNotInSpace,
  129. groupCreRelaZoneAndISp,
  130. queryAllZoneType,
  131. queryZone,
  132. zoneCount,
  133. zoneCreate,
  134. zoneQuery,
  135. zoneUpdate
  136. } from "@/api/scan/request"
  137. export default {
  138. components: {
  139. canvasFun,
  140. unRelateBSP,
  141. createBSP,
  142. dialogZone
  143. },
  144. data() {
  145. return {
  146. canvasWidth: 800,
  147. canvasHeight: 600,
  148. type: 1, // 默认操作模式
  149. search: '',//搜索
  150. buildFloor: ['', ''],
  151. FloorObj: {}, //楼层对象
  152. FloorMap: '', //楼层底图
  153. tab: {},
  154. config: {
  155. isEdit: false,
  156. divide: true,
  157. groupSelect: true
  158. },
  159. canvasLoading: false,
  160. view: null,
  161. scene: null,
  162. Outline: [], // 当前选中的多个空间组成的轮廓线->三维数组
  163. businessSpaceList: [], // 所有业务空间
  164. num: 0, // 未关联元空间的业务空间统计
  165. BSPRelaISPList: [], // 已关联元空间的业务空间
  166. // 未关联元空间的业务空间弹窗
  167. isAction: false,
  168. curOutline: [],
  169. BIMIDToSID: {}, //bimid映射元空间id
  170. BIMIDToSIName: {}, //bimid映射元空间名称
  171. curZoneItem: {}, //当前选中的业务空间item
  172. allUnRelatISP: [], //
  173. zoneList: [], // 业务空间-canvas图中
  174. groupCreateDialogVis: false, //批量创建业务空间弹窗
  175. groupCreateType: 1, //批量创建方式
  176. zoneDisable: true, // 重新划分是否禁用
  177. sourceIdToISP: {},
  178. areaValue: 40,
  179. areaMarks: { 0: '0m²', 100: '1m²' },
  180. options: [], //其他分区类型
  181. OtherValue: '',
  182. showOtherFlag: false, //是否显示其他分区类型添加
  183. }
  184. },
  185. computed: {
  186. ...mapGetters('layout', ['projectId'])
  187. },
  188. created() { },
  189. mounted() {
  190. this.canvasWidth = this.$refs.graphy.offsetWidth - 20;
  191. this.canvasHeight = this.$refs.graphy.offsetHeight - 20;
  192. },
  193. methods: {
  194. // 初始化
  195. init(initType) {
  196. this.type = 1;
  197. if (this.scene) {
  198. this.scene.clearSpaceSelection();
  199. this.scene.clearZoneSelection();
  200. this.scene.clearCut();
  201. this.scene.clearLikeSpaces();
  202. this.zoneDisable = true;
  203. this.scene.isZoneSelectable = true;
  204. this.scene.isSpaceSelectable = false;
  205. }
  206. if (this.buildFloor.indexOf('all') > -1 || this.buildFloor.indexOf('noKnow') > -1) {
  207. return;
  208. }
  209. if (initType == 1) {
  210. // 底图
  211. this.getGraphy();
  212. } else {
  213. // 业务空间
  214. this.getBusinessSpace();
  215. }
  216. this.config = {
  217. isEdit: false,
  218. divide: true,
  219. groupSelect: true
  220. }
  221. // 获取当前楼层的元空间
  222. this.getFloorISpace();
  223. // 查询未关联业务空间的元空间
  224. this.getISPSPUnrelaBSP();
  225. // 查询未关联平面图的业务空间
  226. this.getBSPunrelaISP();
  227. },
  228. // 获取当前楼层的元空间-元空间接口不变
  229. getFloorISpace() {
  230. let pa = {
  231. zone: 'Ispace',
  232. data: {
  233. Filters: `FloorId='${this.buildFloor[1]}'`,
  234. PageSize: 1000
  235. }
  236. }
  237. queryZone(pa, res => {
  238. this.BIMIDToSID = {}
  239. this.BIMIDToSIName = {}
  240. this.sourceIdToISP = {}
  241. res.Content.map(t => {
  242. let key = t.BIMID.split(":")[1];
  243. this.BIMIDToSID[key] = t.RoomID;
  244. this.BIMIDToSIName[key] = t.RoomLocalName || t.RoomName;
  245. this.sourceIdToISP[key] = t;
  246. })
  247. })
  248. },
  249. //添加其他分区
  250. addZoneBtn() {
  251. this.$refs.zone.dialogFormVisible = true
  252. },
  253. // 搜索
  254. querySearch(queryString, cb) {
  255. let restaurants = this.zoneList;
  256. let results = queryString ?
  257. restaurants.filter(this.createFilter(queryString)) :
  258. restaurants;
  259. // 调用 callback 返回建议列表的数据
  260. cb(results);
  261. },
  262. // 过滤器
  263. createFilter(queryString) {
  264. return restaurant => {
  265. return restaurant.data.RoomLocalName.indexOf(queryString) > -1;
  266. };
  267. },
  268. // 查询选中,定位
  269. handleSelect(zone) {
  270. // 清空选中
  271. this.scene.clearSpaceSelection();
  272. this.scene.clearZoneSelection();
  273. // 选中当前
  274. zone.selected = true;
  275. this.curZoneItem = zone;
  276. this.zoneDisable = false;
  277. this.view.fitSelectedToView();
  278. },
  279. // 父组件调用
  280. getData(buildFloor, FloorObj, tab) {
  281. let initType = 1;
  282. if (FloorObj.FloorID == this.FloorObj.FloorID) {
  283. initType = 2;
  284. }
  285. this.buildFloor = buildFloor;
  286. this.FloorObj = FloorObj;
  287. this.FloorMap = FloorObj.StructureInfo ? FloorObj.StructureInfo.FloorMap : ''
  288. this.tab = tab;
  289. console.log(arguments);
  290. if (tab.code == "OtherZone") {
  291. // 其他分区
  292. this.showOtherFlag = true
  293. this.getOtherType();
  294. this.OtherValue = (localStorage.getItem('otherZone')) || ''
  295. } else {
  296. this.showOtherFlag = false;
  297. }
  298. this.init(initType);
  299. },
  300. // 其他分区类型查询
  301. getOtherType() {
  302. let pa = {
  303. Cascade: [{ Name: 'zoneType', Filters: `ProjectId='${this.projectId}'` }],
  304. Filters: `Code="OtherZone"`
  305. }
  306. queryAllZoneType(pa, res => {
  307. if (res.Content[0].ZoneType && res.Content[0].ZoneType.length) {
  308. this.options = res.Content[0].ZoneType.map(t => {
  309. t.value = t.Code;
  310. t.label = t.Name;
  311. return t;
  312. })
  313. } else {
  314. this.options = []
  315. }
  316. })
  317. },
  318. // 其他类型下拉change
  319. changeOtherZone(val) {
  320. this.init(2);
  321. localStorage.setItem('otherZone', val)
  322. },
  323. // 获取未绑定业务空间的元空间
  324. getISPSPUnrelaBSP() {
  325. let pa = {
  326. data: {
  327. Filters: `FloorId='${this.buildFloor[1]}'`,
  328. PageSize: 1000
  329. },
  330. objectType: this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code
  331. }
  332. this.allUnRelatISP = []
  333. getIspNotInSpace(pa, res => {
  334. this.allUnRelatISP = res.Content;
  335. })
  336. },
  337. // 获取底图
  338. getGraphy() {
  339. let that = this;
  340. that.clearGraphy()
  341. that.scene = new DivideFloorScene();
  342. that.canvasLoading = true;
  343. that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.FloorMap}`).then(res => {
  344. that.canvasLoading = false;
  345. if (res == 'error') {
  346. this.FloorMap = '';
  347. this.$message.warning('数据解析异常');
  348. return;
  349. }
  350. that.view.scene = that.scene;
  351. // 蒙版
  352. if (this.FloorObj.Outline) {
  353. let newArr = this.FloorObj.Outline.map(t => {
  354. return new SPoint(t.X, t.Y);
  355. })
  356. this.scene.addSceneMark(newArr)
  357. }
  358. this.scene.isSpaceSelectable = false;
  359. // 绘制业务空间
  360. that.getBusinessSpace();
  361. that.view.fitSceneToView();
  362. that.view.minScale = that.view.scale;
  363. if (that.$refs.canvasFun) {
  364. that.$refs.canvasFun.everyScale = that.view.scale;
  365. }
  366. })
  367. },
  368. // 获取当前分区下的业务空间
  369. getBusinessSpace() {
  370. this.canvasLoading = true
  371. let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
  372. let pa = {
  373. ZoneType: ObjectType,
  374. Filters: `not RoomID isNull`,
  375. Orders: "createTime desc, RoomID asc",
  376. PageSize: 10000
  377. }
  378. if (this.buildFloor.length && this.buildFloor.length > 1) {
  379. pa.BuildingId = this.buildFloor[0];
  380. pa.FloorId = this.buildFloor[1];
  381. }
  382. zoneQuery(pa, res => {
  383. // 所有业务空间
  384. this.businessSpaceList = res.Content;
  385. // 已关联元空间的业务空间
  386. this.BSPRelaISPList = [];
  387. res.Content.map(t => {
  388. if (t.Outline && t.Outline.length) {
  389. this.BSPRelaISPList.push(t)
  390. }
  391. })
  392. // 绘制业务空间
  393. let tempType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
  394. let tempArr = this.BSPRelaISPList.map((t, i) => {
  395. if (t.FloorId == this.buildFloor[1] && t.ObjectType == tempType) {
  396. return {
  397. RoomLocalName: t.RoomLocalName,
  398. OutLine: t.Outline,
  399. RoomID: t.RoomID,
  400. Color: colorArr[i % colorArr.length],
  401. Infected: t.State
  402. }
  403. } else {
  404. console.log('internet slow')
  405. return undefined;
  406. }
  407. }).filter(item => item)
  408. this.scene.removeAllZone();
  409. this.scene.addZoneList(tempArr);
  410. this.scene.click(this, this.canvasClick);
  411. this.zoneList = this.scene.zoneList;
  412. this.view._needDraw = true;
  413. this.canvasLoading = false;
  414. })
  415. },
  416. // canvas点击事件
  417. canvasClick(item, event) {
  418. console.log(item)
  419. console.log(event)
  420. if (this.type == 4) {//重新划分
  421. } else if (this.type == 5) {//批量
  422. } else {
  423. if (item instanceof SpaceItem && item.selectable) {
  424. if (this.type == 2) {
  425. this.scene.clearZoneSelection();
  426. }
  427. this.type = 3;
  428. this.curZoneItem = {};
  429. }
  430. if (item instanceof ZoneItem && item.selectable) {
  431. if (this.type == 3) {
  432. this.scene.clearSpaceSelection();
  433. }
  434. this.zoneDisable = false;
  435. this.curZoneItem = item;
  436. this.scene.clearZoneSelection();
  437. item.selected = true;
  438. this.$emit('copyID', this.curZoneItem.data.RoomID)
  439. }
  440. }
  441. },
  442. // 编辑平面图
  443. editGraphy() {
  444. this.type = 3;
  445. this.config.isEdit = true;
  446. this.config.groupSelect = false;
  447. this.config.divide = true;
  448. this.scene.isSpaceSelectable = true;
  449. // 设置业务空间不可选
  450. this.scene.isZoneSelectable = false
  451. this.view._needDraw = true;
  452. },
  453. // 查看未关联的业务空间--flag--查看-or-选择
  454. lookUnrelatBSpace(flag) {
  455. this.isAction = flag;
  456. let arr = this.scene.getSelectedSpaces();
  457. if (flag && !arr.length) {
  458. this.$message.warning('请至少选择一个空间');
  459. return;
  460. }
  461. this.$refs.unRelateBSP.showDialog();
  462. },
  463. // 取消(所有取消公用)
  464. cancelGraphy() {
  465. this.init(2);
  466. this.$emit('copyID', '')
  467. },
  468. // 批量创建业务空间弹窗
  469. handleCommand(command) {
  470. this.groupCreateDialogVis = true;
  471. },
  472. // 创建弹窗确认
  473. confirm() {
  474. if (this.groupCreateType == 1) {
  475. this.groupCreateBSpace()
  476. } else if (this.groupCreateType == 2) {
  477. this.type = 5;
  478. this.config.isEdit = true;
  479. this.config.groupSelect = true;
  480. this.config.divide = false;
  481. this.groupCreateDialogVis = false;
  482. // 清空选中空间
  483. this.scene.clearSpaceSelection();
  484. // 设置空间可选
  485. this.scene.isSpaceSelectable = true;
  486. // 设置业务空间不可选
  487. this.scene.isZoneSelectable = false;
  488. }
  489. },
  490. // 根据未关联元空间批量创建业务空间
  491. groupCreateBSpace() {
  492. let text = []
  493. let Spaces = this.allUnRelatISP.map(t => {
  494. if (t.Outline) {
  495. let area = 0;
  496. if (t.Outline[0]) {
  497. area = this.getarea(t.Outline[0]);
  498. if (t.Outline.length > 1) {
  499. for (let i = 1; i < t.Outline.length; i++) {
  500. let temp = this.getarea(t.Outline[i]);
  501. area = area - temp
  502. }
  503. }
  504. area = (area / 1000000).toFixed(2);
  505. if (area < (this.areaValue / 100)) {
  506. return undefined
  507. }
  508. } else {
  509. return undefined;
  510. }
  511. text.push(t.RoomLocalName || t.RoomName)
  512. return {
  513. IspaceId: t.RoomID,
  514. RoomLocalName: t.RoomLocalName || t.RoomName,
  515. Outline: [t.Outline],
  516. BuildingId: this.buildFloor[0],
  517. FloorId: this.buildFloor[1],
  518. Height: t.Height || 0
  519. }
  520. } else {
  521. return undefined
  522. }
  523. }).filter(item => item);
  524. if (Spaces.length) {
  525. this.$confirm(
  526. "<p>确定根据未关联业务空间的空间批量创建业务空间</p>" +
  527. "<p>涉及的空间:</p>" +
  528. "<p style='line-height:20px;max-height:60px;overflow-y:auto;'>" +
  529. text.toString() +
  530. "</p>",
  531. "提示", {
  532. dangerouslyUseHTMLString: true,
  533. confirmButtonText: "确定",
  534. cancelButtonText: "取消",
  535. type: "warning"
  536. }
  537. ).then(() => {
  538. this.groupCreateDialogVis = false;
  539. this.canvasLoading = true;
  540. this.groupCreateBSP(Spaces)
  541. }).catch(() => {
  542. this.$message({
  543. type: "info",
  544. message: "已取消批量创建"
  545. });
  546. });
  547. } else {
  548. this.$message('没有未关联的空间')
  549. }
  550. },
  551. // 创建新的业务空间
  552. createNewZone() {
  553. let arr = this.scene.getSelectedSpaces();
  554. if (arr.length) {
  555. let tempArr = [];
  556. arr.map(t => {
  557. tempArr.push(this.BIMIDToSIName[t.data.SourceId]);
  558. })
  559. this.$refs.createBSP.showDialog(tempArr.toString());
  560. } else {
  561. this.$message.warning('请至少选择一个空间');
  562. }
  563. },
  564. // 根据图创建新的业务空间-弹窗返回确认创建
  565. createRoom(val) {
  566. const zoneObj = { Outline: [], Height: 0 }, IspaceIdList = [];
  567. let spaces = {};
  568. if (this.scene.cutItem || this.scene.sceneMark) {
  569. // 如果有划分,求交集
  570. // 格式为Poly(先与业务空间求差集)
  571. const obj = this.scene.getZoneDifference(true);
  572. // 差集与楼层平面图或用户划分区域求交集
  573. spaces = this.scene.getPloyIntersect(obj)
  574. } else {
  575. // 格式为SPoint[]
  576. spaces = this.scene.getZoneDifference();
  577. }
  578. for (let key in spaces) {
  579. spaces[key].map(t => {
  580. let temp = t.map(item => {
  581. return {
  582. X: 1 * item.x.toFixed(2),
  583. Y: -item.y.toFixed(2),
  584. Z: 0
  585. }
  586. })
  587. zoneObj.Outline.push([temp]);
  588. })
  589. let curISP = this.sourceIdToISP[key];
  590. if (curISP) {
  591. curISP && IspaceIdList.push(curISP.RoomID);
  592. zoneObj.Height = zoneObj.Height == 0 ? curISP.Height : zoneObj.Height > curISP.Height ? curISP.Height : zoneObj.Height;
  593. }
  594. }
  595. // 数据计算导致浏览器奔溃,临时注释(测试计算未崩溃改好)
  596. // let zoneObj = { Outline: [], Height: 0 }, IspaceIdList = [];
  597. // let selectSpaces = this.scene.getSelectedSpaces();
  598. // selectSpaces.map(t => {
  599. // zoneObj.Outline.push(t.data.OutLine);
  600. // let key = t.data.SourceId;
  601. // let curISP = this.sourceIdToISP[key];
  602. // if (curISP) {
  603. // IspaceIdList.push(curISP.RoomID);
  604. // zoneObj.Height = zoneObj.Height == 0 ? curISP.Height : zoneObj.Height > curISP.Height ? curISP.Height : zoneObj.Height;
  605. // }
  606. // })
  607. // // 如果有划分,求交集
  608. // if (this.scene.cutItem || this.scene.sceneMark) {
  609. // zoneObj.Outline = [];
  610. // let arr = this.scene.getIntersect();
  611. // arr.map(t => {
  612. // let temp = t.map(item => {
  613. // return {
  614. // X: 1 * item.x,
  615. // Y: -item.y,
  616. // Z: 0
  617. // }
  618. // })
  619. // zoneObj.Outline.push([temp]);
  620. // })
  621. // }
  622. // 至此
  623. if (!zoneObj.Outline.length) {
  624. zoneObj.Outline = null;
  625. }
  626. zoneObj.RoomLocalName = val;
  627. zoneObj.BuildingId = this.buildFloor[0];
  628. zoneObj.FloorId = this.buildFloor[1];
  629. this.createSingleBSP(zoneObj, IspaceIdList)
  630. },
  631. // 根据图从未关联平面图的业务空间中选择--按钮返回关联信号
  632. createFromUnrelated(zoneObj) {
  633. // zoneObj.Outline = [];
  634. // zoneObj.Height = 0;
  635. // let spaces = {}, IspaceIdList = [];
  636. // if (this.scene.cutItem || this.scene.sceneMark) {
  637. // // 如果有划分,求交集
  638. // // 格式为Poly(先与业务空间求差集)
  639. // const obj = this.scene.getZoneDifference(true);
  640. // // 差集与楼层平面图或用户划分区域求交集
  641. // spaces = this.scene.getPloyIntersect(obj)
  642. // } else {
  643. // // 格式为SPoint[]
  644. // spaces = this.scene.getZoneDifference();
  645. // }
  646. // for (let key in spaces) {
  647. // spaces[key].map(t => {
  648. // let temp = t.map(item => {
  649. // return {
  650. // X: 1 * item.x.toFixed(2),
  651. // Y: -item.y.toFixed(2),
  652. // Z: 0
  653. // }
  654. // })
  655. // zoneObj.Outline.push([temp]);
  656. // })
  657. // let curISP = this.sourceIdToISP[key];
  658. // if(curISP){
  659. // curISP && IspaceIdList.push(curISP.RoomID);
  660. // zoneObj.Height = zoneObj.Height == 0 ? curISP.Height : zoneObj.Height > curISP.Height ? curISP.Height : zoneObj.Height;
  661. // }
  662. // }
  663. // 改回之前逻辑
  664. zoneObj.Outline = [];
  665. zoneObj.Height = 0;
  666. let spaces = {}, IspaceIdList = [];
  667. let selectSpaces = this.scene.getSelectedSpaces();
  668. selectSpaces.map(t => {
  669. zoneObj.Outline.push(t.data.OutLine);
  670. let key = t.data.SourceId;
  671. let curISP = this.sourceIdToISP[key];
  672. if (curISP) {
  673. curISP && IspaceIdList.push(curISP.RoomID);
  674. zoneObj.Height = zoneObj.Height == 0 ? curISP.Height : zoneObj.Height > curISP.Height ? curISP.Height : zoneObj.Height;
  675. }
  676. })
  677. // 如果有划分,求交集
  678. if (this.scene.cutItem || this.scene.sceneMark) {
  679. zoneObj.Outline = [];
  680. let arr = this.scene.getIntersect();
  681. arr.map(t => {
  682. let temp = t.map(item => {
  683. return {
  684. X: 1 * item.x,
  685. Y: -item.y,
  686. Z: 0
  687. }
  688. })
  689. zoneObj.Outline.push([temp]);
  690. })
  691. }
  692. if (!zoneObj.Outline.length) {
  693. zoneObj.Outline = null;
  694. }
  695. this.updateBSPOutline(zoneObj, IspaceIdList)
  696. },
  697. // 编辑空间详情
  698. editeSpaceDetail() {
  699. let item = this.curZoneItem.data;
  700. let query = {
  701. RoomID: item.RoomID,
  702. zone: this.tab.code,
  703. isMyTab: 1,
  704. buildFloorSelectd: this.buildFloor
  705. }
  706. this.$router.push({
  707. path: "/ledger/spaceDetail",
  708. query: query
  709. })
  710. },
  711. // 重新划分业务空间
  712. refactorBSP() {
  713. this.config.isEdit = true;
  714. this.config.groupSelect = false;
  715. this.config.divide = true;
  716. this.type = 4;
  717. // 设置空间可选
  718. this.scene.isSpaceSelectable = true;
  719. // 将已关联的设置不可选,并将当前选的隐藏
  720. this.scene.isZoneSelectable = false;
  721. this.curZoneItem.visible = false;
  722. // 将当前业务空间的每个元素添加到场景中并选中
  723. this.scene.addAllLikeSpace(this.curZoneItem.data.OutLine);
  724. },
  725. // 确认业务空间
  726. confirmZoneSpace() {
  727. let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
  728. let space = {
  729. RoomID: this.curZoneItem.data.RoomID,
  730. State: 0,
  731. ObjectType: ObjectType
  732. }
  733. let pa = {
  734. Content: [space],
  735. Projection: ['State']
  736. }
  737. zoneUpdate(pa, res => {
  738. this.curZoneItem.isInfected = false;
  739. this.$emit('updateState');
  740. this.$message.success('更新成功');
  741. })
  742. },
  743. // 保存并确认业务空间
  744. confirmAndSave() {
  745. this.confirmAndSaveFlag = true;
  746. this.saveRefactorBSP();
  747. },
  748. // 重新划分--保存
  749. saveRefactorBSP() {
  750. let selectSpace = this.scene.getSelectedSpaces();
  751. let selectLikeSpace = this.scene.getSelectedLikeSpace();
  752. //更新业务空间
  753. let zoneObj = { Outline: [], Height: 0, State: this.confirmAndSaveFlag ? 0 : this.curZoneItem.isInfected ? 1 : 0 }, IspaceIdList = [];
  754. // 空间
  755. selectSpace.map(t => {
  756. zoneObj.Outline.push(t.data.OutLine);
  757. if (this.BIMIDToSID[t.data.SourceId]) {
  758. IspaceIdList.push(this.BIMIDToSID[t.data.SourceId]);
  759. }
  760. if (t.Height && (zoneObj.Height == 0 || t.Height < zoneObj.Height)) {
  761. zoneObj.Height = t.Height > 100 ? (t.Height / 1000).toFixed(2) : t.Height;
  762. }
  763. })
  764. // 类空间
  765. selectLikeSpace.map(t => {
  766. zoneObj.Outline.push(t.data);
  767. })
  768. // 如果有划分,求交集
  769. if (this.scene.cutItem || this.scene.sceneMark) {
  770. zoneObj.Outline = [];
  771. let spaceIntersect = this.scene.getIntersect();
  772. spaceIntersect.map(t => {
  773. let temp = t.map(item => {
  774. return {
  775. X: item.x,
  776. Y: -item.y,
  777. Z: 0
  778. }
  779. })
  780. zoneObj.Outline.push([temp]);
  781. })
  782. let likeSpaceIntersect = this.scene.getLikeIntersect();
  783. likeSpaceIntersect.map(t => {
  784. let temp = t.map(item => {
  785. return {
  786. X: item.x,
  787. Y: -item.y,
  788. Z: 0
  789. }
  790. })
  791. zoneObj.Outline.push([temp]);
  792. })
  793. }
  794. if (!zoneObj.Outline.length) {
  795. zoneObj.Outline = null;
  796. }
  797. zoneObj.RoomID = this.curZoneItem.data.RoomID;
  798. this.updateBSPOutline(zoneObj, IspaceIdList)
  799. },
  800. // 根据图批量创建所选业务空间
  801. groupCreateZone() {
  802. let arr = this.scene.getSelectedSpaces();
  803. let createSpaces = [], spaces = {};
  804. if (this.scene.cutItem || this.scene.sceneMark) {
  805. // 如果有划分,求交集
  806. // 格式为Poly(先与业务空间求差集)
  807. const obj = this.scene.getZoneDifference(true);
  808. // 差集与楼层平面图或用户划分区域求交集
  809. spaces = this.scene.getPloyIntersect(obj)
  810. } else {
  811. // 格式为SPoint[]
  812. spaces = this.scene.getZoneDifference();
  813. }
  814. for (let key in spaces) {
  815. let zoneObj = { Outline: [], Height: 0 }
  816. spaces[key].map(t => {
  817. let temp = t.map(item => {
  818. return {
  819. X: 1 * item.x.toFixed(2),
  820. Y: -item.y.toFixed(2),
  821. Z: 0
  822. }
  823. })
  824. zoneObj.Outline.push([temp]);
  825. })
  826. if (!zoneObj.Outline.length) {
  827. continue
  828. }
  829. //计算面积
  830. let area = 0, line = zoneObj.Outline;
  831. for (let i = 0; i < line.length; i++) {
  832. for (let j = 0; j < line[i].length; j++) {
  833. if (j == 0) {
  834. area += this.getarea(line[i][0]);
  835. } else {
  836. area -= this.getarea(line[i][j]);
  837. }
  838. }
  839. }
  840. area = (area / 1000000).toFixed(2);
  841. if (area < (this.areaValue / 100)) {
  842. continue
  843. }
  844. //生成空间对象
  845. let curISP = this.sourceIdToISP[key];
  846. if (curISP) {
  847. zoneObj.Height = zoneObj.Height == 0 ? curISP.Height : zoneObj.Height > curISP.Height ? curISP.Height : zoneObj.Height;
  848. zoneObj.IspaceId = curISP.RoomID;
  849. zoneObj.RoomLocalName = curISP.RoomLocalName;
  850. }
  851. zoneObj.BuildingId = this.buildFloor[0];
  852. zoneObj.FloorId = this.buildFloor[1];
  853. createSpaces.push(zoneObj);
  854. }
  855. // 改回之前逻辑
  856. // let arr = this.scene.getSelectedSpaces();
  857. // let createSpaces = [];
  858. // // 如果有划分,求交集
  859. // if (this.scene.cutItem || this.scene.sceneMark) {
  860. // let outlines = this.scene.getIntersectInSpace();
  861. // for (let k in outlines) {
  862. // outlines[k] = outlines[k].map(t => {
  863. // t = t.map(item => {
  864. // item = item.map(j => {
  865. // return { X: j.x, Y: -j.y, Z: 0 }
  866. // })
  867. // return item
  868. // })
  869. // return t;
  870. // })
  871. // }
  872. // createSpaces = arr.map(t => {
  873. // let line = outlines[t.data.SourceId];
  874. // if (!line || !line.length) {
  875. // return undefined
  876. // } else {
  877. // let area = 0;
  878. // for (let i = 0; i < line.length; i++) {
  879. // for (let j = 0; j < line[i].length; j++) {
  880. // if (j == 0) {
  881. // area += this.getarea(line[i][0]);
  882. // } else {
  883. // area -= this.getarea(line[i][j]);
  884. // }
  885. // }
  886. // }
  887. // area = (area / 1000000).toFixed(2);
  888. // if (area < (this.areaValue / 100)) {
  889. // return undefined;
  890. // }
  891. // }
  892. // return {
  893. // IspaceId: this.BIMIDToSID[t.data.SourceId],
  894. // RoomLocalName: this.BIMIDToSIName[t.data.SourceId],
  895. // Outline: line,
  896. // BuildingId: this.buildFloor[0],
  897. // FloorId: this.buildFloor[1],
  898. // Height: t.data.Height > 100 ? (t.data.Height / 1000).toFixed(2) : t.data.Height || 0
  899. // }
  900. // }).filter(item => item)
  901. // } else {
  902. // createSpaces = arr.map(t => {
  903. // let line = t.data.OutLine;
  904. // if (!line || !line.length) {
  905. // return undefined
  906. // } else {
  907. // let area = this.getarea(line[0]);
  908. // if (line.length > 1) {
  909. // for (let i = 1; i < line.length; i++) {
  910. // area -= this.getarea(line[i]);
  911. // }
  912. // }
  913. // area = (area / 1000000).toFixed(2);
  914. // if (area < (this.areaValue / 100)) {
  915. // return undefined;
  916. // }
  917. // }
  918. // return {
  919. // IspaceId: this.BIMIDToSID[t.data.SourceId],
  920. // RoomLocalName: this.BIMIDToSIName[t.data.SourceId],
  921. // Outline: [line],
  922. // BuildingId: this.buildFloor[0],
  923. // FloorId: this.buildFloor[1],
  924. // Height: t.data.Height > 100 ? (t.data.Height / 1000).toFixed(2) : t.data.Height || 0
  925. // }
  926. // }).filter(item => item);
  927. // }
  928. if (createSpaces.length) {
  929. this.canvasLoading = true;
  930. this.groupCreateBSP(createSpaces)
  931. } else {
  932. this.$message.warning('未选择空间');
  933. }
  934. },
  935. // 更新业务空间和元空间的关系
  936. relationInBSPandISP(SpaceId, IspaceIdList) {
  937. let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
  938. let pa = {
  939. data: { SpaceId: SpaceId, IspaceIdList: IspaceIdList },
  940. type: ObjectType
  941. }
  942. createRelateInZoneAndISp(pa, res => {
  943. this.$message.success('创建成功');
  944. this.init(2);
  945. if (this.confirmAndSaveFlag) {
  946. this.confirmAndSaveFlag = false;
  947. this.curZoneItem.selected = false;
  948. this.curZoneItem = {};
  949. this.$emit('updateState');
  950. }
  951. })
  952. },
  953. // 批量更新业务空间和元空间的关系
  954. groupCreRelaZoneAndISp(Spaces) {
  955. Spaces = Spaces.filter(item => item.IspaceId);
  956. let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
  957. if (Spaces.length) {
  958. let param = {
  959. data: {
  960. Content: Spaces
  961. },
  962. type: ObjectType
  963. }
  964. groupCreRelaZoneAndISp(param, res => {
  965. this.$message.success('创建成功')
  966. this.canvasLoading = false;
  967. this.init(2)
  968. })
  969. } else {
  970. this.$message.success('创建成功')
  971. this.canvasLoading = false;
  972. this.init(2)
  973. }
  974. },
  975. // 批量创建
  976. groupCreateBSP(spaces) {
  977. let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
  978. spaces = spaces.map(t => {
  979. t.ObjectType = ObjectType;
  980. t.BIMLocation = this.getAverageVal(t.Outline);
  981. return t;
  982. })
  983. let pa = {
  984. Content: spaces,
  985. }
  986. zoneCreate(pa, res => {
  987. res.EntityList.map(t => {
  988. spaces = spaces.map(item => {
  989. if (t.RoomLocalName == item.RoomLocalName) {
  990. item.SpaceId = t.RoomID
  991. }
  992. return item;
  993. })
  994. })
  995. this.groupCreRelaZoneAndISp(spaces)
  996. })
  997. },
  998. // 单个创建
  999. createSingleBSP(space, IspaceIdList) {
  1000. let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
  1001. space.BIMLocation = space.Outline ? this.getAverageVal(space.Outline) : null;
  1002. space.ObjectType = ObjectType;
  1003. let pa = {
  1004. Content: [space]
  1005. }
  1006. zoneCreate(pa, res => {
  1007. this.relationInBSPandISP(res.EntityList[0].RoomID, IspaceIdList)
  1008. })
  1009. },
  1010. // 更新业务空间区域
  1011. updateBSPOutline(zoneObj, IspaceIdList) {
  1012. let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
  1013. zoneObj.BIMLocation = zoneObj.Outline ? this.getAverageVal(zoneObj.Outline) : null;
  1014. zoneObj.ObjectType = ObjectType;
  1015. let pa = {
  1016. Content: [zoneObj]
  1017. }
  1018. zoneUpdate(pa, res => {
  1019. this.relationInBSPandISP(zoneObj.RoomID, IspaceIdList)
  1020. })
  1021. },
  1022. // 查询未关联平面图的业务空间(项目下+当前分区)
  1023. getBSPunrelaISP() {
  1024. let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
  1025. let pa = {
  1026. Filters: `Outline isNull;ObjectType="${ObjectType}"`
  1027. }
  1028. zoneCount(pa, res => {
  1029. this.num = res.Count;
  1030. })
  1031. },
  1032. // 计算平均值 作为业务空间BIMLocation
  1033. getAverageVal(Outline) {
  1034. let X = 0, Y = 0, Z = 0, len = 0;
  1035. Outline.map(t => {
  1036. if (t[0]) {
  1037. t[0].map(item => {
  1038. X += item.X;
  1039. Y += item.Y;
  1040. Z += item.Z;
  1041. })
  1042. len += t[0].length
  1043. }
  1044. })
  1045. X = (X / len).toFixed(2);
  1046. Y = (Y / len).toFixed(2);
  1047. Z = (Z / len).toFixed(2);
  1048. return `${X},${Y},${Z}`
  1049. },
  1050. // 计算面积
  1051. getarea(arr) {
  1052. if (!arr.length) {
  1053. return 0;
  1054. }
  1055. let sum = 0;
  1056. let n = arr.length;
  1057. arr[n] = arr[0];
  1058. for (let i = 1; i <= n; i++) {
  1059. sum += arr[i].X * arr[i - 1].Y - arr[i - 1].X * arr[i].Y;
  1060. }
  1061. return Math.abs(sum / 2)
  1062. },
  1063. // canvas 获取焦点
  1064. focus() {
  1065. document.getElementById(`floorCanvas`).focus()
  1066. },
  1067. // 清除canvas
  1068. clearGraphy() {
  1069. if (this.view) {
  1070. this.view.scene = null;
  1071. return
  1072. }
  1073. this.view = new FloorView('floorCanvas')
  1074. },
  1075. // 工具栏操作
  1076. // 吸附
  1077. changeAbsorb(isAbsorbing) {
  1078. this.scene.isAbsorbing = isAbsorbing;
  1079. },
  1080. // 框选
  1081. groupSelect() {
  1082. this.scene.isRectSelection = 1;
  1083. },
  1084. // 适配底图到窗口
  1085. fit() {
  1086. this.view.fitSceneToView()
  1087. },
  1088. // 保存为png
  1089. savePng() {
  1090. this.view.saveImage(`${this.buildFloor[1]}.png`, 'png');
  1091. },
  1092. // 保存为svg
  1093. saveSvg() {
  1094. this.view.saveSceneSvg(`${this.buildFloor[1]}.svg`, 6400, 4800);
  1095. },
  1096. // 保存json
  1097. saveJson() {
  1098. this.view.saveFloorJson(`${this.buildFloor[1]}.json`)
  1099. },
  1100. // 切割划分
  1101. divide() {
  1102. this.scene.isCutting = true;
  1103. },
  1104. // 清除切割划分
  1105. clearDivide() {
  1106. this.scene.clearCut();
  1107. },
  1108. // 撤销
  1109. undo() { },
  1110. // 反撤销
  1111. redo() { },
  1112. // 缩放
  1113. scale(val) {
  1114. if (!this.view) {
  1115. return;
  1116. }
  1117. let scale = this.view.scale;
  1118. this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2);
  1119. },
  1120. },
  1121. filters: {
  1122. cutString: function (str, len) {
  1123. //length属性读出来的汉字长度为1
  1124. if (!!str && typeof str == "string" && str.length > len) {
  1125. return str.substring(0, len) + "...";
  1126. } else {
  1127. return str || "--";
  1128. }
  1129. }
  1130. },
  1131. watch: {
  1132. projectId() {
  1133. this.FloorMap = '';
  1134. this.tab = {};
  1135. },
  1136. "view.scale": {
  1137. handler(n) {
  1138. if (this.$refs.canvasFun) {
  1139. let s = n * 10 / this.view.minScale
  1140. this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
  1141. }
  1142. }
  1143. },
  1144. "scene.isRectSelection": {
  1145. handler(n) {
  1146. if (!n) {
  1147. this.$refs.canvasFun.active = '';
  1148. }
  1149. }
  1150. },
  1151. "scene.isCutting": {
  1152. handler(n) {
  1153. if (!n) {
  1154. this.$refs.canvasFun.active = '';
  1155. this.$refs.canvasFun.isSwitch = false;
  1156. this.scene.isAbsorbing = false;
  1157. }
  1158. }
  1159. },
  1160. }
  1161. }
  1162. </script>
  1163. <style lang="less" scoped>
  1164. #graphy {
  1165. position: relative;
  1166. width: 100%;
  1167. box-sizing: border-box;
  1168. padding: 0 10px 10px;
  1169. height: calc(100% - 56px);
  1170. .canvas-box {
  1171. width: 100%;
  1172. height: 100%;
  1173. }
  1174. .buttons-box {
  1175. position: absolute;
  1176. top: 0;
  1177. left: 0;
  1178. padding: 0 10px;
  1179. width: 100%;
  1180. z-index: 999;
  1181. & > div {
  1182. float: left;
  1183. }
  1184. /deep/ .el-autocomplete {
  1185. display: inline-block;
  1186. width: 320px;
  1187. margin-right: 10px;
  1188. }
  1189. .button-group button,
  1190. .button-group .el-dropdown {
  1191. display: block;
  1192. float: left;
  1193. }
  1194. .my-autocomplete {
  1195. li {
  1196. line-height: normal;
  1197. padding: 7px;
  1198. .name {
  1199. text-overflow: ellipsis;
  1200. overflow: hidden;
  1201. }
  1202. .addr {
  1203. font-size: 12px;
  1204. color: #b4b4b4;
  1205. }
  1206. .highlighted .addr {
  1207. color: #ddd;
  1208. }
  1209. }
  1210. }
  1211. }
  1212. .canvas-actions-box {
  1213. position: absolute;
  1214. bottom: 60px;
  1215. left: 50%;
  1216. transform: translateX(-50%);
  1217. z-index: 99;
  1218. }
  1219. #autoRelate {
  1220. /deep/ .el-slider__marks-text:nth-child(2) {
  1221. width: 25px;
  1222. }
  1223. }
  1224. }
  1225. </style>