|
@@ -96,7 +96,32 @@
|
|
<img :src="fqPic[0].url" alt />
|
|
<img :src="fqPic[0].url" alt />
|
|
</div> -->
|
|
</div> -->
|
|
<div class="add-img" ref="addImg">
|
|
<div class="add-img" ref="addImg">
|
|
|
|
+ <div class="tooltip-msg">
|
|
|
|
+ <img
|
|
|
|
+ src="../../assets/images/icons/notice.png"
|
|
|
|
+ @mouseover="showToolTip"
|
|
|
|
+ @mouseout="hideToolTip"
|
|
|
|
+ width="20px"
|
|
|
|
+ height="20px"
|
|
|
|
+ />
|
|
|
|
+ <transition name="selectDownUpExtendTop">
|
|
|
|
+ <div v-show="showExeclTooltip">
|
|
|
|
+ <div class="tool-tip" v-if="showXFXTToltip">
|
|
|
|
+ 标准:<br />
|
|
|
|
+ 1、仅可插入行,不可插入列。(最多拓展两列)<br />
|
|
|
|
+ 2、点击单个单元格,并进行左右或者上下滑动已选中多个单元格并进行合并单元格。<br />
|
|
|
|
+ 3、手动输入字符后,单元格可根据字符长度自适应调整单元格大小。最多不可超过15个字符。(编号不可合并排列,应拆分每个编号并按照每个编号录入)
|
|
|
|
+ </div>
|
|
|
|
+ <div class="tool-tip" v-else>
|
|
|
|
+ 标准:<br />
|
|
|
|
+ 1、添加仅支持添加行。添加时每添加一个分区则默认添加该分区下的监控系统、BA系统和门禁系统。<br />
|
|
|
|
+ 2、仅可修改和编辑分区和数量这一列。
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </transition>
|
|
|
|
+ </div>
|
|
<div id="result"></div>
|
|
<div id="result"></div>
|
|
|
|
+ <!-- 提示信息 -->
|
|
<div class="btn-list">
|
|
<div class="btn-list">
|
|
<el-upload
|
|
<el-upload
|
|
class=""
|
|
class=""
|
|
@@ -124,6 +149,22 @@
|
|
@click="downloadExl"
|
|
@click="downloadExl"
|
|
>下载</el-button
|
|
>下载</el-button
|
|
>
|
|
>
|
|
|
|
+ <el-upload
|
|
|
|
+ class=""
|
|
|
|
+ action="#"
|
|
|
|
+ :http-request="uploadTemplateExl"
|
|
|
|
+ :show-file-list="false"
|
|
|
|
+ >
|
|
|
|
+ <el-button
|
|
|
|
+ style="
|
|
|
|
+ width: 75px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ padding: 7px 5px;
|
|
|
|
+ "
|
|
|
|
+ size="mini"
|
|
|
|
+ >模板上传</el-button
|
|
|
|
+ >
|
|
|
|
+ </el-upload>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -156,6 +197,7 @@ import {
|
|
uploadExcel,
|
|
uploadExcel,
|
|
downloadExcel,
|
|
downloadExcel,
|
|
previewExecl,
|
|
previewExecl,
|
|
|
|
+ uploadExcelTemplate,
|
|
} from "@/api/equipmentList.js";
|
|
} from "@/api/equipmentList.js";
|
|
import { mapGetters } from "vuex";
|
|
import { mapGetters } from "vuex";
|
|
import store from "../../store";
|
|
import store from "../../store";
|
|
@@ -183,6 +225,8 @@ export default {
|
|
keyLd: "keyLd_" + new Date().getTime(),
|
|
keyLd: "keyLd_" + new Date().getTime(),
|
|
ShowDialog: false, //是否显示弹窗
|
|
ShowDialog: false, //是否显示弹窗
|
|
showLookPic: false,
|
|
showLookPic: false,
|
|
|
|
+ showExeclTooltip: false, // 是否展示execl提示信息,
|
|
|
|
+ showXFXTToltip: false, //是否展示消防系统tooltip
|
|
};
|
|
};
|
|
},
|
|
},
|
|
components: { floorList, eqDialog, floorMap },
|
|
components: { floorList, eqDialog, floorMap },
|
|
@@ -198,6 +242,18 @@ export default {
|
|
} */
|
|
} */
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ showToolTip() {
|
|
|
|
+ this.showExeclTooltip = true;
|
|
|
|
+ if (this.smsxt == 1003) {
|
|
|
|
+ // 是否是消防系统
|
|
|
|
+ this.showXFXTToltip = true;
|
|
|
|
+ } else {
|
|
|
|
+ this.showXFXTToltip = false;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ hideToolTip() {
|
|
|
|
+ this.showExeclTooltip = false;
|
|
|
|
+ },
|
|
/**
|
|
/**
|
|
* excel文件上传
|
|
* excel文件上传
|
|
*/
|
|
*/
|
|
@@ -228,6 +284,8 @@ export default {
|
|
message: "上传成功",
|
|
message: "上传成功",
|
|
type: "success",
|
|
type: "success",
|
|
});
|
|
});
|
|
|
|
+ // 刷新预览界面
|
|
|
|
+ this.previewExl();
|
|
} else {
|
|
} else {
|
|
this.$message({
|
|
this.$message({
|
|
message: "上传失败",
|
|
message: "上传失败",
|
|
@@ -264,12 +322,53 @@ export default {
|
|
this.readWorkbook(workbook);
|
|
this.readWorkbook(workbook);
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
+ // 上传模板execl
|
|
|
|
+ uploadTemplateExl(resData) {
|
|
|
|
+ const { file } = resData;
|
|
|
|
+ // 创建FormData对象
|
|
|
|
+ const isLt30M = file.size / 1024 / 1024 < 30;
|
|
|
|
+ if (!["xls", "xlsx"].includes(file.name.split(".")[1])) {
|
|
|
|
+ this.$message.warning("上传文件只能是 xls、xlsx格式!");
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ if (!isLt30M) {
|
|
|
|
+ this.$message.warning("上传excel模板大小不能超过 30MB!");
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ const formData = new FormData();
|
|
|
|
+ // 将得到的文件流添加到FormData对象
|
|
|
|
+ formData.append("file", file, file.name);
|
|
|
|
+ const getParams = {
|
|
|
|
+ plazaId: this.plazaId,
|
|
|
|
+ smsxt: this.smsxt,
|
|
|
|
+ };
|
|
|
|
+ const data = formData;
|
|
|
|
+ uploadExcelTemplate({ getParams, data }).then((res) => {
|
|
|
|
+ if (res?.result === "success") {
|
|
|
|
+ this.$message({
|
|
|
|
+ message: "上传成功",
|
|
|
|
+ type: "success",
|
|
|
|
+ });
|
|
|
|
+ // 刷新预览界面
|
|
|
|
+ this.previewExl();
|
|
|
|
+ } else {
|
|
|
|
+ this.$message({
|
|
|
|
+ message: "上传失败",
|
|
|
|
+ type: "error",
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
// 将表格追加到页面节点展示
|
|
// 将表格追加到页面节点展示
|
|
readWorkbook(workbook) {
|
|
readWorkbook(workbook) {
|
|
var sheetNames = workbook.SheetNames; // 工作表名称集合
|
|
var sheetNames = workbook.SheetNames; // 工作表名称集合
|
|
var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
|
|
var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
|
|
- const xlsxHtml = XLSX.write(workbook,{sheet:sheetNames[0],type:'string',bookType:'html'});
|
|
|
|
- document.getElementById("result").innerHTML = xlsxHtml;
|
|
|
|
|
|
+ const xlsxHtml = XLSX.write(workbook, {
|
|
|
|
+ sheet: sheetNames[0],
|
|
|
|
+ type: "string",
|
|
|
|
+ bookType: "html",
|
|
|
|
+ });
|
|
|
|
+ document.getElementById("result").innerHTML = xlsxHtml;
|
|
},
|
|
},
|
|
// 查询tab页
|
|
// 查询tab页
|
|
tabSyatem(item) {
|
|
tabSyatem(item) {
|
|
@@ -668,6 +767,7 @@ export default {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
|
+ position: relative;
|
|
.btn-list {
|
|
.btn-list {
|
|
display: flex;
|
|
display: flex;
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -678,6 +778,28 @@ export default {
|
|
display: block;
|
|
display: block;
|
|
margin: 0 auto;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
+ .tooltip-msg {
|
|
|
|
+ position: relative;
|
|
|
|
+ z-index: 999;
|
|
|
|
+ width: 100%;
|
|
|
|
+ img {
|
|
|
|
+ width: 20px;
|
|
|
|
+ height: 20px;
|
|
|
|
+ float: right;
|
|
|
|
+ margin: 0 auto 12px;
|
|
|
|
+ }
|
|
|
|
+ .tool-tip {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 20px;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ padding: 0.8rem 1.6rem 1.6rem;
|
|
|
|
+ font-size: 1.4rem;
|
|
|
|
+ line-height: 2.2rem;
|
|
|
|
+ background: white;
|
|
|
|
+ border: 1px solid rgba(151, 151, 151, 0.2);
|
|
|
|
+ filter: drop-shadow(0 2px 4px rgba(31, 35, 41, 0.1));
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -728,7 +850,10 @@ export default {
|
|
#result {
|
|
#result {
|
|
width: 408px;
|
|
width: 408px;
|
|
position: relative;
|
|
position: relative;
|
|
|
|
+ height: 408px;
|
|
|
|
+ overflow-y: auto;
|
|
table {
|
|
table {
|
|
|
|
+ width: 100%;
|
|
border-collapse: collapse;
|
|
border-collapse: collapse;
|
|
}
|
|
}
|
|
th,
|
|
th,
|
|
@@ -740,4 +865,20 @@ export default {
|
|
margin-top: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+@keyframes selectDownUpExtendTop {
|
|
|
|
+ from {
|
|
|
|
+ transform: translateY(8px);
|
|
|
|
+ opacity: 0;
|
|
|
|
+ }
|
|
|
|
+ to {
|
|
|
|
+ transform: translateY(0);
|
|
|
|
+ opacity: 1;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.selectDownUpExtendTop-enter-active {
|
|
|
|
+ animation: selectDownUpExtendTop 0.3s;
|
|
|
|
+}
|
|
|
|
+.selectDownUpExtendTop-leave-active {
|
|
|
|
+ animation: selectDownUpExtendTop 0.3s reverse;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|