YaolongHan hace 4 años
padre
commit
5c9a205c90
Se han modificado 1 ficheros con 181 adiciones y 106 borrados
  1. 181 106
      src/components/edit/attr_select.vue

+ 181 - 106
src/components/edit/attr_select.vue

@@ -32,7 +32,7 @@
             :label="item.src"
             :value="item.id"
           >
-            <img :src="item.src" alt width='180' />
+            <img :src="item.src" alt width="180" />
           </a-select-option>
         </a-select>
       </div>
@@ -56,7 +56,12 @@
           <a-input-number v-model="fontSize" :min="1" @change="changeFont" style="width: 168px" />
         </div>
         <div class="color-choice">
-          <swatches v-model="fontColor" :swatches="swatchesFont" popover-x="left" @close="changeFontColor" />
+          <swatches
+            v-model="fontColor"
+            :swatches="swatchesFont"
+            popover-x="left"
+            @close="changeFontColor"
+          />
         </div>
       </div>
       <div class="row">
@@ -115,17 +120,22 @@
       <div v-if="type =='Image'|| type == 'Line'">
         <div class="row">
           <div class="row-tit">显示名称</div>
-          <a-button type="link" class="edit-option-btn" @click="OpenEditStatus">{{isEdit? "取消编辑" : editStatus[type]}}</a-button>
+          <a-button
+            type="link"
+            class="edit-option-btn"
+            @click="OpenEditStatus"
+          >{{isEdit? "取消编辑" : editStatus[type]}}</a-button>
         </div>
         <div :class="['row' ,type == 'Line'?'disabled-textarea':'']">
-          <a-textarea :disabled="type == 'Line' "
-                  placeholder=""
-                  v-model="lengedName"
-                  allow-clear
-                  @change="changeLengedName"
-                  :rows="2"
+          <a-textarea
+            :disabled="type == 'Line' "
+            placeholder
+            v-model="lengedName"
+            allow-clear
+            @change="changeLengedName"
+            :rows="2"
           />
-<!--          <a-input v-model="lengedName" @change="changeLengedName" />-->
+          <!--          <a-input v-model="lengedName" @change="changeLengedName" />-->
         </div>
         <div class="row" v-show="type =='Image'">
           <div class="row-tit">字号</div>
@@ -133,7 +143,12 @@
             <a-input-number v-model="fontSize" :min="1" @change="changeFont" style="width: 168px" />
           </div>
           <div class="color-choice">
-            <swatches v-model="fontColor" :swatches="swatchesFont" @close="changeFontColor" popover-x="left" />
+            <swatches
+              v-model="fontColor"
+              :swatches="swatchesFont"
+              @close="changeFontColor"
+              popover-x="left"
+            />
           </div>
         </div>
         <!-- 当为设备状态时 -->
@@ -179,13 +194,13 @@
           </div>
           <div class="row">
             <a-textarea
-                    placeholder=""
-                    v-model="lengedName"
-                    allow-clear
-                    @change="changeLengedName"
-                    :rows="2"
+              placeholder
+              v-model="lengedName"
+              allow-clear
+              @change="changeLengedName"
+              :rows="2"
             />
-<!--            <a-input v-model="lengedName" @change="changeLengedName" />-->
+            <!--            <a-input v-model="lengedName" @change="changeLengedName" />-->
           </div>
           <div class="row">
             <div class="row-tit">字号</div>
@@ -198,7 +213,12 @@
               />
             </div>
             <div class="color-choice">
-              <swatches v-model="fontColor" :swatches="swatchesFont" @close="changeFontColor" popover-x="left" />
+              <swatches
+                v-model="fontColor"
+                :swatches="swatchesFont"
+                @close="changeFontColor"
+                popover-x="left"
+              />
             </div>
           </div>
         </div>
@@ -206,14 +226,14 @@
           <!-- 石材铺装 -->
           <div class="row">
             <div class="row-tit">图例说明</div>
-            <a-button type="link" class="edit-option-btn" @click="OpenEditStatus">{{isEdit? "取消编辑" : editStatus[type]}}</a-button>
+            <a-button
+              type="link"
+              class="edit-option-btn"
+              @click="OpenEditStatus"
+            >{{isEdit? "取消编辑" : editStatus[type]}}</a-button>
           </div>
           <div class="row">
-            <a-textarea
-              @change="changeitemExplain"
-              v-model="itemExplain"
-              :rows="4"
-            />
+            <a-textarea @change="changeitemExplain" v-model="itemExplain" :rows="4" />
           </div>
           <div class="row">
             <div class="row-tit">描边</div>
@@ -241,32 +261,65 @@
           <!-- 自定义 -->
           <div class="row-tit">
             <span style="margin-right:10px;color:#8d9399">填充颜色</span>
