|
@@ -1,255 +0,0 @@
|
|
|
-<!--拓扑图缩略图卡片-->
|
|
|
-<template>
|
|
|
- <el-card :class="{ 'box-card': true, active: data.checked }" shadow="hover" :body-style="{ padding: '0px' }">
|
|
|
- <div class="image" v-if="!data.pic" style="line-height: 120px; text-align: center">
|
|
|
- <img :src="require('@/assets/images/noImg.png')" style="height: 60px" />
|
|
|
- </div>
|
|
|
- <img class="image" v-else :src="`/image-service/common/image_get?systemId=dataPlatform&key=${data.pic}`" />
|
|
|
- <div class="shadow image" v-if="!isRecycle" @click.stop="toEdit">
|
|
|
- <el-checkbox v-model="data.checked" class="shadowCheck" @change="changeCheck"></el-checkbox>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <div>
|
|
|
- <span class="title" :title="data.name">{{ data.name }}</span>
|
|
|
- <!-- <span class="title" :title="data.name">中央空调系统中央空调系统中央空调系统中央空调系统</span> -->
|
|
|
- <div class="func">
|
|
|
- <el-popover placement="top" width="220" trigger="hover" popper-class="customPop">
|
|
|
- <p>版本 : {{ data.version }}</p>
|
|
|
- <p>更新时间 : {{ data.lastUpdate }}</p>
|
|
|
- <p>更新人 : {{ data.putUser || "张三" }}</p>
|
|
|
- <span slot="reference">
|
|
|
- <img :src="require('@/assets/images/tips.png')" style="width: 20px; height: 20px" />
|
|
|
- </span>
|
|
|
- </el-popover>
|
|
|
- <el-dropdown :hide-on-click="false" placement="bottom-start" trigger="click" @command="handleCommand">
|
|
|
- <span class="el-dropdown-link">
|
|
|
- <img :src="require('@/assets/images/more.png')" style="width: 20px; height: 20px" />
|
|
|
- </span>
|
|
|
- <el-dropdown-menu slot="dropdown">
|
|
|
- <template v-for="t in moreList">
|
|
|
- <el-dropdown-item :key="t.name" :command="t.name" v-if="dropdownItemShow(t)">{{ t.label }}</el-dropdown-item>
|
|
|
- </template>
|
|
|
- </el-dropdown-menu>
|
|
|
- </el-dropdown>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 下方标签 -->
|
|
|
- <div class="tags">
|
|
|
- <span v-for="(t, i) in data.label" :key="data.name + i">{{ t }}</span>
|
|
|
- <el-popover v-if="data.label.length" placement="top" trigger="hover" popper-class="tags-popover">
|
|
|
- <div>
|
|
|
- <span v-for="(t, i) in data.label" :key="data.name + i">{{ t }}</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <i slot="reference"> ... </i>
|
|
|
- </el-popover>
|
|
|
- </div>
|
|
|
- <!-- <div class="tags">
|
|
|
- <span v-for="(t, i) in data.label" :key="data.name + i">{{ t }}</span>
|
|
|
- </div> -->
|
|
|
- <!-- <span v-for="(t,i) in data.label.slice(0,2).concat(['...'])" :key="data.name + i" @click="handleTagClick(t)">{{t}}</span> -->
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import { publishGraph } from "@/api/home";
|
|
|
-export default {
|
|
|
- props: {
|
|
|
- data: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {};
|
|
|
- },
|
|
|
- },
|
|
|
- isRecycle: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- isPub: {
|
|
|
- type: Number,
|
|
|
- default: 0,
|
|
|
- },
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- moreList: [
|
|
|
- { name: "edit", label: "编辑", show: "any" }, // 类型为 已发布 时出现
|
|
|
- { name: "rename", label: "重命名", show: "any" }, // 类型为 未发布/已发布 时出现
|
|
|
- { name: "publish", label: "发布", show: 0 }, // 类型为 未发布 时出现
|
|
|
- { name: "download", label: "下载", show: 1 }, // 类型为 已发布 时出现
|
|
|
- { name: "editTag", label: "修改标签", show: 1 }, // 类型为 已发布 时出现
|
|
|
- { name: "moveTo", label: "移动到", show: "any" }, // 类型为 未发布/已发布 时出现
|
|
|
- { name: "delete", label: "删除", show: "any" }, // 类型为 未发布/已发布 时出现
|
|
|
- { name: "recover", label: "恢复", show: "isRecycle" }, // 类型为 回收站 时出现
|
|
|
- { name: "deleteRecycle", label: "永久删除", show: "isRecycle" }, // 类型为 回收站 时出现
|
|
|
- ],
|
|
|
- checked: false,
|
|
|
- showMoreTags: false, //是否显示更多标签
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 显示下拉框内容选项判断
|
|
|
- dropdownItemShow(item) {
|
|
|
- return (!this.isRecycle && (item.show == "any" || item.show == this.isPub)) || (this.isRecycle && item.show == "isRecycle");
|
|
|
- },
|
|
|
- // 复选框改变时
|
|
|
- changeCheck() {
|
|
|
- this.$emit("changeCheck", this.data);
|
|
|
- },
|
|
|
- // 点击更多中的命令时
|
|
|
- handleCommand(command) {
|
|
|
- const pa = {
|
|
|
- graphId: this.data.graphId,
|
|
|
- id: this.data.id,
|
|
|
- };
|
|
|
- switch (command) {
|
|
|
- case "rename":
|
|
|
- case "download":
|
|
|
- case "editTag":
|
|
|
- case "moveTo":
|
|
|
- case "delete":
|
|
|
- case "recover":
|
|
|
- case "deleteRecycle":
|
|
|
- this.$emit(command, this.data);
|
|
|
- break;
|
|
|
- case "publish":
|
|
|
- publishGraph(pa).then((res) => {
|
|
|
- if (res.result == "success") {
|
|
|
- this.$message.success("发布成功");
|
|
|
- this.$emit("publishSuc");
|
|
|
- } else {
|
|
|
- this.$message.success("发布失败");
|
|
|
- }
|
|
|
- });
|
|
|
- break;
|
|
|
- }
|
|
|
- },
|
|
|
- // 进入编辑页面
|
|
|
- toEdit(e) {
|
|
|
- const targetName = e.target.nodeName.toLowerCase();
|
|
|
- if (targetName == "div") {
|
|
|
- this.$emit("toEdit", this.data);
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * 点击...标签,显示popover所有标签
|
|
|
- */
|
|
|
- handleTagClick(item) {
|
|
|
- if (item === "...") {
|
|
|
- this.showMoreTags = true;
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang="less" scoped>
|
|
|
-.box-card {
|
|
|
- position: relative;
|
|
|
- width: 260px;
|
|
|
- height: 193px;
|
|
|
- border-radius: 8px;
|
|
|
- margin-right: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- cursor: pointer;
|
|
|
- &:hover,
|
|
|
- &.active {
|
|
|
- border-color: #0091ff80;
|
|
|
- box-shadow: 0px 8px 16px 0px rgba(195, 199, 203, 0.4);
|
|
|
- .shadow {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .content {
|
|
|
- .func {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .image {
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: 120px;
|
|
|
- background-color: #f7f9fa;
|
|
|
- }
|
|
|
- .shadow {
|
|
|
- display: none;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- background-color: #8d939926;
|
|
|
- .shadowCheck {
|
|
|
- position: absolute;
|
|
|
- top: 8px;
|
|
|
- left: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- .content {
|
|
|
- padding: 8px 12px;
|
|
|
- vertical-align: middle;
|
|
|
- .title {
|
|
|
- display: inline-block;
|
|
|
- color: #1f2429;
|
|
|
- margin: 0;
|
|
|
- max-width: 182px;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- .func {
|
|
|
- & > * + * {
|
|
|
- margin-left: 8px;
|
|
|
- }
|
|
|
- display: none;
|
|
|
- float: right;
|
|
|
- vertical-align: middle;
|
|
|
- i {
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- & > .tags {
|
|
|
- margin-top: 4px;
|
|
|
- & > span {
|
|
|
- display: inline-block;
|
|
|
- padding: 1px 6px;
|
|
|
- font-size: 12px;
|
|
|
- color: #8d9399;
|
|
|
- line-height: 18px;
|
|
|
- border: 1px solid #8d9399;
|
|
|
- border-radius: 3px;
|
|
|
- margin-bottom: 11px;
|
|
|
- margin-right: 4px;
|
|
|
- // & + span {
|
|
|
- // margin-left: 4px;
|
|
|
- // }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.customPop {
|
|
|
- p {
|
|
|
- font-size: 12px;
|
|
|
- & + p {
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.tags-popover {
|
|
|
- div {
|
|
|
- margin-top: 4px;
|
|
|
- max-width: 480px !important;
|
|
|
- max-height: 200px !important;
|
|
|
- overflow: auto !important;
|
|
|
- & > span {
|
|
|
- color: red;
|
|
|
- display: inline-block;
|
|
|
- padding: 1px 6px;
|
|
|
- font-size: 12px;
|
|
|
- color: #8d9399;
|
|
|
- line-height: 18px;
|
|
|
- border: 1px solid #8d9399;
|
|
|
- border-radius: 3px;
|
|
|
- margin-bottom: 11px;
|
|
|
- margin-right: 4px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|