wanda-editer/src/components/edit/attr_select.vue

<template>
  <div id="attr-select">
    <!--选中-->
    <div class="attr-select" v-if="type==='baseLine'">
      <span class="grid-title">外观</span>
      <div class="row">
        <div class="row-tit">线宽</div>
        <div class="grid-content">
          <a-input-number
            v-model="lineWidth"
            :min="1"
            :max="9"
            @change="changeLineWidth"
            style="width: 168px"
          />
        </div>
        <div class="color-choice">
          <swatches v-model="borderColor" popover-x="left" @close="changeBorderColor" />
        </div>
      </div>
      <div class="row">
        <div class="row-tit">线型</div>
        <a-select
          style="width: 208px"
          v-model="borderStyle"
          :default-value="borderLineOption[0].id"
          @change="changeBorder"
        >
          <a-select-option
            v-for="item in borderLineOption"
            :key="item.id"
            :label="item.src"
            :value="item.id"
          >
            <img :src="item.src" alt width='180' />
          </a-select-option>
        </a-select>
      </div>
    </div>
    <!--文字内容-->
    <div class="attr-select" v-if="type==='baseText'">
      <span class="grid-title">文字内容</span>
      <div class="grid-content">
        <a-textarea
          placeholder="请在此处输入文字！"
          v-model="textMsg"
          allow-clear
          @change="changeTextArea"
          :rows="4"
        />
      </div>
      <span class="grid-title">外观</span>
      <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" />
        </div>
        <div class="color-choice">
          <swatches v-model="fontColor" :swatches="swatchesFont" popover-x="left" @close="changeFontColor" />
        </div>
      </div>
      <div class="row">
        <div class="row-tit">背景色</div>
        <div class="color-choice">
          <swatches
            v-model="backColor"
            :swatches="swatches"
            popover-x="left"
            @close="changebackColor"
          />
        </div>
      </div>
    </div>
    <!--图片-->
    <div class="attr-select" v-if="type=='baseImage'">
      <span class="grid-title">图片</span>
      <section class="grid">
        <div class="grid-content">
          <a-upload-dragger
            name="file"
            accept="image/*"
            :customRequest="customRequest"
            :showUploadList="false"
            action="https://jsonplaceholder.typicode.com/posts/"
            @change="changeImage"
          >
            <p class="icon-image">
              <a-icon type="cloud-upload" />
            </p>
            <p class="ant-upload-text">将图片拖动到这里替换</p>
            <p class="ant-upload-hint">本地上传</p>
          </a-upload-dragger>
        </div>
      </section>
      <span class="grid-title">外观</span>
      <div class="row">
        <div class="row-tit">边框</div>
        <div class="grid-content">
          <a-input-number
            v-model="lineWidth"
            :min="1"
            :max="9"
            @change="changeLineWidth"
            style="width: 168px"
          />
        </div>
        <div class="color-choice">
          <swatches v-model="borderColor" popover-x="left" @close="changeBorderColor" />
        </div>
      </div>
    </div>

    <!--针对“设备/位置/管线/分区”属性示例-->
    <div class="attr-select" v-show="type =='Image'|| type == 'Line' || type == 'Zone'">
      <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>
        </div>
        <div :class="['row' ,type == 'Line'?'disabled-textarea':'']">
          <a-textarea :disabled="type == 'Line' "
                  placeholder=""
                  v-model="lengedName"
                  allow-clear
                  @change="changeLengedName"
                  :auto-size="{ minRows: 2}"
          />
<!--          <a-input v-model="lengedName" @change="changeLengedName" />-->
        </div>
        <div class="row" v-show="type =='Image'">
          <div class="row-tit">字号</div>
          <div class="grid-content">
            <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" />
          </div>
        </div>
        <!-- 当为设备状态时 -->
        <div class="row" v-if="type =='Image'">
          <div class="row-tit">数量</div>
          <div class="grid-content">
            <a-input-number
              v-model="imageNum"
              :min="attrCards.length==imageNum?imageNum:1"
              @change="changeImageNum"
              style="width: 208px"
            />
          </div>
        </div>
        <!-- 当为管道状态时 -->
        <div class="row" v-if="type =='Line'">
          <div class="row-tit">线宽</div>
          <div class="grid-content">
            <a-input-number
              v-model="lineWidth"
              :min="1"
              :max="9"
              @change="changeLineWidth"
              style="width: 208px"
            />
          </div>
        </div>
      </div>
      <div v-if="type == 'Zone'">
        <div v-if="SubType=='FHFQ'">
          <!-- 防火分区 -->
          <div class="row-tit">颜色</div>
          <div class="row">
            <swatches @input="fhfqchangefillColor" :swatches="swatchess" v-model="fillColor" inline></swatches>
          </div>
          <div class="row">
            <div class="row-tit">显示名称</div>
            <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"
                    :auto-size="{ minRows: 2}"
            />
