上传下载优化

src/api/equipmentList.js

@@ -70,6 +70,10 @@ export function queryBrand({ getParams }) {
 export function queryPicList({ getParams }) {
     return httputils.getJson(`/data/file/getCadList`, getParams)
 }
+// 设备设施-表格模板上传
+export function uploadExcelTemplate({ getParams, data }) {
+    return httputils.postupload(`/data/file/uploadExcelTemplate`, getParams, data)
+}
 // 设备设施-表格上传
 export function uploadExcel({ getParams, data }) {
     return httputils.postupload(`/data/file/uploadExcel`, getParams, data)

src/components/floorMap/darkColorIndex.vue

@@ -555,7 +555,7 @@ export default {
             return;
           }
           // 改变底图演示
-          ItemColor.spaceColor = new SColor("#0C102C");
+          ItemColor.spaceColor = new SColor("#55586F");
           this.fParser = new SFloorParser(null);
           this.fParser.parseData(res);
           this.fParser.spaceList.forEach((t) => {

src/components/floorMap/index.vue

@@ -11,6 +11,7 @@
     <!-- 搜索框（仅在供电系统显示） -->
 
     <el-select
+      v-show="showShopSerch"
       class="serchShop"
       v-model="serchmsg"
       filterable
@@ -289,6 +290,7 @@ export default {
       serchmsg: "", //搜索信息
       options: [],
       serchlist: [], //搜索list
+      showShopSerch: false //展示商铺搜索
     };
   },
   props: {
@@ -888,7 +890,8 @@ export default {
       }
       this.clearHightLight();
       // 清空搜索框
-      this.clearShop()
+      this.options = [];
+      this.serchmsg = '';
     },
     // 选中电井关联的商铺高亮
     setHightLight(arr) {
@@ -1050,6 +1053,10 @@ export default {
     },
     getEvent() {
       bus.$on("changeShow", (res) => {
+      // 如果是供电系统则展示搜索商铺选框
+    const categoryId  = this.categoryId ?this.categoryId: this.$cookie.get("categoryId");
+    categoryId == 'GDXT' ? this.showShopSerch = true :this.showShopSerch = false;
+
         this.topologyParser &&
           this.topologyParser.zoneLegendList.forEach((t) => {
             let id = t.data.GraphElementId;

src/components/menuList.vue

@@ -8,7 +8,7 @@
       <div class="downright"></div>
       <div class="home-box">
         <img v-if="!showStyle" src="@/assets/imgs/logo.png" alt />
-        <img v-else src="@/assets/imgs/logo1.png" alt="" />
+        <img width="24px" height="24px" v-else src="@/assets/imgs/logo1.png" alt="" />
         <span>{{ plazaName || "万达集团" }}</span>
         <!-- <span v-if='plazas'>{{plazas.length>0?formatter(plazaId,plazas):'--'}}</span> -->
       </div>
@@ -370,15 +370,19 @@ export default {
     justify-content: space-between;
     background: linear-gradient(180deg, #103979 0%, #162653 100%);
     margin-right: 0px;
+    height:76px;
     .downright {
       position: absolute;
       width: 0;
       height: 0;
-      border-left: 20px solid transparent;
-      border-bottom: 48px solid #0c102c;
+      border-left: 40px solid transparent;
+      border-bottom: 76px solid #0c102c;
       right: 0px;
       top: 0;
     }
+    span{
+      font-size: 30px;
+    }
   }
 
   .btnlist {
@@ -405,28 +409,6 @@ export default {
       );
     }
   }
-  .btnlist-style {
-    display: flex;
-    align-content: center;
-    & > div {
-      line-height: 48px;
-      text-align: center;
-      background: url("../assets/imgs/btn-rect.png") no-repeat;
-      float: left;
-      max-width: 142px;
-      min-width: 100px;
-      height: 48px;
-      margin: 0 8px;
-      cursor: pointer;
-      transition: all 0.2s;
-      color: #fff;
-    }
-    .is-active {
-      color: #95bfff;
-      font-weight: bolder;
-      background: url("../assets/imgs/btn-rect-active.png") no-repeat;
-    }
-  }
   .home-right {
     float: right;
     margin-right: 40px;
@@ -467,10 +449,40 @@ export default {
     padding-left: 3px;
   }
 }
+ .btnlist-style {
+    display: flex;
+    align-content: center;
+    margin-top: 28px;
+    & > div {
+      line-height: 48px;
+      text-align: center;
+       padding-left: 12px;
+      box-sizing: border-box;
+      background: url("../assets/imgs/btn-rect.png") no-repeat;
+      float: left;
+      max-width: 142px;
+      min-width: 100px;
+      height: 48px;
+      margin: 0 8px;
+      cursor: pointer;
+      transition: all 0.2s;
+      color: #fff;
+    }
+    .is-active {
+      color: #95bfff;
+      font-weight: bolder;
+      background: url("../assets/imgs/btn-rect-active.png") no-repeat;
+    }
+  }
 .menu-style {
   background: #0c102c;
   display: flex;
   justify-content: space-between;
+  height: 76px;
+      .home-right{
+      margin-top: 28px;
+      height: 48px;
+    }
 }
 .checkkout {
   display: flex;

src/lib/items/SImageLegendItem.ts

@@ -57,7 +57,24 @@ export class SImageLegendItem extends SIconTextItem {
         }
         this.update()
     }
-
+    get selected() {
+        return this._selected && this.selectable && this.enabled;
+    }
+    set selected(value) {
+        if (this.selected == value) {
+            return;
+        }
+        this._selected = value;
+        if (value) {
+            this.img.scale = 1.6;
+            this.zOrder = ItemOrder.highLightOrder;
+        }
+        else {
+            this.img.scale = 1;
+            this.zOrder = ItemOrder.markOrder;
+        }
+        this.update();
+    }
     /**
      * 构造函数
      *

src/views/equipment/index.vue

@@ -96,7 +96,32 @@
                       <img :src="fqPic[0].url" alt />
                     </div> -->
                     <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 class="btn-list">
                         <el-upload
                           class=""
@@ -124,6 +149,22 @@
                           @click="downloadExl"
                           >下载</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>
@@ -156,6 +197,7 @@ import {
   uploadExcel,
   downloadExcel,
   previewExecl,
+  uploadExcelTemplate,
 } from "@/api/equipmentList.js";
 import { mapGetters } from "vuex";
 import store from "../../store";
@@ -183,6 +225,8 @@ export default {
       keyLd: "keyLd_" + new Date().getTime(),
       ShowDialog: false, //是否显示弹窗
       showLookPic: false,
+      showExeclTooltip: false, // 是否展示execl提示信息,
+      showXFXTToltip: false, //是否展示消防系统tooltip
     };
   },
   components: { floorList, eqDialog, floorMap },
@@ -198,6 +242,18 @@ export default {
         } */
   },
   methods: {
+    showToolTip() {
+      this.showExeclTooltip = true;
+      if (this.smsxt == 1003) {
+        //    是否是消防系统
+        this.showXFXTToltip = true;
+      } else {
+        this.showXFXTToltip = false;
+      }
+    },
+    hideToolTip() {
+      this.showExeclTooltip = false;
+    },
     /**
      * excel文件上传
      */
@@ -228,6 +284,8 @@ export default {
             message: "上传成功",
             type: "success",
           });
+          //   刷新预览界面
+          this.previewExl();
         } else {
           this.$message({
             message: "上传失败",
@@ -264,12 +322,53 @@ export default {
         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) {
       var sheetNames = workbook.SheetNames; // 工作表名称集合
       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页
     tabSyatem(item) {
@@ -668,6 +767,7 @@ export default {
                 width: 100%;
                 height: 100%;
                 overflow: hidden;
+                position: relative;
                 .btn-list {
                   display: flex;
                   width: 100%;
@@ -678,6 +778,28 @@ export default {
                   display: block;
                   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 {
   width: 408px;
   position: relative;
+  height: 408px;
+  overflow-y: auto;
   table {
+    width: 100%;
     border-collapse: collapse;
   }
   th,
@@ -740,4 +865,20 @@ export default {
     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>

src/views/homepage/Circle.js

@@ -18,7 +18,7 @@ export class SCircle {
         this.circleY = canvas.height / 2;  //中心y坐标
         this.radius = radius; //圆环半径
         this.lineWidth = 5;  //圆形线条的宽度
-        this.fontSize = radius *3/4; //字体大小
+        this.fontSize = radius *3/5; //字体大小
         this.baseName = '本月总任务'
     }
 

src/views/homepage/darkColor.vue

@@ -504,58 +504,55 @@ export default {
     // 获取右侧统计数据
     getRightstatic() {
       // 设置圆环半径
-        const BoxDom = document.getElementsByClassName("canvas-circle")[0];
-        this.canvasCircle = 0;
-        if (BoxDom.offsetHeight > BoxDom.offsetWidth) {
-          this.canvasCircle = BoxDom.offsetWidth / 2;
-        } else {
-          this.canvasCircle = BoxDom.offsetHeight / 2;
-        }
-        // 对右侧数据做遍历
-        this.statisticsList.forEach((statisticItem) => {
-          const TYPE = statisticItem.type; // 类型
-          const Dom = document.getElementById(`canvas_${TYPE}`);
-          // 设置Dom得width\height
-          Dom.height = this.canvasCircle * 2;
-          Dom.width = this.canvasCircle * 2;
-          this.projectStatistics(
-            statisticItem.type,
-            statisticItem.system,
-            statisticItem.type == 1
-              ? moment().format("YYYYMM")
-              : moment().format("YYYY")
-          ).then((res) => {
-            let circle_basename = null;
-            statisticItem.type == 1
-              ? (circle_basename = "本月总任务")
-              : (circle_basename = "本年总任务");
-            const circle = new SCircle(
-              `canvas_${TYPE}`,
-              this.canvasCircle * 0.7
-            );
-            circle.baseName = circle_basename;
-            // 总数
-            let total = 0;
-            // 即将预期
-            let due_num = 0;
-            //  未完成任务
-            let unfinished = 0;
-            // 累计统计
-            res.data.forEach((item) => {
-              total = total + item.total;
-              due_num = due_num + item.due_num;
-              unfinished = unfinished + item.unfinished;
-            });
-            // 赋值
-            Object.assign(statisticItem, {
-              total,
-              due_num,
-              unfinished,
-            });
-            circle.persentTransform(total, due_num, unfinished);
-            circle.setText(total);
+      const BoxDom = document.getElementsByClassName("canvas-circle")[0];
+      this.canvasCircle = 0;
+      if (BoxDom.offsetHeight > BoxDom.offsetWidth) {
+        this.canvasCircle = BoxDom.offsetWidth / 2;
+      } else {
+        this.canvasCircle = BoxDom.offsetHeight / 2;
+      }
+      // 对右侧数据做遍历
+      this.statisticsList.forEach((statisticItem) => {
+        const TYPE = statisticItem.type; // 类型
+        const Dom = document.getElementById(`canvas_${TYPE}`);
+        // 设置Dom得width\height
+        Dom.height = this.canvasCircle * 2;
+        Dom.width = this.canvasCircle * 2;
+        this.projectStatistics(
+          statisticItem.type,
+          statisticItem.system,
+          statisticItem.type == 1
+            ? moment().format("YYYYMM")
+            : moment().format("YYYY")
+        ).then((res) => {
+          let circle_basename = null;
+          statisticItem.type == 1
+            ? (circle_basename = "本月总任务")
+            : (circle_basename = "本年总任务");
+          const circle = new SCircle(`canvas_${TYPE}`, this.canvasCircle * 0.7);
+          circle.baseName = circle_basename;
+          // 总数
+          let total = 0;
+          // 即将预期
+          let due_num = 0;
+          //  未完成任务
+          let unfinished = 0;
+          // 累计统计
+          res.data.forEach((item) => {
+            total = total + item.total;
+            due_num = due_num + item.due_num;
+            unfinished = unfinished + item.unfinished;
           });
+          // 赋值
+          Object.assign(statisticItem, {
+            total,
+            due_num,
+            unfinished,
+          });
+          circle.persentTransform(total, due_num, unfinished);
+          circle.setText(total);
         });
+      });
     },
   },
   created() {
@@ -587,7 +584,7 @@ export default {
   .homepage {
     width: 100%;
     height: 100%;
-    padding: 56px 16px 40px 16px;
+    padding: 30px 16px 40px 16px;
     box-sizing: border-box;
     display: flex;
     .system-main-title {
@@ -601,8 +598,9 @@ export default {
       color: #95bfff;
       position: relative;
       h4 {
-        color: #fff;
+        color: #95bfff;
         margin-left: 18px;
+        font-size: 18px;
       }
       .downright {
         position: absolute;
@@ -675,7 +673,7 @@ export default {
             .system-equipments-container {
               position: relative;
               width: 88%;
-              padding: 10px;
+              padding: 6px;
               margin-left: 18%;
               .more {
                 position: absolute;
@@ -969,7 +967,7 @@ export default {
       box-sizing: border-box;
       .box {
         width: 100%;
-        height: ~"calc((100% - 30px) / 3)";
+        height: ~"calc((100% - 60px) / 3)";
         background: radial-gradient(#20284f 20%, transparent 20%) 0 0;
         background-color: transparent;
         background-size: 8px 8px;
@@ -987,6 +985,18 @@ export default {
               background: rgba(22, 73, 206, 0.36) !important;
               color: #fff !important;
             }
+            /deep/.p-select-search {
+              .p-select-search-box {
+                background-color: rgba(22, 73, 206, 0.36) !important;
+                border: 1px solid #2e5772 !important;
+                .p-select-choice-name {
+                  color: white !important;
+                }
+                .p-select-search-input {
+                  color: white !important;
+                }
+              }
+            }
           }
         }
         .box-bottom {
@@ -1007,7 +1017,7 @@ export default {
           .msg {
             flex: 1;
             padding: 0 0 0 20px;
-            white-space:nowrap;
+            white-space: nowrap;
             box-sizing: border-box;
             .msg-item:nth-of-type(1) {
               display: flex;