home.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588
  1. <template>
  2. <el-container class="home">
  3. <!-- 顶部导航栏 -->
  4. <el-header class="header">
  5. <Select width="200" radius @change="testClick" :selectdata="dataSelect3" :placeholder="'请选择'" :hideClear="true" />
  6. <DropDownButton
  7. @click="createCanvas"
  8. type="primary"
  9. drop-down-type="split-drop"
  10. interactive="tap"
  11. :drop-down-list="dropDownList"
  12. @input="batchCreateCanvas"
  13. >新建画布</DropDownButton
  14. >
  15. <!-- <el-popover placement="bottom" width="320" v-model="popVisible" popper-class="createPopper" trigger="manual">
  16. <p>点击这里即可快速创建画布。</p>
  17. <div style="text-align: right; margin: 0">
  18. <el-button size="mini" type="text" @click="popVisible=false">我知道了</el-button>
  19. </div>
  20. </el-popover> -->
  21. </el-header>
  22. <!-- body部分 -->
  23. <el-container class="bodys">
  24. <!-- 左侧树状导航栏部分 -->
  25. <el-aside class="aside" width="240px">
  26. <left-folder @changeFolder="changeFolder"></left-folder>
  27. <!-- <leftAsideTree ref="leftAsideTree" @changeNode="changeNode" @noTree="(noTreeFlag = false), (popVisible = true)"></leftAsideTree>
  28. <div class="recycle" @click="showRecycleDialog">
  29. <img :src="require('@/assets/images/recycle.png')" />
  30. <span>回收站</span>
  31. </div> -->
  32. </el-aside>
  33. <!-- 展示部分 -->
  34. <el-main class="main">
  35. <div class="main-head" v-if="noTreeFlag">
  36. <div class="showType" v-show="!selectCard.length">
  37. <el-radio-group v-model="isPub" size="small" @change="changePub">
  38. <el-radio-button :label="1">已发布</el-radio-button>
  39. <el-radio-button :label="0">未发布</el-radio-button>
  40. </el-radio-group>
  41. <div class="head-right">
  42. <el-input
  43. placeholder="搜索"
  44. prefix-icon="el-icon-search"
  45. size="small"
  46. v-model="queryText"
  47. @keyup.native.enter="changeQueryText"
  48. clearable
  49. @clear="changeQueryText"
  50. >
  51. </el-input>
  52. <!-- 不显示筛选下拉框 -->
  53. <!-- <Dropdown class="Dropdown" v-model="selVal" :data="dataSelect">
  54. <span class="drop-text">{{ selText }}</span>
  55. </Dropdown> -->
  56. </div>
  57. </div>
  58. <div class="showAction" v-show="selectCard.length">
  59. <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
  60. <span style="margin-left: 10px">|</span>
  61. <span class="sum"
  62. >已选择<span style="color: #252b30; margin: 0 5px">{{ selectCard.length }}</span
  63. >项目</span
  64. >
  65. <el-button size="mini" @click="groupMove">移动到</el-button>
  66. <el-button size="mini" @click="groupDownload" v-if="isPub">下载</el-button>
  67. <el-button size="mini" @click="groupDelete">删除</el-button>
  68. <i class="el-icon-close" style="float: right; line-height: 28px; margin-right: 5px" @click="handleCheckAllChange(false)"></i>
  69. </div>
  70. </div>
  71. <div class="main-body" v-loading="cardLoading">
  72. <div class="has-data-body" v-if="cardTree.length">
  73. <div class="building" v-for="buildingData in cardTree" :key="buildingData.buildingId">
  74. <p class="buinding-name"><span class="border-left"></span> {{ buildingData.buildingName }}</p>
  75. <div class="floor" v-for="floor in buildingData.floorList" :key="floor.floorId">
  76. <p class="floor-name">{{ floor.floorName }}</p>
  77. <template v-for="t in floor.floor">
  78. <topoImageCard
  79. :isPub="isPub"
  80. :data="t"
  81. :key="`${Math.random()}_${t.id}`"
  82. @changeCheck="changeCheck"
  83. @rename="rename"
  84. @publishSuc="updateSuc"
  85. @moveTo="moveTo"
  86. @delete="deleteGraph"
  87. @editTag="editTag"
  88. @toEdit="toEdit"
  89. @download="download"
  90. ></topoImageCard>
  91. </template>
  92. </div>
  93. </div>
  94. </div>
  95. <div class="no-data-body" v-else style="margin-top: 112px">
  96. <img src="@/assets/images/no-data.png" style="width: 116px; height: 116px" />
  97. <p style="font-size: 16px; margin-top: 15px">暂无数据</p>
  98. </div>
  99. </div>
  100. </el-main>
  101. </el-container>
  102. <!-- 创建画布 -->
  103. <createCanvasDialog ref="createCanvasDialog"></createCanvasDialog>
  104. <!-- <createGraphDialog ref="createGraphDialog"></createGraphDialog> -->
  105. <!-- 重命名 -->
  106. <rename ref="rename" :isPub="isPub" @updateSuc="updateSuc"></rename>
  107. <!-- 移动到 -->
  108. <move ref="move" :isPub="isPub" @moveSuc="moveSuc"></move>
  109. <!-- 删除二次确认 -->
  110. <deleteDialog ref="deleteDialog" :isPub="isPub" @deleteSuc="deleteSuc"></deleteDialog>
  111. <!-- 修改标签 -->
  112. <tagDialog ref="tagDialog" :isPub="isPub" @updateSuc="updateSuc"></tagDialog>
  113. <!-- 回收站全屏弹窗 -->
  114. <recycle ref="recycle" @recycleDialogClose="recycleDialogClose"></recycle>
  115. <!-- <equipment-deatil /> -->
  116. </el-container>
  117. </template>
  118. <script>
  119. import { Select, Dropdown, DropDownButton } from "meri-design";
  120. import leftFolder from "@/components/homeView/leftFolder.vue";
  121. import leftAsideTree from "@/components/homeView/leftAsideTree.vue";
  122. import topoImageCard from "@/components/homeView/topoImageCard.vue";
  123. import { queryDraftsGraph, queryPubGraph } from "@/api/home";
  124. import rename from "@/components/homeView/rename";
  125. import move from "@/components/homeView/move";
  126. import deleteDialog from "@/components/homeView/deleteDialog";
  127. import tagDialog from "@/components/homeView/tagDialog";
  128. import recycle from "@/components/homeView/recycle";
  129. import createGraphDialog from "@/components/homeView/createGraphDialog";
  130. import createCanvasDialog from "@/components/homeView/createCanvasDialog";
  131. import { SNetUtil } from "@persagy-web/base";
  132. import equipmentDeatil from "@/components/editview/equipmentDeatil";
  133. export default {
  134. name: "home",
  135. // components: { leftAsideTree, createGraphDialog },
  136. components: {
  137. Select,
  138. Dropdown,
  139. DropDownButton,
  140. topoImageCard,
  141. rename,
  142. move,
  143. deleteDialog,
  144. recycle,
  145. tagDialog,
  146. createCanvasDialog,
  147. leftFolder,
  148. equipmentDeatil,
  149. },
  150. data() {
  151. return {
  152. dataSelect3: [
  153. { id: "test1", name: "选择项", sub: "hello111" },
  154. { id: "test2", name: "单平米", sub: "hola111" },
  155. {
  156. id: "test3",
  157. name: "下级分项",
  158. sub: "bonjour",
  159. divider: true,
  160. },
  161. { id: "test4", name: "滑动平均滑动平均", sub: "hi" },
  162. ], // 项目列表
  163. dropDownList: [
  164. {
  165. id: "batch",
  166. name: "批量新建",
  167. disabled: true,
  168. },
  169. ],
  170. selVal: "lastUpdate", // 排序方式
  171. selText: "按最后修改", // 排序方式文字
  172. dataSelect: [
  173. { id: "lastUpdate", name: "按最后修改" },
  174. { id: "name", name: "按字母顺序" },
  175. { id: "createTime", name: "按创建时间" },
  176. ], // 排序选项
  177. queryText: "", // 搜索文字
  178. isPub: 1, // 发布类型()
  179. cardTree: [], // 当前显示的卡片树
  180. cardList: [], //卡片平铺树
  181. checkAll: false, // 全选
  182. selectCard: [], // 当前选中的卡片列表
  183. isIndeterminate: true, // 全选按钮
  184. curCategory: {}, // 当前选中的树节点
  185. noTreeFlag: true, // 左侧树是否有数据-默认有
  186. popVisible: true,
  187. categoryName: "", // 跳转编辑页面时分类名称
  188. imgUrl: "/image-service/common/image_get?systemId=dataPlatform&key=",
  189. cardLoading: false,
  190. };
  191. },
  192. created() {
  193. window.vm = this;
  194. this.changeFolder();
  195. },
  196. methods: {
  197. testClick(data) {
  198. console.log(data);
  199. },
  200. // 创建画布
  201. createCanvas() {
  202. this.$refs.createCanvasDialog.showDialog();
  203. },
  204. // 批量新建画布
  205. batchCreateCanvas(val) {
  206. alert(`批量创建画布${val}`);
  207. },
  208. // 创建拓扑图
  209. createProject() {
  210. this.$refs.createGraphDialog.showDialog();
  211. },
  212. // 选项改变
  213. changeCheck(v) {
  214. console.log("%c选项更改:", "color:blue;");
  215. console.log(JSON.stringify(v, null, 2));
  216. // 获取该对象在选中数组中的下标(按照id匹配)
  217. let index = this._.findIndex(this.selectCard, ["id", v.id]);
  218. if (index !== -1) {
  219. this.selectCard.splice(index, 1);
  220. } else {
  221. this.selectCard.push(v);
  222. }
  223. console.log(index);
  224. this.isIndeterminate = Boolean(this.selectCard.length) && this.selectCard.length < this.cardList.length;
  225. this.checkAll = this.selectCard.length === this.cardList.length;
  226. },
  227. // 全选按钮
  228. handleCheckAllChange(val) {
  229. console.log(val);
  230. let cardTree = [];
  231. cardTree = this.cardTree.map((building) => {
  232. building.floorList.map((_floor) => {
  233. _floor.floor.map((card) => {
  234. card.checked = val;
  235. });
  236. return _floor;
  237. });
  238. return building;
  239. });
  240. this.cardTree = cardTree;
  241. if (val) {
  242. this.selectCard = this._.cloneDeep(this.cardList);
  243. } else {
  244. this.selectCard = [];
  245. }
  246. this.isIndeterminate = false;
  247. },
  248. // 批量移动到
  249. groupMove() {
  250. this.$refs.move.showDialog(this.selectCard);
  251. },
  252. // 批量下载
  253. groupDownload() {
  254. if (this.selectCard.length) {
  255. this.selectCard.forEach((t) => {
  256. this.download(t);
  257. });
  258. }
  259. },
  260. // 单独下载
  261. download(data) {
  262. if (data.pic) {
  263. SNetUtil.downLoad(data.name + ".png", this.imgUrl + data.pic);
  264. } else {
  265. // this.$message.warning(`${data.name}未绘制`)
  266. }
  267. },
  268. // 删除
  269. groupDelete() {
  270. this.$refs.deleteDialog.showDialog(this.selectCard);
  271. },
  272. // 重命名
  273. rename(data) {
  274. this.$refs.rename.showDialog(data);
  275. },
  276. // 移动到
  277. moveTo(data) {
  278. this.$refs.move.showDialog([data]);
  279. },
  280. // 单独删除
  281. deleteGraph(data) {
  282. this.$refs.deleteDialog.showDialog([data]);
  283. },
  284. // 更新成功-发布成功
  285. updateSuc() {
  286. this.queryGraph();
  287. },
  288. // 卡片移动事件
  289. moveSuc() {
  290. this.queryGraph();
  291. // this.$refs.leftAsideTree.getCategoryGraph();
  292. },
  293. // 删除成功
  294. deleteSuc() {
  295. this.queryGraph();
  296. // this.$refs.leftAsideTree.getCategoryGraph();
  297. },
  298. // 选中节点变化
  299. changeNode(data) {
  300. this.curCategory = data;
  301. this.categoryName = data.name;
  302. this.queryGraph();
  303. },
  304. /**
  305. * 更改选中的文件夹
  306. */
  307. changeFolder(data) {
  308. // this.queryGraph();
  309. // TODO:
  310. let { yfbMocKdata } = require("./mockData");
  311. // console.log(yfbMocKdata);
  312. let cardTree = [],
  313. cardList = [];
  314. cardTree = yfbMocKdata.content.map((building) => {
  315. building.floorList.map((_floor) => {
  316. _floor.floor.map((card) => {
  317. card.checked = false;
  318. cardList.push({
  319. buildingId: building.buildingId,
  320. buildingName: building.buildingName,
  321. floorId: _floor.floorId,
  322. floorName: _floor.floorName,
  323. ...card,
  324. });
  325. return card;
  326. });
  327. return _floor;
  328. });
  329. return building;
  330. });
  331. this.cardTree = cardTree;
  332. this.cardList = cardList;
  333. this.cardLoading = false;
  334. },
  335. // 发布修改
  336. changePub() {
  337. this.queryGraph();
  338. },
  339. // 修改标签
  340. editTag(data) {
  341. this.$refs.tagDialog.showDialog(data);
  342. },
  343. // 输入内容变化
  344. changeQueryText() {
  345. this.queryGraph();
  346. },
  347. // 回收站点击
  348. showRecycleDialog() {
  349. this.$refs.recycle.showDialog();
  350. },
  351. // 回收站关闭
  352. recycleDialogClose() {
  353. this.queryGraph();
  354. this.$refs.leftAsideTree.getCategoryGraph();
  355. },
  356. // 新建拓扑图成功
  357. toEdit(data) {
  358. this.$router.push({
  359. name: "Editer",
  360. query: {
  361. graphId: data.graphId,
  362. id: data.id,
  363. categoryName: encodeURI(this.categoryName),
  364. isPub: this.isPub,
  365. },
  366. });
  367. },
  368. /////////////////接口
  369. // 查询图形信息
  370. queryGraph() {
  371. if (!this.curCategory.code) {
  372. return;
  373. }
  374. this.cardLoading = true;
  375. this.selectCard = [];
  376. const pa = {
  377. filters: `categoryId="${this.curCategory.code}"`,
  378. orders: `${this.selVal} desc`,
  379. };
  380. if (this.queryText) {
  381. pa.filters += `;name contain "${this.queryText}"`;
  382. }
  383. /**
  384. * 已发布,未发布 1:已发布 0:未发布
  385. */
  386. if (this.isPub) {
  387. queryPubGraph(pa).then((res) => {
  388. this.cardTree = res.content.map((t) => {
  389. t.checked = false;
  390. return t;
  391. });
  392. this.cardLoading = false;
  393. });
  394. } else {
  395. pa.filters += ";state=1";
  396. queryDraftsGraph(pa).then((res) => {
  397. this.cardTree = res.content.map((t) => {
  398. t.checked = false;
  399. return t;
  400. });
  401. this.cardLoading = false;
  402. });
  403. }
  404. },
  405. },
  406. watch: {
  407. // 排序方式修改
  408. selVal(n, o) {
  409. if (n === o) return;
  410. this.selText = this.dataSelect.find((d) => d.id === n).name;
  411. this.selectCard = [];
  412. this.queryGraph();
  413. },
  414. },
  415. };
  416. </script>
  417. <style lang="less" scoped>
  418. .home {
  419. width: 100%;
  420. height: 100%;
  421. .header {
  422. width: 100%;
  423. height: 60px;
  424. background: #f7f9fa;
  425. padding: 0 16px 0 16px;
  426. border-bottom: 1px solid #e4e5e7;
  427. box-sizing: border-box;
  428. display: flex;
  429. align-items: center;
  430. justify-content: space-between;
  431. }
  432. .bodys {
  433. width: 100%;
  434. height: calc(100% - 60px);
  435. .aside {
  436. .recycle {
  437. line-height: 48px;
  438. border-top: 1px solid #e4e5e7ff;
  439. box-sizing: border-box;
  440. background: #f7f9fa;
  441. padding-left: 16px;
  442. cursor: pointer;
  443. img {
  444. width: 16px;
  445. height: 16px;
  446. margin: -3px 8px 0 0;
  447. }
  448. }
  449. }
  450. .main {
  451. width: 100%;
  452. height: 100%;
  453. background: #fff;
  454. padding: 5px 20px;
  455. box-sizing: border-box;
  456. .main-head {
  457. position: relative;
  458. width: 100%;
  459. height: 46px;
  460. margin-bottom: 5px;
  461. .showType {
  462. width: 100%;
  463. padding: 7px 0;
  464. display: flex;
  465. align-items: center;
  466. justify-content: space-between;
  467. /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  468. color: #0091ff;
  469. border-color: #0091ff;
  470. background: #e1f2ff;
  471. }
  472. .head-right {
  473. display: flex;
  474. align-items: center;
  475. .Dropdown {
  476. min-width: 100px;
  477. margin-left: 20px;
  478. .drop-text {
  479. font-size: 14px;
  480. color: #1f2329;
  481. line-height: 16px;
  482. }
  483. }
  484. }
  485. }
  486. .showAction {
  487. background: #e1f2ff;
  488. border-radius: 4px;
  489. border: 1px solid #82c7fc;
  490. padding: 8px;
  491. span.sum {
  492. margin: 0 10px;
  493. color: #778089;
  494. }
  495. }
  496. }
  497. .main-body {
  498. display: block;
  499. height: calc(100% - 51px);
  500. overflow: auto;
  501. .has-data-body {
  502. // 建筑样式
  503. .building {
  504. // 建筑名称
  505. .buinding-name {
  506. display: flex;
  507. align-items: center;
  508. height: 30px;
  509. font-size: 16px;
  510. font-family: MicrosoftYaHei;
  511. color: #1f2329;
  512. line-height: 30px;
  513. margin-bottom: 12px;
  514. // 左边框竖线
  515. span.border-left {
  516. display: inline-block;
  517. width: 2px;
  518. height: 20px;
  519. background: #0091ff;
  520. margin-right: 4px;
  521. }
  522. }
  523. // 楼层样式
  524. .floor {
  525. // padding-left: 9px;
  526. display: flex;
  527. flex-wrap: wrap;
  528. padding-left: 20px;
  529. .floor-name {
  530. position: relative;
  531. left: -12px;
  532. width: 100%;
  533. height: 31px;
  534. font-size: 16px;
  535. font-family: PingFangSC-Regular, PingFang SC;
  536. font-weight: 400;
  537. color: #646c73;
  538. line-height: 31px;
  539. margin-bottom: 8px;
  540. }
  541. }
  542. }
  543. }
  544. .no-data-body {
  545. display: flex;
  546. flex-direction: column;
  547. // justify-content: center;
  548. align-items: center;
  549. }
  550. }
  551. }
  552. }
  553. .create-dialog {
  554. .dialog-bodys {
  555. width: 367px;
  556. margin: 0 auto;
  557. }
  558. }
  559. .create-dialog-inner {
  560. .inner-dialog-body {
  561. width: 100%;
  562. display: flex;
  563. .left {
  564. flex: 1;
  565. border-right: 1px solid #ccc;
  566. }
  567. }
  568. }
  569. }
  570. </style>
  571. <style lang="less">
  572. .createPopper.el-popover {
  573. background: #0091ffff;
  574. color: #fff;
  575. border-color: #0091ffff;
  576. .el-button {
  577. background: #ffffff;
  578. border-radius: 4px;
  579. padding: 5px 8px;
  580. }
  581. .popper__arrow::after {
  582. border-bottom-color: #0091ffff;
  583. }
  584. }
  585. </style>