<!--            <a-input v-model="lengedName" @change="changeLengedName" />-->
          </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"
              />
            </div>
            <div class="color-choice">
              <swatches v-model="fontColor" :swatches="swatchesFont" @close="changeFontColor" popover-x="left" />
            </div>
          </div>
        </div>
        <div v-if="SubType=='SCPZ'">
          <!-- 石材铺装 -->
          <div class="row">
            <div class="row-tit">图例说明</div>
            <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"
              :auto-size="{ minRows: 4, maxRows: 6 }"
            />
          </div>
          <div class="row">
            <div class="row-tit">描边</div>
            <div class="grid-content">
              <a-input-number
                v-model="lineWidth"
                :min="1"
                :max="9"
                @change="changeLineWidth"
                style="width: 168px"
              />
            </div>
            <div class="color-choice">
              <swatches v-model="borderColor" @close="changeBorderColor" popover-x="left" />
            </div>
          </div>
          <div class="row">
            <div class="row-tit">填充</div>
            <div class="color-choice">
              <swatches v-model="fillColor" @close="changefillColor" popover-x="left" />
            </div>
          </div>
        </div>
        <div v-if="SubType=='CUSTOM'">
          <!-- 自定义 -->
          <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>
          </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>
          </div>
          <div class="row">
            <div class="row-tit">显示名称</div>
            <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" :auto-size="{ minRows: 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" />
            </div>
            <div class="color-choice">
              <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>
            <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"
                    :auto-size="{ minRows: 2}"
            />
<!--            <a-input v-model="lengedName" @change="changeLengedName" />-->
          </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"
              />
            </div>
            <div class="color-choice">
              <swatches v-model="fontColor" :swatches="swatchesFont" @close="changeFontColor" popover-x="left" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--设备/工程信息化ID/工程信息化中的位置类型-->

    <div
      class="attr-select attr-select-bottom"
      v-if="type =='Zone' || type =='Image'||type == 'Line'"
    >
      <a-spin :spinning="spinning">
        <div class="row">
          <span class="edit-option-text">{{type =='Zone'?`工程信息化中的位置类型`:'工程信息化中的设备类型'}}</span>
          <a-button type="link" class="edit-option-btn" @click="handleEdit">选择编辑</a-button>
        </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>
        </div>
      </a-spin>
    </div>
    <!--    快捷操作提示-->
    <div style="position: fixed;bottom: 0;width: 280px;" class="key-boards">
      <a-collapse :bordered="false" expand-icon-position="right">
        <template #expandIcon="props">
          <a-icon type="caret-up" :rotate="props.isActive ? 180 : 0" />
        </template>
        <a-collapse-panel key="1" :style="customStyle">
          <template slot="header">
            <div style="font-size: 12px;color: #8D9399;">
              <a-icon type="exclamation-circle" />
              <span style="margin-left: 5px;">键盘操作提示</span>
            </div>
          </template>

          <p
            v-for="item in keyboardOperation"
            :key="item.value"
            style="display: flex;margin-top: 13px;"
          >
            <span>{{item.value}}</span>
            <span class="key-board">{{item.keys}}</span>
            <span v-if="item.events" style="margin: 0 5px;">
              +
              <img style="width:13px;height:18px;" src="./../../assets/images/shubiao.png" alt />
            </span>
            <span>{{item.events}}</span>
          </p>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <editDialog ref="dialog" :attrCards="attrCards" :GraphElementId="GraphElementId" :InfoLocal="InfoLocal" :sysNum="imageNum" :key="new Date().getTime()" />
<!--    <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>

<script>
import editDialog from "./edit-dialog";
import Swatches from "vue-swatches";
import bus from "@/bus";
import "vue-swatches/dist/vue-swatches.css";
import { SLineStyle } from "@saga-web/graph/lib";
import { SItemStatus } from "@saga-web/big";
import {
  uploadImg,
  queryGlsmsLocation,
  queryGlsmsAsset
} from "@/api/editer.js";
import { getUrlMsg } from "@/components/urlMsg.js";
// mapclass里边的没有透明度
import { hexify } from "@/utils/rgbaUtil"
import { SCustomLegendItem } from '@/lib/items/SCustomLegendItem';
export default {
  name: "attr_select",
  props: ["type", "focusItemList"],
  components: { editDialog, Swatches },
  data() {
    return {
      precisionList: [{ value: 10 }, { value: 20 }, { value: 30 }],
      precision: true,
      customStyle:
        "background: #fff;overflow: hidden;  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);border:0",
      keyboardOperation: [
        { value: "拖动画布：", keys: "Space", events: "Click" },
        { value: "加选对象：", keys: "Ctrl", events: "Press" },
        { value: "确认操作：", keys: "Enter" },
        { value: "取消对象：", keys: "Enter" }
      ],
      numberValue: 3,
      fontSize: 12, //字体大小
      lineWidth: 0,
      textMsg: "", //
      color: "#1CA085",
      fontColor: "#1CA085", //文字颜色
      borderColor: "", // 边框颜色 直线，折线，多边形等
      backColor: "", //背景色 用于text文字
      borderStyle: "solid",
      borderLineOption: [
        {
          id: "solid",
          src: require("@/assets/images/solidLine.png")
        },
        {
          id: "dashed",
          src: require("@/assets/images/dashedLine.png")
        },
        {
          id: "dotted",
          src: require("@/assets/images/dotLine.png")
        }
      ],
      linepxOption: [
        {
          id: 1,
          src: require("@/assets/images/1pxline.jpg")
        },
        {
          id: 2,
          src: require("@/assets/images/2pxline.jpg")
        },
        {
          id: 3,
          src: require("@/assets/images/3pxline.jpg")
        }
      ],
      editStatus: {
        Image: "编辑设备",
        Line: "管道编辑",
        Zone: "编辑区域"
      },
      swatchess: ["#57C5FC", "#5F6CE1", "#71B312", "#00A177"],
      swatches: [
        "#f7f9facc",
        "#1FBC9C",
        "#1CA085",
        "#2ECC70",
        "#27AF60",
        "#3398DB",
        "#2980B9",
        "#A463BF",
        "#8E43AD",
        "#3D556E",
        "#222F3D",
        "#00000000",
      ],
      swatchesFont: [
        "#1fbc9c",
        "#1ca085",
        "#2ecc70",
        "#27af60",
        "#3398db",
        "#2980b9",
        "#a463bf",
        "#8e43ad",
        "#646c73",
        "#1f2429",
        "#f2c511",
        "#f39c19",
        "#e84b3c",
        "#c0382b",
        "#dde6e8",
        "#bdc3c8"
      ],
      lengedName: "", // 图例名称
      imageNum: 1, //设备数量
      fillColor: "", //修改填充色 （主要针对防火风区以及石材铺装）
      SubType: "", //空间类型，区分石材铺装
      itemExplain: "", //图例说明 只针对石材铺装
      attrCards: [],
      spinning: false,
      isEdit: false,
      getmajorId: "",
      InfoLocal:[],
      GraphElementId:'',//图例Id
      CUSTOMbgColor: 'rgba(0,0,0,0.15)', // 自定义多边形背景色
      CUSTOMbdColor: 'rgba(0,0,0,1)', // 自定义多边形线条色
    };
  },
  methods: {
    onChange(e) {
      this.precision = e.target.checked === true ? false : true;
    },
    changeBorder(value) {
      bus.$emit("changeBorder", value);
    },
    changeNumber() {
      bus.$emit("changeFont", this.fontSize);
    },
    // 改变字体大小
    changeFont() {
      bus.$emit("changeFont", this.fontSize);
    },
    // 改变线宽
    changeLineWidth() {
      bus.$emit("changeLineWidth", this.lineWidth);
    },
    // 改变文案
    changeTextArea() {
      bus.$emit("changeText", this.textMsg);
    },
    // 改变线的颜色
    changeBorderColor() {
      if (this.borderColor) {
        bus.$emit("changeBorderColor", this.borderColor);
      }
    },
    // 改变字体颜色
    changeFontColor(color) {
      if (color) {
        bus.$emit("changeFontColor", color);
      }
    },
    changebackColor(color) {
      if (color) {
        bus.$emit("changebackColor", color);
      }
    },
    // 用户自定义多边形 修改背景色
    changBgColor(val){
      const color = hexify(val); // 转为16进制
      bus.$emit('CUSTOMbgColor',color)
    },
    // 用户自定义多边形 修改现调颜色
    changBdColor(val){
      const color = hexify(val); // 转为16进制
      bus.$emit('CUSTOMbdColor',color)
    },
    customRequest(info) {
      const formData = new FormData();
      formData.append("file", info.file);
      const postParams = formData;
      uploadImg({ postParams }).then(res => {
        if (res.Result == "success") {
          bus.$emit("upadataImageUrl", res.EntityList[0]);
          this.$message.success(
            `${info.file.name} file uploaded successfully.`
          );
        } else {
          this.$message.error(`${info.file.name} file upload failed.`);
        }
      });
    },
    //更改图例名称
    changeLengedName() {
      bus.$emit("changeLengedName", this.lengedName);
    },
    changeImage(info) {
      const status = info.file.status;
      console.log(status);
      if (status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (status === "done") {
        this.$message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
    handleEdit() {
      this.$refs.dialog.showModal();
    },
    // 修改设备数量
    changeImageNum() {
      if (this.imageNum < this.attrCards.length) {
        this.imageNum = this.attrCards.length;
        return false;
      }
      if (!this.imageNum) {
        this.imageNum = 1;
      }
      bus.$emit("changeImageNum", this.imageNum);
    },
    // 石材铺装
    changefillColor() {
      if (this.fillColor) {
        bus.$emit("changefillColor", this.fillColor);
      }
    },
    // 防火分区
    fhfqchangefillColor() {
      if (this.fillColor) {
        bus.$emit("changeBorderColor", this.fillColor);
        bus.$emit("changefillColor", this.fillColor);
      }
    },
    //设置缩小item为编辑状态
    OpenEditStatus() {
      this.isEdit = !this.isEdit;
      bus.$emit("OpenEditStatus");
    },
    // 编辑图例说明
    changeitemExplain() {
      bus.$emit("changeitemExplain", this.itemExplain);
    },
    // 更改工程信息化数据
    changeAttachObjectIds(arr) {
      bus.$emit("changeAttachObjectIds", arr);
    }
  },
  watch: {
    focusItemList: function(newval) {
      console.log('------------')
      console.log(FENGMAP)
      console.log('newval',newval)
      const Item = newval.itemList[0];
      this.GraphElementId = Item.data.GraphElementId;
      this.imageNum = 1; //切换item初始化
      if (Item.data && Item.data.SubType) {
        this.SubType = Item.data.SubType;
      } else {
        this.SubType = "";
      }
      this.getmajorId = Item.data.Properties.InfoSystemId;
      this.InfoLocal = Item.data.Properties.InfoLocal;
      //判断点 面 带回专业类
      // let InfoTypeIdArr = [];
      // if( Item.data.Properties.InfoTypeId.length){
      //   let InfoTypeId = Item.data.Properties.InfoTypeId;
      //   console.log('poiList',11111111111111,FENGMAP.poiList);
      //   console.log('spaceType',2222222222222222,FENGMAP.spaceType);
      //   if(FENGMAP.poiList.length){
      //     FENGMAP.poiList.join(',').split(',').map((item,index)=>{
      //       let n = InfoTypeId.includes(item)
      //       if(n){
      //         InfoTypeIdArr.push(item);
      //       }
      //     })
      //   }else if(FENGMAP.spaceType.length){
      //     FENGMAP.spaceType.join(',').split(',').map((item,index)=>{
      //       let n = InfoTypeId.includes(item)
      //       if(n){
      //         InfoTypeIdArr.push(item);
      //       }
      //     })
      //   }else{
      //     this.getmajorId = '';
      //   }
      // }
      // InfoTypeIdArr.length? this.getmajorId = InfoTypeIdArr[0]:this.getmajorId ='';
      //结束

      if (newval.itemList.length == 1) {
        if (newval.itemType == "baseText") {
          this.textMsg = Item.text;
          this.fontSize = Item.font.size;
          this.fontColor = Item.color.value;
          this.backColor = Item.backgroundColor.value;
        } else if (newval.itemType == "baseLine") {
          this.lineWidth = Item.lineWidth;
          this.borderColor = Item.strokeColor.value;
          if (Item.lineStyle == SLineStyle.Solid) {
            this.borderStyle = "solid";
          } else if (Item.lineStyle == SLineStyle.Dashed) {
            this.borderStyle = "dashed";
          } else if (Item.lineStyle == SLineStyle.Dotted) {
            this.borderStyle = "dotted";
          }
        } else if (newval.itemType == "baseImage") {
          this.lineWidth = Item.lineWidth;
          this.borderColor = Item.strokeColor.value;
        }else if (
          newval.itemType == "Zone" ||
          newval.itemType == "Line" ||
          newval.itemType == "Image"
        ) {
          setTimeout(() => {
            this.isEdit = (Item.status == SItemStatus.Edit);
          }, 300)
          if (newval.itemType == "Image") {
            this.imageNum = Item.num;
            this.lengedName = Item.name;
            this.color = Item.color.value;
            this.fontSize = Item.font.size;
          } else if (newval.itemType == "Line") {
            // this.color = Item.color.value;
            this.fillColor = Item.fillColor.value;
            this.borderColor = Item.strokeColor.value;
            this.lineWidth = Item.lineWidth;
            this.lengedName = Item.name;
          } else if (newval.itemType == "Zone") {
            this.lengedName = Item.name;
            this.fontSize = Item.font.size;
            this.fontColor = Item.color.value;
            this.lineWidth = Item.lineWidth;
            this.borderColor = Item.strokeColor ? Item.strokeColor.value : "";
            this.fillColor = Item.fillColor ? Item.fillColor.value : "";
            this.itemExplain = "";
            if (Item.data.Properties.ItemExplain) {
              this.itemExplain = Item.data.Properties.ItemExplain
                ? Item.data.Properties.ItemExplain
                : "";
            }
            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})`
                
                const bColor = newval.itemList[0].strokeColor;
                this.CUSTOMbdColor = `rgba(${bColor.red}, ${bColor.green}, ${bColor.blue}, ${bColor.alpha/100})`
              }
            }
          }
        }
      }
      const locationList = [];
      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(newval.itemType == 'Zone'){
      this.spinning = true;
      if (locationList.length) {
        params = { locationList: locationList };
      } else {
        params = { locationList: [""] };
      }
      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) {
              this.attrCards = this.attrCards.concat(res.data.data);
            }
          } else {
            // this.$message.error("工程信息化中的位置信息获取失败");
          }
        }
      ).catch(()=>{
        this.spinning = false;
        // this.$message.error("工程信息化中的位置信息获取失败");
      });
      // }else if(newval.itemType == 'Image'){
      this.spinning = true;
      if (assetnumList.length) {
        params = { assetnumList: assetnumList };
      } 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) {
            this.attrCards = this.attrCards.concat(res.data.data);
          }
        } else {
          // this.$message.error("工程信息化中的设备信息获取失败");
        }
      }).catch(()=>{
        this.spinning = false;
        // this.$message.error("工程信息化中的设备信息获取失败");
      });
      // }
      console.log(this.attrCards);
    }
  }
};
</script>

<style scoped lang="less">
  .disabled-textarea{
    /deep/ .ant-input{
      resize: none;
    }
  }
/deep/ .ant-spin-nested-loading {
  height: 100% !important;
  .ant-spin-container {
    height: 100% !important;
  }
}
.attr-select {
  padding: 12px 16px;
  box-sizing: border-box;
  .grid-title {
    font-size: 12px;
    color: #8d9399;
  }
  .row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    .color-choice {
      width: 26px;
      height: 26px;
      & /deep/ .vue-swatches__trigger {
        width: 26px !important;
        height: 26px !important;
        border-radius: 2px !important;
        border: 1px solid #dcdcdc;
      }
    }
    .row-tit {
      color: #8d9399;
      font-size: 14px;
    }
  }
  .row:first-child{
    margin-top: 0;
  }
  .grid {
    margin: 10px 15px;
    .grid-title {
      font-size: 12px;
      color: #8d9399;
    }
  }

  .grid-content {
     /*margin-top: 12px;*/
    position: relative;
  }

  .icon-image {
    font-size: 25px;
  }

  .edit-option-text {
    color: #8d9399;
    height: 32px;
    line-height: 32px;
    /*margin-top: -5px;*/
  }

  .edit-option-btn {
    float: right;
    /*margin-top: -5px;*/
  }

  .attr-card {
    width: 250px;
    margin-bottom: 10px;
    white-space: normal;
    box-shadow: 0px 2px 6px 0px rgba(31, 36, 41, 0.05);
    border-radius: 4px;
  }

  .ant-upload.ant-upload-drag p.ant-upload-text {
    font-size: 14px;
    color: #c3c7cb;
  }

  .ant-upload.ant-upload-drag p.ant-upload-hint {
    color: #0091ff;
  }
}
.key-boards {
  .key-board {
    width: 52px;
    height: 24px;
    border-radius: 3px;
    border: 1px solid rgba(195, 199, 203, 1);
    font-size: 14px;
    color: #646a73;
    text-align: center;
  }
  /deep/ .ant-collapse-content {
    border-top: 1px solid #eff0f1;
  }
}
#attr-select {
  width: 100%;
  height: 100%;
  .attr-select-bottom {
    height: 100%;
    width: 100%;
    position: absolute;
    overflow-y: auto;
    padding-bottom: 400px;
  }
}
</style>