-            <el-color-picker show-alpha v-model="CUSTOMbgColor" @change='changBgColor' style="vertical-align:middle;"></el-color-picker>
+            <el-color-picker
+              show-alpha
+              v-model="CUSTOMbgColor"
+              @change="changBgColor"
+              style="vertical-align:middle;"
+            ></el-color-picker>
           </div>
           <div class="row-tit">
             <span style="margin-right:10px;color:#8d9399">边框颜色</span>
-            <el-color-picker show-alpha v-model="CUSTOMbdColor" @change='changBdColor' style="vertical-align:middle;"></el-color-picker>
+            <el-color-picker
+              show-alpha
+              v-model="CUSTOMbdColor"
+              @change="changBdColor"
+              style="vertical-align:middle;"
+            ></el-color-picker>
           </div>
           <div class="row">
             <div class="row-tit">显示名称</div>
-            <a-button type="link" class="edit-option-btn" @click="OpenEditStatus">{{isEdit? "取消编辑" : editStatus[type]}}</a-button>
+            <a-button
+              type="link"
+              class="edit-option-btn"
+              @click="OpenEditStatus"
+            >{{isEdit? "取消编辑" : editStatus[type]}}</a-button>
           </div>
           <div class="row">
-            <a-textarea placeholder="" v-model="lengedName" allow-clear @change="changeLengedName" :rows="2"/>
+            <a-textarea
+              placeholder
+              v-model="lengedName"
+              allow-clear
+              @change="changeLengedName"
+              :rows="2"
+            />
           </div>
           <div class="row">
             <div class="row-tit">字号</div>
             <div class="grid-content">
-              <a-input-number v-model="fontSize" :min="1" @change="changeFont" style="width: 168px" />
+              <a-input-number
+                v-model="fontSize"
+                :min="1"
+                @change="changeFont"
+                style="width: 168px"
+              />
             </div>
             <div class="color-choice">
-              <swatches v-model="fontColor" :swatches="swatchesFont" @close="changeFontColor" popover-x="left" />
+              <swatches
+                v-model="fontColor"
+                :swatches="swatchesFont"
+                @close="changeFontColor"
+                popover-x="left"
+              />
             </div>
           </div>
         </div>
         <div v-if="!SubType">
           <!-- 普通分区 -->
           <div class="row">
+            <div class="row-tit">图例名称</div>
+          </div>
+          <div class="row">
             <div class="row-tit">显示名称</div>
             <a-button
               type="link"
@@ -276,13 +329,13 @@
           </div>
           <div class="row">
             <a-textarea
-                    placeholder=""
-                    v-model="lengedName"
-                    allow-clear
-                    @change="changeLengedName"
-                    :rows="2"
+              placeholder
+              v-model="lengedName"
+              allow-clear
+              @change="changeLengedName"
+              :rows="2"
             />
-<!--            <a-input v-model="lengedName" @change="changeLengedName" />-->
+            <!--            <a-input v-model="lengedName" @change="changeLengedName" />-->
           </div>
           <div class="row">
             <div class="row-tit">字号</div>
@@ -295,7 +348,12 @@
               />
             </div>
             <div class="color-choice">
-              <swatches v-model="fontColor" :swatches="swatchesFont" @close="changeFontColor" popover-x="left" />
+              <swatches
+                v-model="fontColor"
+                :swatches="swatchesFont"
+                @close="changeFontColor"
+                popover-x="left"
+              />
             </div>
           </div>
         </div>
@@ -315,7 +373,11 @@
         </div>
 
         <div class="grid-content" style="margin-top: 12px;">
-          <a-card class="attr-card" v-for="(item,index) in attrCards" :key="index">{{item.sbjc ||item.wzjc}}</a-card>
+          <a-card
+            class="attr-card"
+            v-for="(item,index) in attrCards"
+            :key="index"
+          >{{item.sbjc ||item.wzjc}}</a-card>
         </div>
       </a-spin>
     </div>
@@ -349,8 +411,15 @@
         </a-collapse-panel>
       </a-collapse>
     </div>
-    <editDialog ref="dialog" :attrCards="attrCards" :GraphElementId="GraphElementId" :InfoLocal="InfoLocal" :sysNum="imageNum" :key="keys" />
-<!--    <editDialog ref="dialog" :attrCards="attrCards" :getmajorId="getmajorId" :InfoLocal="InfoLocal" :sysNum="imageNum" :key="new Date().getTime()" />-->
+    <editDialog
+      ref="dialog"
+      :attrCards="attrCards"
+      :GraphElementId="GraphElementId"
+      :InfoLocal="InfoLocal"
+      :sysNum="imageNum"
+      :key="keys"
+    />
+    <!--    <editDialog ref="dialog" :attrCards="attrCards" :getmajorId="getmajorId" :InfoLocal="InfoLocal" :sysNum="imageNum" :key="new Date().getTime()" />-->
     <!--    <editDialog ref="dialog" :typeEdit="2" :getmajorId="'1001'" :sysNum="5" />-->
   </div>
 </template>
