123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481 |
- <!-- 空间列表 -->
- <template>
- <div class="space-list">
- <!-- 筛选 -->
- <div class="clp">
- <Input
- class="baseItemInput"
- :width="188"
- iconType="search"
- placeholder="搜索空间名称"
- v-model="getPressMsg"
- @pressEnter="pressEnter"
- @clear="pressEnter"
- @input="pressEnter"
- />
- </div>
- <!-- 空间 list -->
- <div ref="localDom" class="box-profess">
- <div class="profess" v-show="!pressMsgData.length" v-for="items in spaceList" :key="items.classCode">
- <!-- 空间类名称 -->
- <div @click="collapse(items)" class="profess-title">
- <i v-bind:class="[items.isShow ? 'caret-icon-active' : 'caret-icon', 'el-icon-caret-bottom ']"></i>
- <span class="code-name">{{ items.codeName }}</span>
- <div class="action">
- <Icon class="equip-edit" name="edit" @click.stop.native="editSpace(items)" />
- <Icon class="equip-delete" name="delete" @click.stop.native="deleteSpace(items)" />
- </div>
- </div>
- <!-- 空间实例列表 -->
- <el-collapse-transition>
- <div v-show="items.isShow">
- <div
- class="equipType"
- @click="chioceItem(item)"
- v-for="(item, i) in items.children"
- :class="[item.visible ? 'equip-visible' : 'equip-hidden', item.selected ? 'equip-selected' : '']"
- :key="i"
- >
- <!-- 本地名称-本地编码 -->
- <span
- class="local-name"
- :title="`${item.legendData.localName}${item.legendData.localId ? '-' + item.legendData.localId : ''}`"
- >{{ item.legendData.localName }}<span class="local-id">-{{ item.legendData.localId || "-" }}</span>
- </span>
- <!-- hover行显示小眼睛 -->
- <div class="toggle-eyes">
- <Icon :name="item.visible ? 'preview' : 'hide'" @click.native.stop="toggleItemVisible(item)" />
- </div>
- </div>
- </div>
- </el-collapse-transition>
- </div>
- <!-- 筛选显示的空间类,空间实例 -->
- <div class="choice-equip" v-show="pressMsgData.length">
- <div
- class="equipType"
- @click="chioceItem(item)"
- v-for="item in pressMsgData"
- :key="item.id"
- :class="[item.visible ? 'equip-visible' : 'equip-hidden', item.selected ? 'equip-selected' : '']"
- >
- <span class="local-name" :title="`${item.legendData.localName}${item.legendData.localId ? '-' + item.legendData.localId : ''}`"
- >{{ item.legendData.localName }}<span class="local-id">-{{ item.legendData.localId || "-" }}</span>
- </span>
- <div class="toggle-eyes">
- <Icon :name="item.visible ? 'preview' : 'hide'" @click.native.stop="toggleItemVisible(item)" />
- </div>
- </div>
- </div>
- </div>
- <!-- 添加空间 -->
- <div class="addbtn" @click="openAddSpaceDialog"><i class="el-icon-plus"></i>添加显示空间</div>
- <edit-info-point type="space" @closeModal="showEditInfoPoint = false" :code="classCode" :showDialog="showEditInfoPoint" />
- </div>
- </template>
- <script>
- import { mapState, mapMutations } from "vuex";
- import bus from "@/bus/bus";
- import editInfoPoint from "./editInfoPoint";
- import { ruleCreate } from "@/api/labsl";
- export default {
- data() {
- return {
- cascaderData6: [], // 筛选待定
- hoverIndex: -1,
- getPressMsg: "", //搜索框
- pressMsgData: [], //搜索对应得数组
- spaceList: [], //空间列表 二维数组
- local: null, //table loading
- classCode: "",
- showEditInfoPoint: false,
- };
- },
- components: { editInfoPoint },
- computed: {
- ...mapState(["zoneIteMap", "zoneItemNum", "id", "graphId"]),
- },
- watch: {
- zoneItemNum(newV) {
- this.getSpaceList();
- },
- },
- mounted() {
- this.getSpaceList();
- },
- methods: {
- ...mapMutations(["ADDRULE"]),
- // 打开添加弹窗
- openAddSpaceDialog() {
- this.$emit("openAddSpaceDialog");
- },
- /**
- * 查新空间列表
- */
- getSpaceList() {
- // TODO: 获取vuex中空间列表数据
- const arr = Object.values(this.zoneIteMap);
- const obj = this._(arr).groupBy("legendData.classCode").value();
- const spaceList = [];
- for (const key in obj) {
- const element = obj[key];
- spaceList.push({
- classCode: element[0].legendData.classCode,
- codeName: element[0].legendData.codeName,
- children: element,
- isShow: true,
- });
- }
- this.spaceList = spaceList;
- /* const spaceArr = [
- {
- classCode: "GeneralZone",
- codeName: "通用分区",
- isShow: true,
- children: [
- {
- id: "Eq11010500290353e50d583840c6a0b34d739dd0949b123123",
- visible: true,
- legendData: {
- localName: "风井",
- localId: "123sdf",
- id: "Eq11010500290353e50d583840c6a0b34d739dd0949b",
- },
- },
- {
- id: "Eq11010500290353e50d583840c6a0b34d739dd0949b123123eqwrrw",
- visible: true,
- legendData: {
- localName: "hhh",
- localId: "43qwasdfa",
- id: "Eq11010500290353e50d583840c6a0b34d739dd0949brweqrqer",
- },
- },
- ],
- },
- ];
- this.spaceList = spaceArr; */
- },
- /**
- * 编辑空间类
- */
- editSpace(items) {
- this.classCode = items.classCode;
- this.showEditInfoPoint = true;
- },
- deleteSpace(items) {
- this.$confirm(`此操作将删除${items.codeName}, 是否继续?`, "提示", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning",
- }).then(async () => {
- const postParams = {
- content: [
- {
- graphCoding: this.id,
- graphId: this.graphId,
- returnType: "zone", // 返回类型(equip: 设备, equipGroup: 设备组, zone: 空间)
- commond: "delete", // 命令类型(query: 查询, delete: 删除)
- params: {
- classCode: items.classCode,
- },
- },
- ],
- };
- const res = await ruleCreate(postParams);
- if (res.result === "success") {
- this.$message.success("删除成功");
- if (res.entityList && res.entityList[0]) {
- // 在vuex中添加 删除的规则
- this.ADDRULE(res.entityList[0]);
- // 发出删除设备指令
- bus.$emit("removeZone", items.classCode, true);
- }
- } else {
- this.$message.error(res.message || "删除失败");
- }
- });
- },
- /**
- * 点击空间,更改图chioceItem
- */
- chioceItem(item) {
- bus.$emit("chioceItem", item);
- },
- /**
- * 切换空间显隐状态
- */
- toggleItemVisible(item) {
- // console.log(item);
- item.visible = !item.visible;
- },
- // 删除Item
- deleteItem(a) {
- bus.$emit("deleteItem", a);
- },
- // 折叠
- collapse(item) {
- item.isShow = !item.isShow;
- },
- // 搜索回车操作
- pressEnter() {
- const list = [];
- if (!this.getPressMsg) {
- this.pressMsgData = [];
- return;
- }
- // 对信息点相同得提取出来
- this.spaceList.map((item) => {
- item.children.map((space) => {
- const localName = space?.legendData?.localName?.toLowerCase();
- const localId = space?.legendData?.localId?.toLowerCase();
- const msg = this.getPressMsg.toLowerCase();
- if (localName.includes(msg) || localId.includes(msg)) {
- list.push(space);
- }
- });
- });
- this.pressMsgData = list;
- },
- },
- };
- </script>
- <style lang="less" scoped>
- div {
- -moz-user-select: none; /*火狐*/
- -webkit-user-select: none; /*webkit浏览器*/
- -ms-user-select: none; /*IE10*/
- -khtml-user-select: none; /*早期浏览器*/
- user-select: none;
- }
- .space-list {
- width: 100%;
- height: 100%;
- position: relative;
- display: flex;
- flex-direction: column;
- // background-color: #fff;
- .clp {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding-top: 12px;
- padding-right: 6px;
- .shaixuan {
- cursor: pointer;
- }
- }
- .box-profess {
- // min-height: 500px;
- flex: 1;
- overflow-y: scroll;
- padding: 12px 0;
- }
- .profess {
- .profess-title {
- width: 100%;
- height: 40px;
- line-height: 40px;
- display: flex;
- padding: 0 10px 0 16px;
- display: flex;
- align-items: center;
- cursor: pointer;
- font-size: 14px;
- font-weight: 600;
- color: #1f2429;
- .code-name {
- margin-left: 10px;
- flex: 1;
- }
- .action {
- // width: 100px;
- display: none;
- .equip-delete {
- // cursor: not-allowed;
- }
- }
- &:hover {
- .action {
- display: flex;
- align-items: center;
- }
- }
- }
- .equipType {
- padding: 0 10px 0 40px;
- display: flex;
- align-items: center;
- .toggle-eyes {
- width: 20px;
- padding-left: 4px;
- display: flex;
- align-items: center;
- .p-icon {
- display: none;
- }
- }
- &:hover {
- background-color: #f5f6f7;
- .p-icon {
- display: inline-block;
- }
- }
- .local-name {
- flex: 1;
- height: 40px;
- line-height: 40px;
- font-size: 14px;
- font-weight: 600;
- color: #1f2429;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- .local-id {
- font-weight: 500;
- color: #8d9399;
- line-height: 16px;
- }
- }
- .equipType-title {
- margin: 20px 0 20px 18px;
- cursor: pointer;
- }
- }
- // 选中的空间样式
- .equip-selected {
- background-color: #f5f6f7;
- }
- // 隐藏的空间列表样式
- .equip-hidden {
- .local-name {
- color: #8d9399;
- .local-id {
- color: #8d9399;
- }
- }
- }
- }
- .addbtn {
- width: 100%;
- height: 40px;
- display: flex;
- align-items: center;
- justify-content: center;
- box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.11);
- cursor: pointer;
- &:hover {
- color: #0091ff;
- }
- }
- .caret-icon {
- animation: nowhirling 0.2s linear forwards;
- }
- .caret-icon-active {
- animation: whirling 0.2s linear forwards;
- }
- }
- .choice-equip {
- .equipType {
- padding: 0 10px 0 20px;
- display: flex;
- align-items: center;
- .toggle-eyes {
- width: 20px;
- padding-left: 4px;
- display: flex;
- align-items: center;
- .p-icon {
- display: none;
- }
- }
- &:hover {
- background-color: #f5f6f7;
- .p-icon {
- display: inline-block;
- }
- }
- .local-name {
- flex: 1;
- height: 40px;
- line-height: 40px;
- font-size: 14px;
- font-weight: 600;
- color: #1f2429;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- .local-id {
- font-weight: 500;
- color: #8d9399;
- line-height: 16px;
- }
- }
- .equipType-title {
- margin: 20px 0 20px 18px;
- cursor: pointer;
- }
- }
- // 选中的空间样式
- .equip-selected {
- background-color: #f5f6f7;
- }
- // 隐藏的空间列表样式
- .equip-hidden {
- .local-name {
- color: #8d9399;
- .local-id {
- color: #8d9399;
- }
- }
- }
- }
- .reset {
- position: absolute;
- bottom: 16px;
- left: 24px;
- }
- @keyframes whirling {
- 0% {
- transform: rotate(-90deg);
- -ms-transform: rotate(-90deg); /* Internet Explorer */
- -moz-transform: rotate(-90deg); /* Firefox */
- -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
- -o-transform: rotate(-90deg); /* Opera */
- }
- 100% {
- transform: rotate(0deg);
- -ms-transform: rotate(0deg); /* Internet Explorer */
- -moz-transform: rotate(0deg); /* Firefox */
- -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
- -o-transform: rotate(0deg); /* Opera */
- }
- }
- @keyframes nowhirling {
- 0% {
- transform: rotate(0deg);
- -ms-transform: rotate(0deg); /* Internet Explorer */
- -moz-transform: rotate(0deg); /* Firefox */
- -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
- -o-transform: rotate(0deg); /* Opera */
- }
- 100% {
- transform: rotate(-90deg);
- -ms-transform: rotate(-90deg); /* Internet Explorer */
- -moz-transform: rotate(-90deg); /* Firefox */
- -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
- -o-transform: rotate(-90deg); /* Opera */
- }
- }
- </style>
|