home.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856
  1. <template>
  2. <el-container class="home">
  3. <!-- 顶部导航栏 -->
  4. <el-header class="header">
  5. <Select
  6. width="200"
  7. radius
  8. v-model="projectId"
  9. @change="testClick"
  10. :selectdata="projectList"
  11. :placeholder="'请选择'"
  12. :hideClear="true"
  13. />
  14. <DropDownButton
  15. @click="createCanvas"
  16. type="primary"
  17. drop-down-type="split-drop"
  18. interactive="tap"
  19. :drop-down-list="dropDownList"
  20. @input="batchCreateCanvas"
  21. >新建画布</DropDownButton
  22. >
  23. <!-- <el-popover placement="bottom" width="320" v-model="popVisible" popper-class="createPopper" trigger="manual">
  24. <p>点击这里即可快速创建画布。</p>
  25. <div style="text-align: right; margin: 0">
  26. <el-button size="mini" type="text" @click="popVisible=false">我知道了</el-button>
  27. </div>
  28. </el-popover> -->
  29. </el-header>
  30. <!-- body部分 -->
  31. <el-container class="bodys">
  32. <!-- 左侧树状导航栏部分 -->
  33. <el-aside class="aside" width="240px">
  34. <left-folder
  35. ref="leftFolder"
  36. @changeFolder="changeFolder"
  37. ></left-folder>
  38. <!--
  39. <div class="recycle" @click="showRecycleDialog">
  40. <img :src="require('@/assets/images/recycle.png')" />
  41. <span>回收站</span>
  42. </div> -->
  43. </el-aside>
  44. <!-- 展示部分 -->
  45. <el-main class="main">
  46. <div class="main-head" v-if="noTreeFlag">
  47. <div class="showType" v-show="!selectCard.length">
  48. <el-radio-group v-model="isPub" size="small" @change="changePub">
  49. <el-radio-button :label="1">已发布</el-radio-button>
  50. <el-radio-button :label="0">未发布</el-radio-button>
  51. </el-radio-group>
  52. <div class="head-right">
  53. <el-input
  54. placeholder="搜索"
  55. prefix-icon="el-icon-search"
  56. size="small"
  57. v-model="queryText"
  58. @keyup.native.enter="changeQueryText"
  59. clearable
  60. @clear="changeQueryText"
  61. >
  62. </el-input>
  63. <!-- 不显示筛选下拉框 -->
  64. <!-- <Dropdown class="Dropdown" v-model="selVal" :data="dataSelect">
  65. <span class="drop-text">{{ selText }}</span>
  66. </Dropdown> -->
  67. </div>
  68. </div>
  69. <div class="showAction" v-show="selectCard.length">
  70. <el-checkbox
  71. v-model="checkAll"
  72. :indeterminate="isIndeterminate"
  73. @change="handleCheckAllChange"
  74. >全选</el-checkbox
  75. >
  76. <span style="margin-left: 10px">|</span>
  77. <span class="sum"
  78. >已选择<span style="color: #252b30; margin: 0 5px">{{
  79. selectCard.length
  80. }}</span
  81. >项目</span
  82. >
  83. <el-button size="mini" @click="groupMove">移动到</el-button>
  84. <!-- <el-button size="mini" @click="groupDownload" v-if="isPub">下载</el-button> -->
  85. <el-button size="mini" @click="groupDelete">删除</el-button>
  86. <i
  87. class="el-icon-close"
  88. style="float: right; line-height: 28px; margin-right: 5px"
  89. @click="handleCheckAllChange(false)"
  90. ></i>
  91. </div>
  92. </div>
  93. <div class="main-body" v-loading="cardLoading">
  94. <div class="has-data-body" v-if="cardTree.length">
  95. <div
  96. class="building"
  97. v-for="buildingData in cardTree"
  98. :key="buildingData.buildingId"
  99. >
  100. <!-- 建筑名称 -->
  101. <p class="buinding-name">
  102. <span class="border-left"></span> {{ buildingData.localName }}
  103. </p>
  104. <div
  105. class="floor"
  106. v-for="floor in buildingData.floorList"
  107. :key="floor.floorId"
  108. >
  109. <!-- 楼层名称 -->
  110. <p class="floor-name">{{ floor.localName }}</p>
  111. <template v-for="t in floor.planarGraphList">
  112. <planImageCard
  113. :isPub="isPub"
  114. :data="t"
  115. :key="`${Math.random()}_${t.id}`"
  116. @changeCheck="changeCheck"
  117. @rename="rename"
  118. @publishSuc="updateSuc"
  119. @moveTo="moveTo"
  120. @delete="deleteGraph"
  121. @editTag="editTag"
  122. @toEdit="toEdit(t, floor.localName, floor.infos || {})"
  123. @download="download"
  124. ></planImageCard>
  125. </template>
  126. </div>
  127. </div>
  128. </div>
  129. <div class="no-data-body" v-else style="margin-top: 112px">
  130. <img
  131. src="@/assets/images/no-data.png"
  132. style="width: 116px; height: 116px"
  133. />
  134. <p style="font-size: 16px; margin-top: 15px">暂无数据</p>
  135. </div>
  136. </div>
  137. </el-main>
  138. </el-container>
  139. <!-- 创建画布 -->
  140. <createPlanarDialog
  141. ref="createPlanarDialog"
  142. @createPlanar="createPlanarCallback"
  143. ></createPlanarDialog>
  144. <!-- 重命名 -->
  145. <rename ref="rename" :isPub="isPub" @updateSuc="updateSuc"></rename>
  146. <!-- 移动到 -->
  147. <move ref="move" :isPub="isPub" @moveSuc="moveSuc"></move>
  148. <!-- 删除二次确认 -->
  149. <deleteDialog
  150. ref="deleteDialog"
  151. :isPub="isPub"
  152. @deleteSuc="deleteSuc"
  153. ></deleteDialog>
  154. <!-- 修改标签 -->
  155. <tagDialog
  156. ref="tagDialog"
  157. :isPub="isPub"
  158. @updateSuc="updateSuc"
  159. ></tagDialog>
  160. <!-- 回收站全屏弹窗 -->
  161. <recycle ref="recycle" @recycleDialogClose="recycleDialogClose"></recycle>
  162. <!-- <equipment-deatil /> -->
  163. </el-container>
  164. </template>
  165. <script>
  166. import { Select, DropDownButton } from "meri-design";
  167. import leftFolder from "@/components/homeView/leftFolder.vue";
  168. import planImageCard from "@/components/homeView/planImageCard.vue";
  169. import {
  170. planerQuery,
  171. pubPlanerQuery,
  172. planerRead,
  173. pubPlanerRead,
  174. planerSave,
  175. } from "@/api/labsl";
  176. import rename from "@/components/homeView/rename";
  177. import move from "@/components/homeView/move";
  178. import deleteDialog from "@/components/homeView/deleteDialog";
  179. import tagDialog from "@/components/homeView/tagDialog";
  180. import recycle from "@/components/homeView/recycle";
  181. import createPlanarDialog from "@/components/homeView/createPlanarDialog";
  182. import { SNetUtil } from "@persagy-web/base";
  183. import { mapState, mapMutations } from "vuex";
  184. const projectList = window.__systemConf.projectList;
  185. export default {
  186. name: "home",
  187. components: {
  188. Select,
  189. // Dropdown,
  190. DropDownButton,
  191. planImageCard,
  192. rename,
  193. move,
  194. deleteDialog,
  195. recycle,
  196. tagDialog,
  197. createPlanarDialog,
  198. leftFolder,
  199. // equipmentDeatil,
  200. },
  201. data() {
  202. return {
  203. chooseProjectId: this.projectId,
  204. projectList, // 项目列表
  205. dropDownList: [
  206. {
  207. id: "batch",
  208. name: "批量新建",
  209. disabled: true,
  210. },
  211. ],
  212. selVal: "lastUpdate", // 排序方式
  213. selText: "按最后修改", // 排序方式文字
  214. dataSelect: [
  215. { id: "lastUpdate", name: "按最后修改" },
  216. { id: "name", name: "按字母顺序" },
  217. { id: "createTime", name: "按创建时间" },
  218. ], // 排序选项
  219. queryText: "", // 搜索文字
  220. isPub: 1, // 发布类型()
  221. cardTree: [], // 当前显示的卡片树
  222. cardList: [], //卡片平铺树
  223. checkAll: false, // 全选
  224. selectCard: [], // 当前选中的卡片列表
  225. isIndeterminate: true, // 全选按钮
  226. curCategory: {}, // 当前选中的树节点
  227. noTreeFlag: true, // 左侧树是否有数据-默认有
  228. popVisible: true,
  229. categoryName: "", // 跳转编辑页面时分类名称
  230. imgUrl: "/image-service/common/image_get?systemId=dataPlatform&key=",
  231. cardLoading: false,
  232. folderId: "", //文件夹id
  233. folderName: "", //文件夹名称
  234. };
  235. },
  236. computed: {
  237. ...mapState(["showCheckbox"]),
  238. projectId: {
  239. get() {
  240. return this.$store.state.projectId;
  241. },
  242. set(newV, oldV) {
  243. this.SETPROJECTID(newV);
  244. this.$refs.leftFolder.getFolderData();
  245. },
  246. },
  247. },
  248. methods: {
  249. ...mapMutations(["SETCARDSHOWCHECKBOX", "SETPROJECTID"]),
  250. testClick(data) {
  251. // console.log(data);
  252. // this.SETPROJECTID(data.id)
  253. },
  254. // 创建画布
  255. createCanvas() {
  256. this.$refs.createPlanarDialog.showDialog();
  257. },
  258. // 新建画布成功回调
  259. createPlanarCallback(folder) {
  260. console.log("=============");
  261. console.log(folder);
  262. console.log("=============");
  263. /**
  264. * 1.
  265. * folderId: "894983e26c20464e8c2e7d349d5bbc48"
  266. folderName: undefined
  267. 2.
  268. folderId: "1cb3aa7281724617b05e60f494dd58e0"
  269. folderName: "dfas"
  270. */
  271. // TODO: 编辑器开发完后后解开注释
  272. /* this.$router.push({
  273. name: "Editer",
  274. query: {
  275. graphId: folder.graphId,
  276. id: folder.id,
  277. // categoryName: encodeURI(this.categoryName),
  278. isPub: 0, //新建的是未发布的
  279. },
  280. });
  281. // 不进行文件夹的定位
  282. return true; */
  283. if (folder.folderId) {
  284. this.folderId = folder.folderId;
  285. // 是否新建文件夹
  286. if (folder.folderName) {
  287. this.folderName = folder.folderName;
  288. // 新建文件夹
  289. this.$refs.leftFolder.getFolderData(folder.folderId);
  290. } else {
  291. this.$refs.leftFolder.handleCheckFolder(folder.folderId);
  292. }
  293. // 选中未发布,查询列表
  294. this.isPub = 0;
  295. this.queryGraph();
  296. }
  297. },
  298. // 批量新建画布
  299. batchCreateCanvas(val) {
  300. alert(`批量创建画布${val}`);
  301. },
  302. // 选项改变
  303. changeCheck(v) {
  304. // 获取该对象在选中数组中的下标(按照id匹配)
  305. const index = this._.findIndex(this.selectCard, ["id", v.id]);
  306. if (index !== -1) {
  307. this.selectCard.splice(index, 1);
  308. } else {
  309. this.selectCard.push(v);
  310. }
  311. this.isIndeterminate =
  312. Boolean(this.selectCard.length) &&
  313. this.selectCard.length < this.cardList.length;
  314. this.checkAll = this.selectCard.length === this.cardList.length;
  315. },
  316. // 全选按钮
  317. handleCheckAllChange(val) {
  318. let cardTree = [];
  319. cardTree = this.cardTree.map((building) => {
  320. building?.floorList?.map((_floor) => {
  321. _floor?.planarGraphList?.map((card) => {
  322. card.checked = val;
  323. });
  324. return _floor;
  325. });
  326. return building;
  327. });
  328. this.cardTree = cardTree;
  329. if (val) {
  330. this.selectCard = this._.cloneDeep(this.cardList);
  331. } else {
  332. this.selectCard = [];
  333. }
  334. this.isIndeterminate = false;
  335. },
  336. // 批量移动到
  337. groupMove() {
  338. this.$refs.move.showDialog(this.selectCard);
  339. },
  340. // 批量下载
  341. groupDownload() {
  342. if (this.selectCard.length) {
  343. this.selectCard.forEach((t) => {
  344. this.download(t);
  345. });
  346. }
  347. },
  348. // 单独下载
  349. download(data) {
  350. if (data.pic) {
  351. SNetUtil.downLoad(data.name + ".png", this.imgUrl + data.pic);
  352. } else {
  353. // this.$message.warning(`${data.name}未绘制`)
  354. }
  355. },
  356. // 删除
  357. groupDelete() {
  358. this.$refs.deleteDialog.showDialog(this.selectCard);
  359. },
  360. // 重命名
  361. rename(data) {
  362. this.$refs.rename.showDialog(data);
  363. },
  364. // 移动到
  365. moveTo(data) {
  366. this.$refs.move.showDialog([data]);
  367. },
  368. // 单独删除
  369. deleteGraph(data) {
  370. this.$refs.deleteDialog.showDialog([data]);
  371. },
  372. // 更新成功-发布成功
  373. updateSuc() {
  374. this.queryGraph();
  375. },
  376. // 卡片移动事件
  377. moveSuc() {
  378. this.queryGraph();
  379. },
  380. // 删除成功
  381. deleteSuc() {
  382. this.queryGraph();
  383. },
  384. /**
  385. * 更改选中的文件夹
  386. */
  387. changeFolder(data) {
  388. console.log(data);
  389. // 清空搜索值
  390. this.queryText = "";
  391. // 如果没有文件夹数据,清空页面数据
  392. if (!data) {
  393. this.cardTree = [];
  394. this.cardList = [];
  395. this.folderId = "";
  396. return true;
  397. }
  398. this.folderId = data.id;
  399. this.folderName = data.name;
  400. this.queryGraph();
  401. },
  402. // 发布修改
  403. changePub() {
  404. this.queryGraph();
  405. },
  406. // 修改标签
  407. editTag(data) {
  408. this.$refs.tagDialog.showDialog(data);
  409. },
  410. // 输入内容变化
  411. changeQueryText() {
  412. this.queryGraph();
  413. },
  414. // 回收站点击
  415. showRecycleDialog() {
  416. this.$refs.recycle.showDialog();
  417. },
  418. // 回收站关闭
  419. recycleDialogClose() {
  420. this.queryGraph();
  421. },
  422. /**
  423. * 跳转编辑器
  424. */
  425. toEdit(data, floorLocalName, infos) {
  426. const { name, id, graphId, buildingId, floorId, version, state } = data,
  427. { floorMap = "" } = infos,
  428. { folderId, folderName } = this;
  429. // 已发布
  430. if (state === "Publish") {
  431. return this.handlePubImgCard(id, graphId, floorLocalName, floorMap);
  432. }
  433. // 未发布,直接跳转编辑器
  434. let routeUrl = this.$router.resolve({
  435. name: "Editer",
  436. query: {
  437. folderId,
  438. folderName,
  439. buildingId,
  440. floorId,
  441. floorLocalName,
  442. name,
  443. id,
  444. graphId,
  445. floorMap,
  446. version,
  447. projectId: this.projectId,
  448. },
  449. });
  450. window.open(routeUrl.href, "_blank");
  451. },
  452. /**
  453. * 点击已发布卡片.逻辑处理:
  454. * 如果在未发布中,有当前已发布的图的草稿,使用改未发布的草稿进行跳转
  455. * 没有的话,调用保存接口,生成一张未发布的草稿,使用该草稿进行跳转
  456. *
  457. * @param {string} id 图id
  458. * @param {string} graphId 图graphId
  459. * @param {string} floorLocalName 楼层本地名称
  460. * @param {string} floorMap floorMap
  461. */
  462. async handlePubImgCard(id, graphId, floorLocalName, floorMap) {
  463. // 留 id,floorLocalName,floorMap
  464. const { folderId, folderName } = this;
  465. const postParams = {
  466. filters: `state='Draft';id='${id}';graphId='${graphId}'`,
  467. PageNumber: 1,
  468. PageSize: 1000,
  469. };
  470. const res = await planerQuery(postParams);
  471. if (res.result !== "success") {
  472. this.$message(res.result);
  473. }
  474. // 判断 未发布中,是否有该张图的备份草稿,
  475. let flag = false;
  476. let DraftPlanarGraph = "";
  477. if (res.content?.length) {
  478. flag = true;
  479. DraftPlanarGraph = res.content[0].floorList[0].planarGraphList[0];
  480. } else {
  481. flag = false;
  482. }
  483. // 未发布中有该张图的备份草稿
  484. if (flag) {
  485. // 点击确认后,会继续后续流程
  486. let confirmRes;
  487. try {
  488. confirmRes = await this.$confirm(
  489. "未发布中有该张图,将使用未发布中的图进行编辑",
  490. "提示",
  491. {
  492. confirmButtonText: "确定",
  493. cancelButtonText: "取消",
  494. type: "warning",
  495. }
  496. );
  497. } catch (error) {
  498. console.log("点击取消");
  499. }
  500. // 点击确定,跳转编辑器
  501. // 点击确定 confirmRes返回 confirm, 点击取消,confirmRes返回 undefined
  502. if (confirmRes) {
  503. const {
  504. folderId,
  505. buildingId,
  506. floorId,
  507. id,
  508. graphId,
  509. name,
  510. version,
  511. } = DraftPlanarGraph;
  512. this.finalToEdit({
  513. folderId,
  514. folderName,
  515. buildingId,
  516. floorId,
  517. floorLocalName,
  518. name,
  519. id,
  520. graphId,
  521. floorMap,
  522. version,
  523. projectId:this.projectId
  524. });
  525. }
  526. } else {
  527. // 未发布中,没有该张图的备份草稿
  528. // 读取该已发布的图信息
  529. const readRes = await pubPlanerRead({ graphId, id });
  530. if (readRes.result !== "success") {
  531. this.$message(readRes.result);
  532. }
  533. // 保存该图,在未发布中,生成一张草稿
  534. const resSave = await planerSave(readRes.content);
  535. // 取出新建图的版本号
  536. if (resSave.result === "success") {
  537. const resSaveData = resSave.entityList[0];
  538. const {
  539. folderId,
  540. buildingId,
  541. floorId,
  542. name,
  543. id,
  544. graphId,
  545. version,
  546. } = resSaveData;
  547. this.finalToEdit({
  548. folderName,
  549. floorLocalName,
  550. folderId,
  551. buildingId,
  552. floorId,
  553. name,
  554. id,
  555. graphId,
  556. version,
  557. floorMap,
  558. projectId:this.projectId
  559. });
  560. } else {
  561. this.$message(resSave.result);
  562. }
  563. }
  564. },
  565. /**
  566. * 点击已发布,最终跳转编辑器
  567. */
  568. finalToEdit(query) {
  569. setTimeout(() => {
  570. let routeUrl = this.$router.resolve({
  571. name: "Editer",
  572. query,
  573. });
  574. window.open(routeUrl.href, "_blank");
  575. }, 500)
  576. },
  577. /**
  578. * 查询图形信息
  579. * @param { string } floderId 传入的文件ID,新建画布成功之后,会调用该接口
  580. * 如果传入floderId,使用该id,不传的话,使用全局的this.folderId
  581. */
  582. async queryGraph(floderId) {
  583. if (!(floderId || this.folderId)) {
  584. return false;
  585. }
  586. this.cardLoading = true;
  587. this.selectCard = [];
  588. // createTime: "2020-12-02 20:05:51"
  589. // id: "eba700e7ae7e452fb2341172d1350b77"
  590. // lastUpdate: "2020-12-02 20:05:51"
  591. // name: "能源系统"
  592. // projectId: "Pj1101050029"
  593. // statistics: {}
  594. const postParams = {
  595. filters: `folderId='${floderId || this.folderId}'`,
  596. PageNumber: 1,
  597. PageSize: 1000,
  598. };
  599. if (this.queryText) {
  600. postParams.filters += `;name contain '${this.queryText}'`;
  601. }
  602. /**
  603. * 已发布,未发布 1:已发布 0:未发布
  604. */
  605. let res;
  606. if (this.isPub) {
  607. res = await pubPlanerQuery(postParams);
  608. } else {
  609. // state Draft(未发布),state Recyle(回收站)
  610. postParams.filters += ";state='Draft'";
  611. res = await planerQuery(postParams);
  612. }
  613. if (res.result !== "success") {
  614. this.cardTree = [];
  615. this.cardList = [];
  616. this.cardLoading = false;
  617. return false;
  618. }
  619. let cardTree = [];
  620. const cardList = [];
  621. cardTree = res?.content?.map((building) => {
  622. building?.floorList?.map((_floor) => {
  623. _floor?.planarGraphList?.map((card) => {
  624. card.checked = false;
  625. // 保存建筑,楼层,卡片信息
  626. cardList.push({
  627. _buildingId: building.id,
  628. _buildingLocalId: building.localId,
  629. _buildingName: building.name,
  630. _buildingLocalName: building.localName,
  631. _floorId: _floor.id,
  632. _floorLocalId: _floor.localId,
  633. _floorName: _floor.name,
  634. _floorLocalName: _floor.localName,
  635. ...card,
  636. });
  637. return card;
  638. });
  639. return _floor;
  640. });
  641. return building;
  642. });
  643. this.cardTree = cardTree;
  644. this.cardList = cardList;
  645. this.cardLoading = false;
  646. },
  647. },
  648. watch: {
  649. // 排序方式修改
  650. selVal(n, o) {
  651. if (n === o) return;
  652. this.selText = this.dataSelect.find((d) => d.id === n).name;
  653. this.selectCard = [];
  654. this.queryGraph();
  655. },
  656. /**
  657. * 监听选择的卡片长度,有选择大于1时,设置所有卡片的复选框显示
  658. */
  659. selectCard: {
  660. handler(newV) {
  661. if (newV.length) {
  662. console.log(newV);
  663. this.SETCARDSHOWCHECKBOX(true);
  664. } else {
  665. this.SETCARDSHOWCHECKBOX(false);
  666. }
  667. },
  668. deep: true,
  669. immediate: true,
  670. },
  671. },
  672. created() {
  673. // 如果路径带参数则摈弃项目配置项目、使用传入项目
  674. const urlData = this.$route.query;
  675. if (Object.keys(urlData).length != 0) {
  676. this.projectList = [{ id: urlData.projectId, name: urlData.projectName }];
  677. this.projectId = urlData.projectId;
  678. }
  679. },
  680. };
  681. </script>
  682. <style lang="less" scoped>
  683. .home {
  684. width: 100%;
  685. height: 100%;
  686. .header {
  687. width: 100%;
  688. height: 60px;
  689. background: #f7f9fa;
  690. padding: 0 16px 0 16px;
  691. border-bottom: 1px solid #e4e5e7;
  692. box-sizing: border-box;
  693. display: flex;
  694. align-items: center;
  695. justify-content: space-between;
  696. }
  697. .bodys {
  698. width: 100%;
  699. height: calc(100% - 60px);
  700. .aside {
  701. .recycle {
  702. line-height: 48px;
  703. border-top: 1px solid #e4e5e7ff;
  704. box-sizing: border-box;
  705. background: #f7f9fa;
  706. padding-left: 16px;
  707. cursor: pointer;
  708. img {
  709. width: 16px;
  710. height: 16px;
  711. margin: -3px 8px 0 0;
  712. }
  713. }
  714. }
  715. .main {
  716. width: 100%;
  717. height: 100%;
  718. background: #fff;
  719. padding: 5px 20px;
  720. box-sizing: border-box;
  721. .main-head {
  722. position: relative;
  723. width: 100%;
  724. height: 46px;
  725. margin-bottom: 5px;
  726. .showType {
  727. width: 100%;
  728. padding: 7px 0;
  729. display: flex;
  730. align-items: center;
  731. justify-content: space-between;
  732. /deep/
  733. .el-radio-button__orig-radio:checked
  734. + .el-radio-button__inner {
  735. color: #0091ff;
  736. border-color: #0091ff;
  737. background: #e1f2ff;
  738. }
  739. .head-right {
  740. display: flex;
  741. align-items: center;
  742. .Dropdown {
  743. min-width: 100px;
  744. margin-left: 20px;
  745. .drop-text {
  746. font-size: 14px;
  747. color: #1f2329;
  748. line-height: 16px;
  749. }
  750. }
  751. }
  752. }
  753. .showAction {
  754. background: #e1f2ff;
  755. border-radius: 4px;
  756. border: 1px solid #82c7fc;
  757. padding: 8px;
  758. span.sum {
  759. margin: 0 10px;
  760. color: #778089;
  761. }
  762. }
  763. }
  764. .main-body {
  765. display: block;
  766. height: calc(100% - 51px);
  767. overflow: auto;
  768. .has-data-body {
  769. // 建筑样式
  770. .building {
  771. // 建筑名称
  772. .buinding-name {
  773. display: flex;
  774. align-items: center;
  775. height: 30px;
  776. font-size: 16px;
  777. font-family: MicrosoftYaHei;
  778. color: #1f2329;
  779. line-height: 30px;
  780. margin-bottom: 12px;
  781. // 左边框竖线
  782. span.border-left {
  783. display: inline-block;
  784. width: 2px;
  785. height: 20px;
  786. background: #0091ff;
  787. margin-right: 4px;
  788. }
  789. }
  790. // 楼层样式
  791. .floor {
  792. // padding-left: 9px;
  793. display: flex;
  794. flex-wrap: wrap;
  795. padding-left: 20px;
  796. .floor-name {
  797. position: relative;
  798. left: -12px;
  799. width: 100%;
  800. height: 31px;
  801. font-size: 16px;
  802. font-family: PingFangSC-Regular, PingFang SC;
  803. font-weight: 400;
  804. color: #646c73;
  805. line-height: 31px;
  806. margin-bottom: 8px;
  807. }
  808. }
  809. }
  810. }
  811. .no-data-body {
  812. display: flex;
  813. flex-direction: column;
  814. // justify-content: center;
  815. align-items: center;
  816. }
  817. }
  818. }
  819. }
  820. .create-dialog {
  821. .dialog-bodys {
  822. width: 367px;
  823. margin: 0 auto;
  824. }
  825. }
  826. .create-dialog-inner {
  827. .inner-dialog-body {
  828. width: 100%;
  829. display: flex;
  830. .left {
  831. flex: 1;
  832. border-right: 1px solid #ccc;
  833. }
  834. }
  835. }
  836. }
  837. </style>
  838. <style lang="less">
  839. .createPopper.el-popover {
  840. background: #0091ffff;
  841. color: #fff;
  842. border-color: #0091ffff;
  843. .el-button {
  844. background: #ffffff;
  845. border-radius: 4px;
  846. padding: 5px 8px;
  847. }
  848. .popper__arrow::after {
  849. border-bottom-color: #0091ffff;
  850. }
  851. }
  852. </style>