@@ -369,8 +438,8 @@ import {
 } from "@/api/editer.js";
 import { getUrlMsg } from "@/components/urlMsg.js";
 // mapclass里边的没有透明度
-import { hexify } from "@/utils/rgbaUtil"
-import { SCustomLegendItem } from '@/lib/items/SCustomLegendItem';
+import { hexify } from "@/utils/rgbaUtil";
+import { SCustomLegendItem } from "@/lib/items/SCustomLegendItem";
 export default {
   name: "attr_select",
   props: ["type", "focusItemList"],
@@ -442,7 +511,7 @@ export default {
         "#8E43AD",
         "#3D556E",
         "#222F3D",
-        "#00000000",
+        "#00000000"
       ],
       swatchesFont: [
         "#1fbc9c",
@@ -471,11 +540,11 @@ export default {
       spinning: false,
       isEdit: false,
       getmajorId: "",
-      InfoLocal:[],
-      GraphElementId:'',//图例Id
-      CUSTOMbgColor: 'rgba(0,0,0,0.15)', // 自定义多边形背景色
-      CUSTOMbdColor: 'rgba(0,0,0,1)', // 自定义多边形线条色
-      keys:new Date().getTime()
+      InfoLocal: [],
+      GraphElementId: "", //图例Id
+      CUSTOMbgColor: "rgba(0,0,0,0.15)", // 自定义多边形背景色
+      CUSTOMbdColor: "rgba(0,0,0,1)", // 自定义多边形线条色
+      keys: new Date().getTime()
     };
   },
   methods: {
@@ -518,14 +587,14 @@ export default {
       }
     },
     // 用户自定义多边形 修改背景色
-    changBgColor(val){
+    changBgColor(val) {
       const color = hexify(val); // 转为16进制
-      bus.$emit('CUSTOMbgColor',color)
+      bus.$emit("CUSTOMbgColor", color);
     },
     // 用户自定义多边形 修改现调颜色
-    changBdColor(val){
+    changBdColor(val) {
       const color = hexify(val); // 转为16进制
-      bus.$emit('CUSTOMbdColor',color)
+      bus.$emit("CUSTOMbdColor", color);
     },
     customRequest(info) {
       const formData = new FormData();
@@ -559,10 +628,10 @@ export default {
       }
     },
     handleEdit() {
-      this.keys = new Date().getTime()
-      setTimeout(()=>{
-          this.$refs.dialog.showModal();
-      })
+      this.keys = new Date().getTime();
+      setTimeout(() => {
+        this.$refs.dialog.showModal();
+      });
     },
     // 修改设备数量
     changeImageNum() {
@@ -604,9 +673,9 @@ export default {
   },
   watch: {
     focusItemList: function(newval) {
-      console.log('------------')
-      console.log(FENGMAP)
-      console.log('newval',newval)
+      console.log("------------");
+      console.log(FENGMAP);
+      console.log("newval", newval);
       const Item = newval.itemList[0];
       this.GraphElementId = Item.data.GraphElementId;
       this.imageNum = 1; //切换item初始化
@@ -663,14 +732,14 @@ export default {
         } else if (newval.itemType == "baseImage") {
           this.lineWidth = Item.lineWidth;
           this.borderColor = Item.strokeColor.value;
-        }else if (
+        } else if (
           newval.itemType == "Zone" ||
           newval.itemType == "Line" ||
           newval.itemType == "Image"
         ) {
           setTimeout(() => {
-            this.isEdit = (Item.status == SItemStatus.Edit);
-          }, 300)
+            this.isEdit = Item.status == SItemStatus.Edit;
+          }, 300);
           if (newval.itemType == "Image") {
             this.imageNum = Item.num;
             this.lengedName = Item.name;
@@ -698,10 +767,14 @@ export default {
             if (newval.itemList.length) {
               if (newval.itemList[0] instanceof SCustomLegendItem) {
                 const fColor = newval.itemList[0].fillColor;
-                this.CUSTOMbgColor = `rgba(${fColor.red}, ${fColor.green}, ${fColor.blue}, ${fColor.alpha/100})`
+                this.CUSTOMbgColor = `rgba(${fColor.red}, ${fColor.green}, ${
+                  fColor.blue
+                }, ${fColor.alpha / 100})`;
 
                 const bColor = newval.itemList[0].strokeColor;
-                this.CUSTOMbdColor = `rgba(${bColor.red}, ${bColor.green}, ${bColor.blue}, ${bColor.alpha/100})`
+                this.CUSTOMbdColor = `rgba(${bColor.red}, ${bColor.green}, ${
+                  bColor.blue
+                }, ${bColor.alpha / 100})`;
               }
             }
           }
@@ -711,14 +784,14 @@ export default {
       const assetnumList = [];
       let params = {};
       this.attrCards = [];
-      if(Item.data.AttachObjectIds && Item.data.AttachObjectIds.length ){
-          Item.data.AttachObjectIds.map(item => {
-        if (item.type == "Zone") {
-          locationList.push(item.id);
-        } else if (item.type == "Image") {
-          assetnumList.push(item.id);
-        }
-      });
+      if (Item.data.AttachObjectIds && Item.data.AttachObjectIds.length) {
+        Item.data.AttachObjectIds.map(item => {
+          if (item.type == "Zone") {
+            locationList.push(item.id);
+          } else if (item.type == "Image") {
+            assetnumList.push(item.id);
+          }
+        });
       }
       // if(newval.itemType == 'Zone'){
       this.spinning = true;
@@ -727,26 +800,26 @@ export default {
       } else {
         params = { locationList: [""] };
       }
-      queryGlsmsLocation({ plazaId: getUrlMsg().projectId }, params).then(
-        res => {
+      queryGlsmsLocation({ plazaId: getUrlMsg().projectId }, params)
+        .then(res => {
           this.spinning = false;
           if (res.data.result == "success") {
             console.log(res.data);
             if (res.data.data && res.data.data.length) {
-              let ZoneData = res.data.data
-              ZoneData.map(item=>{
-                item.type='Zone'
-              })
+              const ZoneData = res.data.data;
+              ZoneData.map(item => {
+                item.type = "Zone";
+              });
               this.attrCards = this.attrCards.concat(ZoneData);
             }
           } else {
             // this.$message.error("工程信息化中的位置信息获取失败");
           }
-        }
-      ).catch(()=>{
-        this.spinning = false;
-        // this.$message.error("工程信息化中的位置信息获取失败");
-      });
+        })
+        .catch(() => {
+          this.spinning = false;
+          // this.$message.error("工程信息化中的位置信息获取失败");
+        });
       // }else if(newval.itemType == 'Image'){
       this.spinning = true;
       if (assetnumList.length) {
@@ -754,24 +827,26 @@ export default {
       } else {
         params = { assetnumList: [""] };
       }
-      queryGlsmsAsset({ plazaId: getUrlMsg().projectId }, params).then(res => {
-        this.spinning = false;
-        if (res.data.result == "success") {
-          console.log(res.data);
-          if (res.data.data && res.data.data.length) {
-            let data =  res.data.data;
-            data.map(item=>{
-              item.type='Image'
-            })
-            this.attrCards = this.attrCards.concat(data);
+      queryGlsmsAsset({ plazaId: getUrlMsg().projectId }, params)
+        .then(res => {
+          this.spinning = false;
+          if (res.data.result == "success") {
+            console.log(res.data);
+            if (res.data.data && res.data.data.length) {
+              const data = res.data.data;
+              data.map(item => {
+                item.type = "Image";
+              });
+              this.attrCards = this.attrCards.concat(data);
+            }
+          } else {
+            // this.$message.error("工程信息化中的设备信息获取失败");
           }
-        } else {
+        })
+        .catch(() => {
+          this.spinning = false;
           // this.$message.error("工程信息化中的设备信息获取失败");
-        }
-      }).catch(()=>{
-        this.spinning = false;
-        // this.$message.error("工程信息化中的设备信息获取失败");
-      });
+        });
       // }
       console.log(this.attrCards);
     }
@@ -780,11 +855,11 @@ export default {
 </script>
 
 <style scoped lang="less">
-  .disabled-textarea{
-    /deep/ .ant-input{
-      resize: none;
-    }
+.disabled-textarea {
+  /deep/ .ant-input {
+    resize: none;
   }
+}
 /deep/ .ant-spin-nested-loading {
   height: 100% !important;
   .ant-spin-container {
@@ -811,7 +886,7 @@ export default {
         width: 26px !important;
         height: 26px !important;
         border-radius: 2px !important;
-        border: 1px solid #dcdcdc ;
+        border: 1px solid #dcdcdc;
       }
     }
     .row-tit {
@@ -819,7 +894,7 @@ export default {
       font-size: 14px;
     }
   }
-  .row:first-child{
+  .row:first-child {
     margin-top: 0;
   }
   .grid {
@@ -831,7 +906,7 @@ export default {
   }
 
   .grid-content {
-     /*margin-top: 12px;*/
+    /*margin-top: 12px;*/
     height: calc(100% - 48px);
     overflow-y: scroll;
     position: relative;