|
@@ -0,0 +1,136 @@
|
|
|
+<template>
|
|
|
+ <div id="graphy">
|
|
|
+ <div class="canvas-box">
|
|
|
+ <canvas id="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
|
|
|
+ </div>
|
|
|
+ <!-- 初始两个按钮 -->
|
|
|
+ <div class="buttons-box">
|
|
|
+ <div>
|
|
|
+ <el-autocomplete popper-class="my-autocomplete" v-model="search" :fetch-suggestions="querySearch" placeholder="输入平面图中已有的业务空间名称进行查找"
|
|
|
+ width="180px" @select="handleSelect">
|
|
|
+ <i class="el-icon-search el-input__icon" slot="suffix" @click="handleIconClick"></i>
|
|
|
+ <template slot-scope="{ item }">
|
|
|
+ <div class="name" style="position: relative;">
|
|
|
+ {{ item.infos.RoomLocalName | cutString(8) }}
|
|
|
+ <span class="addr" style="position: absolute;right:10px;color:#409EFF;">定位</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-autocomplete>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- 默认操作模式 -->
|
|
|
+ <div v-show="type==1">
|
|
|
+ <el-button @click="1">创建业务空间</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 点击已经关联的业务空间 -->
|
|
|
+ <div v-show="type==2">
|
|
|
+ <el-button type="primary" plain>重新划分业务空间</el-button>
|
|
|
+ <el-button type="primary">编辑空间详情</el-button>
|
|
|
+ <el-button plain>取 消</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 点击未关联的业务空间 -->
|
|
|
+ <div v-show="type==3">
|
|
|
+ <el-button plain>创建业务空间</el-button>
|
|
|
+ <el-button type="primary">从未关联元空间的业务空间中选择</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 重新划分业务空间 -->
|
|
|
+ <div v-show="type==4">
|
|
|
+ <el-button type="primary" plain>从未关联元空间的业务空间中选择</el-button>
|
|
|
+ <el-button plain>取 消</el-button>
|
|
|
+ <el-button type="primary">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-button style="position: absolute;top: 10px;right: 10px;" type="text">未关联元空间的业务空间 {{num}} 条</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 底部操作按钮 -->
|
|
|
+ <el-row class="canvas-actions-box">
|
|
|
+ <div>
|
|
|
+ <i class="el-icon-rank"></i>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <i class="el-icon-rank"></i>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <i class="el-icon-download"></i>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <i class="el-icon-remove-outline"></i>
|
|
|
+ </div>
|
|
|
+ <div class="line">
|
|
|
+ <el-slider tooltip-class="tooltip-class" :max="0.02" :min="0.004"></el-slider>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <i class="el-icon-circle-plus-outline"></i>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ canvasWidth: 800,
|
|
|
+ canvasHeight: 600,
|
|
|
+ type: 1, // 默认操作模式
|
|
|
+ search: '',//搜索
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 搜索
|
|
|
+ querySearch() { },
|
|
|
+ // 选中
|
|
|
+ handleSelect() { }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ cutString: function (str, len) {
|
|
|
+ //length属性读出来的汉字长度为1
|
|
|
+ if (!!str && typeof str == "string" && str.length > len) {
|
|
|
+ return str.substring(0, len) + "...";
|
|
|
+ } else {
|
|
|
+ return str || "--";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+#graphy {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 56px);
|
|
|
+ .canvas-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .buttons-box {
|
|
|
+ position: absolute;
|
|
|
+ .my-autocomplete {
|
|
|
+ li {
|
|
|
+ line-height: normal;
|
|
|
+ padding: 7px;
|
|
|
+ .name {
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .addr {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #b4b4b4;
|
|
|
+ }
|
|
|
+ .highlighted .addr {
|
|
|
+ color: #ddd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .canvas-actions-box {
|
|
|
+ position: absolute;
|
|
|
+ bottom:20px;
|
|
|
+ &>div{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|