attr_select.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415
  1. <template>
  2. <div id="attr-select">
  3. <!--选中-->
  4. <div class="attr-select" v-if="type==='line'">
  5. <span class="grid-title">外观</span>
  6. <div class="row">
  7. <div class="row-tit">线宽</div>
  8. <div class="grid-content">
  9. <a-input-number
  10. v-model="lineWidth"
  11. :min="1"
  12. @change="changeLineWidth"
  13. style="width: 168px"
  14. />
  15. </div>
  16. <div class="color-choice">
  17. <swatches v-model="borderColor" popover-x="left" @close="changeBorderColor" />
  18. </div>
  19. </div>
  20. <div class="row">
  21. <div class="row-tit">线型</div>
  22. <a-select
  23. style="width: 208px"
  24. :default-value="borderLineOption[0].id"
  25. @change="handleChange"
  26. >
  27. <a-select-option
  28. v-for="item in borderLineOption"
  29. :key="item.id"
  30. :label="item.src"
  31. :value="item.id"
  32. >
  33. <img :src="item.src" alt />
  34. </a-select-option>
  35. </a-select>
  36. </div>
  37. </div>
  38. <!--文字内容-->
  39. <div class="attr-select" v-if="type==='text'">
  40. <span class="grid-title">文字内容</span>
  41. <div class="grid-content">
  42. <a-textarea
  43. placeholder="请在此处输入文字!"
  44. v-model="textMsg"
  45. allow-clear
  46. @change="changeTextArea"
  47. :rows="4"
  48. />
  49. </div>
  50. <span class="grid-title">外观</span>
  51. <div class="row">
  52. <div class="row-tit">字号</div>
  53. <div class="grid-content">
  54. <a-input-number v-model="fontSize" :min="1" @change="changeFont" style="width: 168px" />
  55. </div>
  56. <div class="color-choice">
  57. <swatches v-model="fontColor" popover-x="left" @close="changeFontColor" />
  58. </div>
  59. </div>
  60. <div class="row">
  61. <div class="row-tit">背景色</div>
  62. <div class="color-choice">
  63. <swatches v-model="backColor" popover-x="left" @close="changebackColor" />
  64. </div>
  65. </div>
  66. </div>
  67. <!--图片-->
  68. <div class="attr-select" v-if="type==='images'">
  69. <span class="grid-title">文字内容</span>
  70. <section class="grid">
  71. <div class="grid-content">
  72. <a-upload-dragger
  73. name="file"
  74. :customRequest="customRequest"
  75. action="https://jsonplaceholder.typicode.com/posts/"
  76. @change="changeImage"
  77. >
  78. <p class="icon-image">
  79. <a-icon type="cloud-upload" />
  80. </p>
  81. <p class="ant-upload-text">将图片拖动到这里替换</p>
  82. <p class="ant-upload-hint">本地上传</p>
  83. </a-upload-dragger>
  84. </div>
  85. </section>
  86. <span class="grid-title">外观</span>
  87. <div class="row">
  88. <div class="row-tit">边框</div>
  89. <div class="grid-content">
  90. <a-input-number
  91. v-model="lineWidth"
  92. :min="1"
  93. @change="changeLineWidth"
  94. style="width: 168px"
  95. />
  96. </div>
  97. <div class="color-choice">
  98. <swatches v-model="color" popover-x="left" />
  99. </div>
  100. </div>
  101. </div>
  102. <!--针对“设备/位置/管线/分区”属性示例-->
  103. <div
  104. class="attr-select"
  105. v-if="type =='equipment' || type =='pipeline' ||type == 'fire-area' ||type == 'position'"
  106. >
  107. <div class="row-tit" v-if="type == 'fire-area'">颜色</div>
  108. <div class="row" v-if="type == 'fire-area'">
  109. <swatches :swatches="swatchess" v-model="color" inline></swatches>
  110. </div>
  111. <div class="row">
  112. <div class="row-tit">名称显示</div>
  113. <a-button type="link" class="edit-option-btn">{{editStatus[type]}}</a-button>
  114. </div>
  115. <div class="row">
  116. <a-input />
  117. </div>
  118. <div class="row">
  119. <div class="row-tit">字号</div>
  120. <div class="grid-content">
  121. <a-input-number
  122. v-model="lineWidth"
  123. :min="1"
  124. @change="changeLineWidth"
  125. style="width: 168px"
  126. />
  127. </div>
  128. <div class="color-choice">
  129. <swatches v-model="color" popover-x="left" />
  130. </div>
  131. </div>
  132. <!-- 当为设备状态时 -->
  133. <div class="row" v-if="type =='equipment'">
  134. <div class="row-tit">数量</div>
  135. <div class="grid-content">
  136. <a-input-number
  137. v-model="lineWidth"
  138. :min="1"
  139. @change="changeLineWidth"
  140. style="width: 208px"
  141. />
  142. </div>
  143. </div>
  144. <!-- 当为管道状态时 -->
  145. <div class="row" v-if="type =='pipeline'">
  146. <div class="row-tit">线宽</div>
  147. <div class="grid-content">
  148. <a-input-number
  149. v-model="lineWidth"
  150. :min="1"
  151. @change="changeLineWidth"
  152. style="width: 208px"
  153. />
  154. </div>
  155. </div>
  156. </div>
  157. <!--设备/工程信息化ID/工程信息化中的位置类型-->
  158. <div
  159. class="attr-select attr-select-bottom"
  160. v-if="type =='equipment' || type =='pipeline' || type =='fire-area' ||type == 'position'"
  161. >
  162. <div class="row">
  163. <span>{{`工程信息化ID`}}</span>
  164. <a-button type="link" class="edit-option-btn" @click="handleEdit">选择编辑</a-button>
  165. </div>
  166. <div class="grid-content">
  167. <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD4</a-card>
  168. <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
  169. <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
  170. </div>
  171. </div>
  172. <!-- 快捷操作提示-->
  173. <div style="position: fixed;bottom: 0;width: 280px;">
  174. <a-collapse :bordered="false" expand-icon-position="right">
  175. <template #expandIcon="props">
  176. <a-icon type="caret-up" :rotate="props.isActive ? 180 : 0" />
  177. </template>
  178. <a-collapse-panel key="1" header="键盘操作提示" :style="customStyle">
  179. <p v-for="item in keyboardOperation" :key="item.value">{{item.value}}</p>
  180. </a-collapse-panel>
  181. </a-collapse>
  182. </div>
  183. <editDialog ref="dialog" />
  184. </div>
  185. </template>
  186. <script>
  187. import editDialog from "./edit-dialog";
  188. import Swatches from "vue-swatches";
  189. import bus from "@/bus";
  190. import "vue-swatches/dist/vue-swatches.css";
  191. import { ItemColor } from "@saga-web/big/lib";
  192. import { uploadImg } from "@/api/editer.js";
  193. export default {
  194. name: "attr_select",
  195. props: ["type", "focusItemList"],
  196. components: { editDialog, Swatches },
  197. data() {
  198. return {
  199. precisionList: [{ value: 10 }, { value: 20 }, { value: 30 }],
  200. precision: true,
  201. customStyle:
  202. "background: #fff;overflow: hidden; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);border:0",
  203. keyboardOperation: [
  204. { value: "拖动画布:" },
  205. { value: "加选对象:" },
  206. { value: "确认操作:" },
  207. { value: "取消对象:" }
  208. ],
  209. numberValue: 3,
  210. fontSize: 12, //字体大小
  211. lineWidth: 0,
  212. textMsg: "", //
  213. color: "#1CA085",
  214. fontColor: "#1CA085", //文字颜色
  215. borderColor: "", // 边框颜色 直线,折线,多边形等
  216. backColor:'', //背景色 用于text文字
  217. borderLineOption: [
  218. {
  219. id: "solid",
  220. src: require("@/assets/images/1pxline.jpg")
  221. },
  222. {
  223. id: "dashed",
  224. src: require("@/assets/images/dashedLine.jpg")
  225. },
  226. {
  227. id: "dotted",
  228. src: require("@/assets/images/dotLine.jpg")
  229. }
  230. ],
  231. linepxOption: [
  232. {
  233. id: 1,
  234. src: require("@/assets/images/1pxline.jpg")
  235. },
  236. {
  237. id: 2,
  238. src: require("@/assets/images/2pxline.jpg")
  239. },
  240. {
  241. id: 3,
  242. src: require("@/assets/images/3pxline.jpg")
  243. }
  244. ],
  245. editStatus: {
  246. equipment: "编辑设备",
  247. pipeline: "管道编辑",
  248. "fire-area": "编辑区域",
  249. position: "编辑区域"
  250. },
  251. swatchess: ["#57C5FC", "#5F70E1", "#4DAE6C", "#028FAA"]
  252. };
  253. },
  254. methods: {
  255. onChange(e) {
  256. this.precision = e.target.checked === true ? false : true;
  257. },
  258. handleChange(value) {
  259. console.log(`selected ${value}`);
  260. },
  261. changeNumber() {
  262. bus.$emit("changeFont", this.fontSize);
  263. },
  264. // 改变字体大小
  265. changeFont() {
  266. bus.$emit("changeFont", this.fontSize);
  267. },
  268. // 改变线宽
  269. changeLineWidth() {
  270. bus.$emit("changeLineWidth", this.lineWidth);
  271. },
  272. // 改变文案
  273. changeTextArea() {
  274. bus.$emit("changeText", this.textMsg);
  275. },
  276. // 改变线的颜色
  277. changeBorderColor(color) {
  278. bus.$emit("changeBorderColor", color);
  279. },
  280. // 改变字体颜色
  281. changeFontColor(color) {
  282. bus.$emit("changeFontColor", color);
  283. },
  284. changebackColor(color){
  285. bus.$emit("changebackColor", color);
  286. },
  287. customRequest(info){
  288. const formData = new FormData()
  289. formData.append('file', info.file)
  290. const postParams = formData;
  291. uploadImg({ postParams }).then(res => {
  292. if (res.Result == 'success') {
  293. bus.$emit('upadataImageUrl',res.EntityList[0])
  294. // this.$set(this.ruleForm, 'Url', res.EntityList[0])
  295. this.$message.success(`${info.file.name} file uploaded successfully.`);
  296. }else{
  297. this.$message.error(`${info.file.name} file upload failed.`);
  298. }
  299. })
  300. },
  301. changeImage(info) {
  302. const status = info.file.status;
  303. console.log(status);
  304. if (status !== "uploading") {
  305. console.log(info.file, info.fileList);
  306. }
  307. if (status === "done") {
  308. this.$message.success(`${info.file.name} file uploaded successfully.`);
  309. } else if (status === "error") {
  310. this.$message.error(`${info.file.name} file upload failed.`);
  311. }
  312. },
  313. handleEdit() {
  314. this.$refs.dialog.showModal();
  315. }
  316. },
  317. watch: {
  318. focusItemList: function(newval) {
  319. const Item = newval.itemList[0];
  320. if (newval.itemList.length == 1) {
  321. if (newval.itemType == "text") {
  322. this.textMsg = Item.text;
  323. this.fontSize = Item.font.size;
  324. this.fontColor = Item.color;
  325. this.backColor = Item.backgroundColor;
  326. } else if (newval.itemType == "line") {
  327. this.lineWidth = Item.lineWidth;
  328. this.borderColor = Item.strokeColor;
  329. }
  330. }
  331. }
  332. }
  333. };
  334. </script>
  335. <style scoped lang="less">
  336. .attr-select {
  337. padding: 12px 16px;
  338. box-sizing: border-box;
  339. .grid-title {
  340. font-size: 12px;
  341. color: #8d9399;
  342. }
  343. .row {
  344. width: 100%;
  345. display: flex;
  346. justify-content: space-between;
  347. align-items: center;
  348. margin-top: 12px;
  349. .color-choice {
  350. & /deep/ .vue-swatches__trigger {
  351. width: 26px !important;
  352. height: 26px !important;
  353. border-radius: 0px !important;
  354. }
  355. }
  356. .row-tit {
  357. color: #1f2429;
  358. font-size: 14px;
  359. }
  360. }
  361. .grid {
  362. margin: 10px 15px;
  363. .grid-title {
  364. font-size: 12px;
  365. color: #8d9399;
  366. }
  367. }
  368. .grid-content {
  369. // margin-top: 10px;
  370. position: relative;
  371. }
  372. .icon-image {
  373. font-size: 25px;
  374. }
  375. .edit-option-btn {
  376. float: right;
  377. margin-top: -5px;
  378. }
  379. .attr-card {
  380. width: 250px;
  381. margin-bottom: 10px;
  382. white-space: normal;
  383. box-shadow: 0px 2px 6px 0px rgba(31, 36, 41, 0.05);
  384. border-radius: 4px;
  385. }
  386. .ant-upload.ant-upload-drag p.ant-upload-text {
  387. font-size: 14px;
  388. color: #c3c7cb;
  389. }
  390. .ant-upload.ant-upload-drag p.ant-upload-hint {
  391. color: #0091ff;
  392. }
  393. }
  394. #attr-select {
  395. width: 100%;
  396. height: 100%;
  397. .attr-select-bottom {
  398. height: 100%;
  399. width: 100%;
  400. position: absolute;
  401. overflow-y: auto;
  402. padding-bottom: 400px;
  403. }
  404. }
  405. </style>