123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415 |
- <template>
- <div id="attr-select">
- <!--选中-->
- <div class="attr-select" v-if="type==='line'">
- <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="handleChange"
- >
- <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==='text'">
- <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" popover-x="left" @close="changebackColor" />
- </div>
- </div>
- </div>
- <!--图片-->
- <div class="attr-select" v-if="type==='images'">
- <span class="grid-title">文字内容</span>
- <section class="grid">
- <div class="grid-content">
- <a-upload-dragger
- name="file"
- :customRequest="customRequest"
- 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-if="type =='equipment' || type =='pipeline' ||type == 'fire-area' ||type == 'position'"
- >
- <div class="row-tit" v-if="type == 'fire-area'">颜色</div>
- <div class="row" v-if="type == 'fire-area'">
- <swatches :swatches="swatchess" v-model="color" inline></swatches>
- </div>
- <div class="row">
- <div class="row-tit">名称显示</div>
- <a-button type="link" class="edit-option-btn">{{editStatus[type]}}</a-button>
- </div>
- <div class="row">
- <a-input />
- </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="color" popover-x="left" />
- </div>
- </div>
- <!-- 当为设备状态时 -->
- <div class="row" v-if="type =='equipment'">
- <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 class="row" v-if="type =='pipeline'">
- <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>
- <!--设备/工程信息化ID/工程信息化中的位置类型-->
- <div
- class="attr-select attr-select-bottom"
- v-if="type =='equipment' || type =='pipeline' || type =='fire-area' ||type == 'position'"
- >
- <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;">
- <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" header="键盘操作提示" :style="customStyle">
- <p v-for="item in keyboardOperation" :key="item.value">{{item.value}}</p>
- </a-collapse-panel>
- </a-collapse>
- </div>
- <editDialog ref="dialog" />
- </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: "拖动画布:" },
- { value: "加选对象:" },
- { value: "确认操作:" },
- { value: "取消对象:" }
- ],
- 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: {
- equipment: "编辑设备",
- pipeline: "管道编辑",
- "fire-area": "编辑区域",
- position: "编辑区域"
- },
- swatchess: ["#57C5FC", "#5F70E1", "#4DAE6C", "#028FAA"]
- };
- },
- methods: {
- onChange(e) {
- this.precision = e.target.checked === true ? false : true;
- },
- handleChange(value) {
- console.log(`selected ${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(color) {
- bus.$emit("changeBorderColor", color);
- },
- // 改变字体颜色
- 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.$set(this.ruleForm, 'Url', res.EntityList[0])
- this.$message.success(`${info.file.name} file uploaded successfully.`);
- }else{
- this.$message.error(`${info.file.name} file upload failed.`);
- }
- })
- },
- 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();
- }
- },
- watch: {
- focusItemList: function(newval) {
- const Item = newval.itemList[0];
- if (newval.itemList.length == 1) {
- if (newval.itemType == "text") {
- this.textMsg = Item.text;
- this.fontSize = Item.font.size;
- this.fontColor = Item.color;
- this.backColor = Item.backgroundColor;
- } else if (newval.itemType == "line") {
- this.lineWidth = Item.lineWidth;
- this.borderColor = Item.strokeColor;
- }
- }
- }
- }
- };
- </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;
- }
- }
- #attr-select {
- width: 100%;
- height: 100%;
- .attr-select-bottom {
- height: 100%;
- width: 100%;
- position: absolute;
- overflow-y: auto;
- padding-bottom: 400px;
- }
- }
- </style>
|