1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006 |
- <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"
- :rows="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"
- :rows="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" :rows="4" />
- </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"
- :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"
- />
- </div>
- <div class="color-choice">
- <swatches
- v-model="fontColor"
- :swatches="swatchesFont"
- @close="changeFontColor"
- popover-x="left"
- />
- </div>
- </div>
- </div>
- <div v-show="!SubType">
- <!-- 普通分区 -->
- <div class="row">
- <!-- 修改图例 -->
- <div class="row-tit">图例名称</div>
- <div>
- <a-dropdown :trigger="['click']">
- <a class="ant-dropdown-link" @click="e => e.preventDefault()" >
- afdaf<a-icon type="down" />
- </a>
- <a-menu slot="overlay">
- <a-menu-item>
- <a href="javascript:;">1st menu item</a>
- </a-menu-item>
- <a-menu-item>
- <a href="javascript:;">2nd menu item</a>
- </a-menu-item>
- <a-menu-item>
- <a href="javascript:;">3rd menu item</a>
- </a-menu-item>
- </a-menu>
- </a-dropdown>
- </div>
- </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"
- :rows="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="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>
- <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)", // 自定义多边形线条色
- keys: new Date().getTime(),
- dataSelect: [
- { id: "totalEnergy", name: "总量" },
- { id: "singleParty", name: "单平米" }
- ],
- selVal: "totalEnergy",
- selText: "总量"
- };
- },
- 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.keys = new Date().getTime();
- setTimeout(() => {
- 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);
- },
- xxx(val){
- alert(val)
- }
- },
- 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) {
- 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("工程信息化中的位置信息获取失败");
- });
- // }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) {
- const data = res.data.data;
- data.map(item => {
- item.type = "Image";
- });
- this.attrCards = this.attrCards.concat(data);
- }
- } else {
- // this.$message.error("工程信息化中的设备信息获取失败");
- }
- })
- .catch(() => {
- this.spinning = false;
- // this.$message.error("工程信息化中的设备信息获取失败");
- });
- // }
- console.log(this.attrCards);
- },
- selVal(n, o) {
- if (n === o) return;
- this.selText = this.dataSelect.find(d => d.id === n).name;
- }
- }
- };
- </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;*/
- height: calc(100% - 48px);
- overflow-y: scroll;
- 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: 243px;
- 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>
|