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"
            @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"
          :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 />
          </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" 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"
            :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"
            @change="changeLineWidth"
            style="width: 168px"
          />
        </div>
        <div class="color-choice">
          <swatches v-model="color" popover-x="left" />
        </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-tit" v-if="true">颜色</div>
        <div class="row" v-if="true">
          <swatches @input="changefillColor" :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">{{editStatus[type]}}</a-button>
        </div>
        <div class="row">
          <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" @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="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"
              @change="changeLineWidth"
              style="width: 208px"
            />
          </div>
        </div>
      </div>
      <div v-else>
        <div v-if="SubType=='FHFQ'">
          <!-- 防火分区 -->
          <div class="row-tit">颜色</div>
          <div class="row">
            <swatches @input="changefillColor" :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"
            >{{editStatus[type]}}</a-button>
          </div>
          <div class="row">
            <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" @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">编辑区域</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"
                @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">
          <!-- 普通分区 -->
          <div class="row">
            <div class="row-tit">名称显示</div>
            <a-button
              type="link"
              class="edit-option-btn"
              @click="OpenEditStatus"
            >{{editStatus[type]}}</a-button>
          </div>
          <div class="row">
            <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" @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 == 'fire-Zone' ||type == 'Line'"
    >
      <div class="row">
        <span>{{`工程信息化ID`}}</span>
        <a-button type="link" class="edit-option-btn" @click="handleEdit">选择编辑</a-button>
      </div>

      <div class="grid-content">
        <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD4</a-card>
        <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
        <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
      </div>
    </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" :typeEdit="1" :getmajorId="'1001'" :sysNum="5" />
    <!--    <editDialog ref="dialog" :typeEdit="2" :getmajorId="'设备间'" :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 { ItemColor } from "@saga-web/big/lib";
import { uploadImg } from "@/api/editer.js";
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文字
      borderLineOption: [
        {
          id: "solid",
          src: require("@/assets/images/1pxline.jpg")
        },
        {
          id: "dashed",
          src: require("@/assets/images/dashedLine.jpg")
        },
        {
          id: "dotted",
          src: require("@/assets/images/dotLine.jpg")
        }
      ],
      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: ["#69C5FC", "#656EDF", "#58AF6F", "#2D8FAA"],
      swatches: [
          "#00000000",
          "#1FBC9C",
          "#1CA085",
          "#2ECC70",
          "#27AF60",
          "#3398DB",
          "#2980B9",
          "#A463BF",
          "#8E43AD",
          "#3D556E",
          "#222F3D",
      ],
      lengedName: "", // 图例名称
      imageNum: 1, //设备数量
      fillColor: "", //修改填充色 （主要针对防火风区以及石材铺装）
      SubType: "", //空间类型，区分石材铺装
      itemExplain:'' //图例说明 只针对石材铺装
    };
  },
  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() {
      bus.$emit("changeBorderColor", this.borderColor);
    },
    // 改变字体颜色
    changeFontColor(color) {
      bus.$emit("changeFontColor", color);
    },
    changebackColor(color) {
      bus.$emit("changebackColor", 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.imageNum = 1;
      }
      bus.$emit("changeImageNum", this.imageNum);
    },
    changefillColor() {
      bus.$emit("changefillColor", this.fillColor);
    },
    //设置缩小item为编辑状态
    OpenEditStatus() {
      bus.$emit("OpenEditStatus");
    },
    // 编辑图例说明
    changeitemExplain(){
      bus.$emit("changeitemExplain",this.itemExplain);
    }
  },
  watch: {
    focusItemList: function(newval) {
      const Item = newval.itemList[0];
      if (Item.data && Item.data.SubType) {
        this.SubType = Item.data.SubType;
      }
      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;
        } else if (
          newval.itemType == "Zone" ||
          newval.itemType == "Line" ||
          newval.itemType == "Image"
        ) {
          this.lengedName = Item.data.Name;
          if (newval.itemType == "Image") {
            this.imageNum = Item.num;
            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;
          }
        }
      }
    }
  }
};
</script>

<style scoped lang="less">
.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 {
      & /deep/ .vue-swatches__trigger {
        width: 26px !important;
        height: 26px !important;
        border-radius: 0px !important;
      }
    }
    .row-tit {
      color: #1f2429;
      font-size: 14px;
    }
  }
  .grid {
    margin: 10px 15px;
    .grid-title {
      font-size: 12px;
      color: #8d9399;
    }
  }

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

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

  .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>