editInfoPoint.vue 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889
  1. <!-- 编辑信息点页面,添加设备,设备组,空间 三个共用 -->
  2. <template>
  3. <el-dialog
  4. custom-class="edit-info-point-dialog"
  5. append-to-body
  6. title="编辑信息点"
  7. :visible="dialogVisible"
  8. @close="close"
  9. :close-on-press-escape="false"
  10. >
  11. <div class="tabs">
  12. <div class="tab tab-left" :class="{ active: tab === 0 }" @click="tab = 0">信息点</div>
  13. <div class="tab tab-right" :class="{ active: tab === 1 }" @click="tab = 1">属性</div>
  14. </div>
  15. <!-- 信息点 -->
  16. <div class="info-point-tab" v-if="tab === 0">
  17. <!-- 公式 -->
  18. <div class="formula">
  19. <div class="header">公式</div>
  20. <div class="tag-container">
  21. <el-tag
  22. :key="`${index}_${tag}`"
  23. v-for="(tag, index) in chooseList"
  24. closable
  25. :disable-transitions="false"
  26. @close="handleClose(tag)"
  27. >
  28. {{ tag }}
  29. </el-tag>
  30. <el-input
  31. class="input-new-tag m-input"
  32. v-if="inputVisible"
  33. v-model="inputValue"
  34. ref="saveTagInput"
  35. size="small"
  36. @keyup.enter.native="handleInputConfirm"
  37. @blur="handleInputConfirm"
  38. :maxlength="20"
  39. >
  40. </el-input>
  41. <el-button v-else class="button-new-tag add-tag" size="small" @click="showInput">+ 自定义公式</el-button>
  42. </div>
  43. </div>
  44. <!-- 信息点 -->
  45. <div class="info-point">
  46. <div class="header">
  47. <div>选择信息点</div>
  48. </div>
  49. <div v-for="(item, index) in list" :key="index">
  50. <div class="title">{{ item[0].firstName || "信息" }}</div>
  51. <el-checkbox-group v-model="chooseList" class="m-check-group">
  52. <el-checkbox v-for="({ name }, secIndex) in item" :title="name" :label="name" :key="secIndex" />
  53. </el-checkbox-group>
  54. </div>
  55. <!-- <div class="instantaneous">
  56. <div class="title">瞬时状态</div>
  57. <el-checkbox-group v-model="instantaneousCheckList" class="m-check-group">
  58. <el-checkbox v-for="({ name }, index) in instantaneousList" :label="name" :key="index" />
  59. </el-checkbox-group>
  60. </div>
  61. <div class="accumulative">
  62. <div class="title">累计指标</div>
  63. <el-checkbox-group v-model="accumulativeCheckList" class="m-check-group">
  64. <el-checkbox v-for="({ name }, index) in accumulativeList" :label="name" :key="index" />
  65. </el-checkbox-group>
  66. </div> -->
  67. </div>
  68. </div>
  69. <!-- 属性 -->
  70. <div class="property-tab" v-if="tab === 1">
  71. <!-- 设备的属性 -->
  72. <div class="equipment" v-if="true && type === 'equipment'">
  73. <div class="color">
  74. <p>字符颜色</p>
  75. <div class="color-select">
  76. <el-color-picker
  77. @change="changeColor"
  78. popper-class="m-color-picker"
  79. show-alpha
  80. class="fix-box-1"
  81. v-model="equipmentData.color"
  82. ></el-color-picker>
  83. </div>
  84. </div>
  85. <div class="size">
  86. <p>字符大小</p>
  87. <el-input-number
  88. style="width: 90px"
  89. v-model="equipmentData.size"
  90. controls-position="right"
  91. size="mini"
  92. :min="1"
  93. :max="20"
  94. :maxlength="100"
  95. ></el-input-number>
  96. </div>
  97. <div class="icon">
  98. <p>显示图标</p>
  99. <el-upload
  100. class="avatar-uploader"
  101. action="https://jsonplaceholder.typicode.com/posts/"
  102. :show-file-list="false"
  103. :before-upload="beforeAvatarUpload"
  104. :on-success="handleAvatarSuccess"
  105. >
  106. <img v-if="equipmentData.url" :src="equipmentData.imgUrl" class="avatar" />
  107. <el-button v-else type="small">替换图标</el-button>
  108. </el-upload>
  109. </div>
  110. </div>
  111. <!-- 设备组的属性 -->
  112. <div class="equipment-group" v-else-if="false && type === 'equipment-group'"></div>
  113. <!-- 空间的属性 -->
  114. <div class="space" v-else-if="true || type === 'space'">
  115. <!-- 字符 -->
  116. <div class="font">
  117. <div class="color">
  118. <p>字符色</p>
  119. <div class="color-select">
  120. <el-color-picker
  121. show-alpha
  122. popper-class="m-color-picker"
  123. @change="changeColor"
  124. class="fix-box-1"
  125. v-model="spaceData.color"
  126. ></el-color-picker>
  127. </div>
  128. </div>
  129. <div class="size">
  130. <p>字符大小</p>
  131. <el-input-number
  132. style="width: 90px"
  133. v-model="spaceData.size"
  134. controls-position="right"
  135. size="mini"
  136. :min="1"
  137. :max="20"
  138. :maxlength="100"
  139. ></el-input-number>
  140. </div>
  141. </div>
  142. <!-- 填充色 -->
  143. <div class="fill-color">
  144. <p>填充色</p>
  145. <div class="color-select">
  146. <el-color-picker
  147. show-alpha
  148. popper-class="m-color-picker"
  149. @change="changeColor"
  150. class="fix-box-1"
  151. v-model="spaceData.fillColor"
  152. ></el-color-picker>
  153. </div>
  154. </div>
  155. <!-- 边框 -->
  156. <div class="border">
  157. <p>边框</p>
  158. <div class="property">
  159. <div class="color-box">
  160. <div class="cololorSelect">
  161. <el-color-picker
  162. show-alpha
  163. popper-class="m-color-picker"
  164. @change=""
  165. class="fix-box-1"
  166. v-model="spaceData.borderColor"
  167. ></el-color-picker>
  168. </div>
  169. <span class="text">颜色</span>
  170. </div>
  171. <div class="line-width">
  172. <el-input-number
  173. style="width: 80px"
  174. v-model="spaceData.linewidth"
  175. controls-position="right"
  176. @change="changeLineWidth"
  177. size="mini"
  178. :min="1"
  179. :max="20"
  180. :maxlength="100"
  181. ></el-input-number>
  182. <span class="text">线宽</span>
  183. </div>
  184. <div class="line-width">
  185. <el-select
  186. v-model="spaceData.linestyle"
  187. :default-value="borderLineOption[0].id"
  188. size="mini"
  189. style="width: 90px"
  190. placeholder="请选择"
  191. :ref="`selectLine`"
  192. @change="changeLineStyle()"
  193. >
  194. <el-option v-for="item in borderLineOption" :key="item.id" :label="item.src" :value="item.id">
  195. <img :src="item.src" alt width="60" />
  196. </el-option>
  197. </el-select>
  198. <span class="text">线型</span>
  199. </div>
  200. </div>
  201. </div>
  202. </div>
  203. </div>
  204. <!-- 确定,取消按钮 -->
  205. <div slot="footer" class="dialog-footer">
  206. <el-button @click="close">取 消</el-button>
  207. <el-button type="primary" @click="confirm">确 定</el-button>
  208. </div>
  209. </el-dialog>
  210. </template>
  211. <script>
  212. /* eslint-disable no-case-declarations */
  213. /**
  214. * 编辑信息点页面
  215. * 添加设备,设备组,空间 三个共用
  216. */
  217. import { mapState, mapMutations } from "vuex";
  218. import { planerSave, planerUpdate, pubPlanerUpdate } from "@/api/labsl";
  219. import { dictQuery } from "@/api/datacenter";
  220. import { imgBaseUrl, imgServeUpload } from "@/api/imageservice";
  221. import { cloneDeep } from "lodash";
  222. import { rgbaNum, svgTobase64 } from "@persagy-web/big-edit/lib/until";
  223. import { SColor } from "@persagy-web/draw/lib";
  224. const list = [
  225. { name: "运行状态", id: "yxzt" },
  226. { name: "故障状态", id: "gzzt" },
  227. { name: "云端控制状态", id: "gzzt1" },
  228. { name: "故障状态2", id: "gzzt2" },
  229. { name: "故障状态3", id: "gzzt3" },
  230. { name: "故障状态4", id: "gzzt4" },
  231. { name: "故障状态5", id: "gzzt5" },
  232. { name: "故障状态6", id: "gzzt6" },
  233. { name: "故障状态7", id: "gzzt7" },
  234. { name: "故障状态8", id: "gzzt8" },
  235. { name: "故障状态9", id: "gzzt9" },
  236. { name: "故障状态10", id: "gzzt10" },
  237. { name: "故障状态11", id: "gzzt11" },
  238. { name: "故障状态12", id: "gzzt12" },
  239. { name: "故障状态13", id: "gzzt13" },
  240. ];
  241. export default {
  242. name: "editInfoPoint",
  243. props: {
  244. showDialog: {
  245. type: Boolean,
  246. required: true,
  247. },
  248. // 类型, equipment 设备, equipmentGroup 设备组, space 空间
  249. type: {
  250. type: String,
  251. required: true,
  252. },
  253. // 设备code值
  254. code: {
  255. type: String,
  256. },
  257. },
  258. components: {},
  259. data() {
  260. return {
  261. dialogVisible: false,
  262. tab: 0,
  263. chooseList: [],
  264. inputVisible: false,
  265. inputValue: null,
  266. //瞬时状态列表
  267. // instantaneousCheckList: [],
  268. // instantaneousList: cloneDeep(list),
  269. // 累计指标列表
  270. list: [],
  271. // accumulativeCheckList: [],
  272. // accumulativeList: cloneDeep(list),
  273. /** -------------------设备属性使用值start-------------------------- */
  274. equipmentData: {
  275. color: "#000000",
  276. size: 1,
  277. url: "",
  278. imgUrl: "", //图片路径,页面显示使用
  279. },
  280. /** -------------------设备属性使用值end-------------------------- */
  281. /** -------------------空间属性使用值start-------------------------- */
  282. spaceData: {
  283. color: "",
  284. size: 1,
  285. fillColor: "",
  286. borderColor: "#cccccc",
  287. linewidth: 1,
  288. linestyle: "Solid",
  289. linestyle: "",
  290. },
  291. borderLineOption: [
  292. {
  293. id: "Solid",
  294. src: require("@/assets/images/solidLine.png"),
  295. },
  296. {
  297. id: "Dashed",
  298. src: require("@/assets/images/dashedLine.png"),
  299. },
  300. {
  301. id: "Dotted",
  302. src: require("@/assets/images/dotLine.png"),
  303. },
  304. ],
  305. /** -------------------空间属性使用值end-------------------------- */
  306. };
  307. },
  308. computed: {
  309. ...mapState(["styleMap", "state", "id", "graphId", "buildingId", "floorId"]),
  310. },
  311. watch: {
  312. // 是否打开弹窗
  313. showDialog(val) {
  314. this.dialogVisible = val;
  315. // 打开弹窗
  316. val && this.initDialog();
  317. },
  318. spaceData: {
  319. handler(newV, oldV) {
  320. // // console.log("spaceData");
  321. if (newV.linestyle) {
  322. this.$nextTick(() => {
  323. this.setLineStyle();
  324. });
  325. }
  326. },
  327. deep: true,
  328. },
  329. code(newV, oldV) {
  330. if (newV && newV !== oldV) {
  331. // this.getInfoPoint();
  332. }
  333. },
  334. },
  335. mounted() {
  336. },
  337. methods: {
  338. ...mapMutations(["ADDSTYLE"]),
  339. // 展示标签输入框
  340. showInput() {
  341. this.inputVisible = true;
  342. },
  343. initDialog() {
  344. this.spaceData = {
  345. color: "",
  346. size: 1,
  347. fillColor: "",
  348. borderColor: "#cccccc",
  349. linewidth: 1,
  350. linestyle: "",
  351. };
  352. this.tab = 0;
  353. this.$nextTick(() => {
  354. this.setLineStyle();
  355. });
  356. // 获取信息点值
  357. this.getInfoPoint();
  358. // 获取公式,属性信息
  359. const styleMap = { ...this.styleMap.defaultEquipStyle, ...(this.styleMap[this.code] || {}) };
  360. const { formula, url, color, size } = styleMap;
  361. this.chooseList = JSON.parse(formula || "[]");
  362. // color 8位hex转rgba
  363. this.equipmentData = { url, color: new SColor(color).toRgba(), size, imgUrl: "" };
  364. // 设置设备/设备组/空间 图片地址
  365. const imgUrl = url ? imgBaseUrl + url : "";
  366. // equipment 设备, equipmentGroup 设备组, space 空间
  367. const dict = {
  368. equipment: "equipmentData",
  369. equipmentGroup: "equipmentGroupData",
  370. space: "spaceData",
  371. };
  372. // console.log(imgUrl);
  373. imgUrl && this.initImgUrl(imgUrl, dict[this.type]);
  374. },
  375. /**
  376. * 设置设备/设备组/空间 图片地址
  377. */
  378. initImgUrl(imgUrl, data) {
  379. svgTobase64(imgUrl)
  380. .then((res) => {
  381. this[data].imgUrl = res ? res : "";
  382. })
  383. .catch((res) => {
  384. debugger;
  385. this[data].imgUrl = res;
  386. });
  387. },
  388. async getInfoPoint() {
  389. // console.time(1);
  390. const res = await dictQuery({ pageNumber: 1, pageSize: 1000, type: this.code });
  391. // console.timeEnd(1);
  392. // console.time(2);
  393. let data = res.content;
  394. // 按照一级名称,将一维数组拆分成二维数组
  395. data = this._(data).groupBy("firstName").values().value();
  396. this.list = data;
  397. // console.timeEnd(2);
  398. },
  399. // 添加标签
  400. handleInputConfirm() {
  401. const inputValue = this.inputValue;
  402. if (inputValue) {
  403. this.chooseList.push(inputValue);
  404. }
  405. this.inputVisible = false;
  406. this.inputValue = "";
  407. },
  408. // 删除标签
  409. handleClose(tag) {
  410. this.chooseList.splice(this.chooseList.indexOf(tag), 1);
  411. },
  412. /**
  413. * 关闭弹窗
  414. */
  415. close() {
  416. this.dialogVisible = false;
  417. this.$emit("closeModal");
  418. },
  419. /**
  420. * 点击弹窗确定,提交接口
  421. */
  422. async confirm() {
  423. // equipment 设备, equipmentGroup 设备组, space 空间
  424. const formula = JSON.stringify(this.chooseList);
  425. // eslint-disable-next-line prefer-const
  426. let { color, url, size } = this.equipmentData;
  427. // eslint-disable-next-line prefer-const
  428. let colorlist = rgbaNum(color);
  429. let style = {};
  430. switch (this.type) {
  431. case "equipment":
  432. color = new SColor(Number(colorlist[0]), Number(colorlist[1]), Number(colorlist[2]), colorlist[3] * 255).value;
  433. style = { color, size, formula, url };
  434. break;
  435. case "equipmentGroup":
  436. break;
  437. case "space":
  438. break;
  439. default:
  440. break;
  441. }
  442. // console.log({ id: this.code, style });
  443. let res = "";
  444. // 上传的style全量信息
  445. const postStyle = { ...this.styleMap, [this.code]: style };
  446. delete postStyle.defaultEquipStyle;
  447. // console.log("===================");
  448. // console.log(postStyle);
  449. // console.log("===================");
  450. // 未发布接口
  451. if (this.state === "Draft") {
  452. res = await planerUpdate({
  453. content: [
  454. {
  455. buildingId: this.buildingId,
  456. floorId: this.floorId,
  457. id: this.id,
  458. graphId: this.graphId,
  459. style: postStyle,
  460. },
  461. ],
  462. projection: ["style"],
  463. });
  464. } else if (this.state === "Publish") {
  465. //已发布接口
  466. res = await pubPlanerUpdate({
  467. content: [
  468. {
  469. buildingId: this.buildingId,
  470. floorId: this.floorId,
  471. id: this.id,
  472. graphId: this.graphId,
  473. style: postStyle,
  474. },
  475. ],
  476. projection: ["style"],
  477. });
  478. }
  479. if (res.result === "success") {
  480. this.ADDSTYLE({ id: this.code, style });
  481. this.dialogVisible = false;
  482. this.$emit("closeModal");
  483. } else {
  484. this.$message(res.message);
  485. }
  486. },
  487. /**
  488. * 属性
  489. */
  490. /** ----------设备的属性---------- */
  491. // 改变颜色
  492. changeColor(val) {
  493. // // console.log("changeColor: ", val);
  494. },
  495. beforeAvatarUpload(file) {
  496. // eslint-disable-next-line @typescript-eslint/no-this-alias
  497. const that = this;
  498. const fileReader = new FileReader();
  499. fileReader.readAsDataURL(file); //读取图片
  500. // console.log(file);
  501. const ftype = file.type;
  502. const fname = file.name;
  503. const uploadKey = file.uid;
  504. const imgType = ftype.split(".")[ftype.length - 1];
  505. fileReader.addEventListener("load", function () {
  506. // 读取完成
  507. const res = fileReader.result;
  508. //将canvas的base64位图片转换成图片png的file
  509. const blob = that.dataURLtoBlob(res, ftype);
  510. //将其转换成file对象
  511. const file = new File([blob], fname, {
  512. type: ftype,
  513. lastModified: Date.now(),
  514. }); //blob转file
  515. // try sending
  516. const reader = new FileReader();
  517. const fileType = file.name.split(".");
  518. const imgType = fileType[fileType.length - 1];
  519. const CreateTime = that.formatDate(new Date(file.lastModified));
  520. reader.onloadend = function () {
  521. // 这个事件在读取结束后,无论成功或者失败都会触发
  522. // eslint-disable-next-line no-empty
  523. if (reader.error) {
  524. } else {
  525. // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
  526. const xhr = new XMLHttpRequest();
  527. xhr.open("POST", `${imgServeUpload}${uploadKey}.${imgType}`);
  528. xhr.send(reader.result);
  529. xhr.onreadystatechange = function () {
  530. if (xhr.readyState == 4) {
  531. if (xhr.status == 200) {
  532. that.equipmentData.url = uploadKey + "." + imgType;
  533. // console.log(uploadKey + "." + imgType);
  534. // bus.$emit("updateStyle", "url", baseUrl + uploadKey + "." + imgType);
  535. }
  536. }
  537. };
  538. }
  539. };
  540. reader.readAsArrayBuffer(file);
  541. });
  542. },
  543. handleAvatarSuccess(res, file) {
  544. // console.log(res, file);
  545. this.equipmentData.imgUrl = URL.createObjectURL(file.raw);
  546. },
  547. dataURLtoBlob(dataURI, type) {
  548. const binary = atob(dataURI.split(",")[1]);
  549. const array = [];
  550. for (let i = 0; i < binary.length; i++) {
  551. array.push(binary.charCodeAt(i));
  552. }
  553. return new Blob([new Uint8Array(array)], { type: type });
  554. },
  555. formatDate(now) {
  556. const year = now.getFullYear();
  557. const month = now.getMonth() + 1;
  558. const date = now.getDate();
  559. const hour = now.getHours();
  560. const minute = now.getMinutes();
  561. const second = now.getSeconds();
  562. return (
  563. year +
  564. "-" +
  565. month +
  566. "-" +
  567. (date > 10 ? date : "0" + date) +
  568. " " +
  569. hour +
  570. ":" +
  571. (minute > 10 ? minute : "0" + minute) +
  572. ":" +
  573. (second > 10 ? second : "0" + second)
  574. );
  575. },
  576. /**------------空间的属性----------------- */
  577. // eslint-disable-next-line @typescript-eslint/no-empty-function
  578. changeLineWidth() {},
  579. changeLineStyle() {
  580. // this.setLineStyle();
  581. },
  582. setLineStyle() {
  583. const img = this.borderLineOption.filter((v) => v.id === this.spaceData.linestyle)[0]?.src;
  584. // // console.log(img);
  585. if (img) {
  586. this.$refs.selectLine?.$el?.children[0].children[0].setAttribute(
  587. "style",
  588. `
  589. background: url(${img}) no-repeat;
  590. color: rgba(0,0,0,0);
  591. text-indent: -9999px;
  592. background-position: 15px center;
  593. background-size: 40px 1px;
  594. `
  595. );
  596. } else {
  597. this.$refs.selectLine?.$el?.children[0].children[0].setAttribute(
  598. "style",
  599. `
  600. background: inherit;
  601. color:inherit;
  602. text-indent: 0;
  603. `
  604. );
  605. }
  606. },
  607. },
  608. };
  609. </script>
  610. <style lang="less">
  611. .m-color-picker {
  612. .el-color-dropdown__value {
  613. width: 170px !important;
  614. }
  615. }
  616. </style>
  617. <style lang='less' scoped>
  618. /deep/ .edit-info-point-dialog {
  619. width: 1200px;
  620. height: 648px;
  621. display: flex;
  622. flex-direction: column;
  623. .el-dialog__header {
  624. border-bottom: 1px solid #e4e5e7;
  625. }
  626. .el-dialog__body {
  627. flex: 1;
  628. padding-bottom: 0 !important;
  629. }
  630. .tabs {
  631. width: 100%;
  632. height: 30px;
  633. display: flex;
  634. .tab {
  635. width: 74px;
  636. height: 30px;
  637. line-height: 30px;
  638. font-size: 14px;
  639. color: #1f2429;
  640. text-align: center;
  641. border-radius: 0 4px 4px 0;
  642. border: 1px solid #c3c7cb;
  643. }
  644. .tab-left {
  645. border-radius: 4px 0 0 4px;
  646. }
  647. .active {
  648. color: #0091ff;
  649. background: #e1f2ff;
  650. border: 1px solid #0091ff;
  651. }
  652. }
  653. // 信息点tab
  654. .info-point-tab {
  655. width: 100%;
  656. // 大标题
  657. .header {
  658. width: 100%;
  659. height: 22px;
  660. margin: 20px 0 15px 0;
  661. padding-left: 5px;
  662. font-size: 16px;
  663. font-weight: 500;
  664. color: #1f2329;
  665. line-height: 22px;
  666. border-left: 2px solid #0091ff;
  667. }
  668. // 公式
  669. .formula {
  670. width: 100%;
  671. .tag-container {
  672. width: 100%;
  673. height: 80px;
  674. border-radius: 4px;
  675. border: 1px solid #e4e5e7;
  676. padding: 7px 12px;
  677. line-height: 1;
  678. overflow: auto;
  679. .el-tag {
  680. background: #eff0f1;
  681. border-radius: 2px;
  682. color: #1f2429ff;
  683. margin: 0 8px 8px 0;
  684. padding: 5px 6px 5px 8px;
  685. font-size: 14px;
  686. height: 24px;
  687. line-height: 1;
  688. border: none;
  689. &:hover {
  690. border: none;
  691. }
  692. .el-icon-close {
  693. color: #9ca2a9ff;
  694. right: 0;
  695. &:hover {
  696. color: #fff;
  697. background-color: #ccc;
  698. }
  699. }
  700. }
  701. .m-input {
  702. width: auto !important;
  703. }
  704. .add-tag {
  705. border-radius: 2px;
  706. border: 1px dotted #0091ff;
  707. font-weight: 400;
  708. color: #0091ff;
  709. }
  710. }
  711. }
  712. // 信息点
  713. .info-point {
  714. flex: 1;
  715. max-height: 300px;
  716. overflow: auto;
  717. .header {
  718. border-left: none;
  719. height: auto;
  720. margin: 0;
  721. padding: 20px 0 15px 0;
  722. position: sticky;
  723. top: 0;
  724. background-color: #fff;
  725. z-index: 100;
  726. div {
  727. border-left: 2px solid #0091ff;
  728. // height: 22px;
  729. padding-left: 5px;
  730. font-size: 16px;
  731. font-weight: 500;
  732. color: #1f2329;
  733. line-height: 22px;
  734. }
  735. }
  736. }
  737. // 瞬时状态,累计指标等
  738. .title {
  739. margin-bottom: 15px;
  740. font-weight: 500;
  741. color: #1f2329;
  742. font-size: 14px;
  743. }
  744. .m-check-group {
  745. // max-height: 90px;
  746. margin-bottom: 5px;
  747. overflow: auto;
  748. .el-checkbox {
  749. width: 150px;
  750. height: 30px;
  751. .el-checkbox__input {
  752. vertical-align: initial;
  753. }
  754. .el-checkbox__label {
  755. width: 120px;
  756. line-height: 1;
  757. overflow: hidden;
  758. white-space: nowrap;
  759. text-overflow: ellipsis;
  760. }
  761. // color: #1f2429;
  762. // font-size: 14px;
  763. // font-weight: 400;
  764. }
  765. }
  766. }
  767. // 属性tab
  768. .property-tab {
  769. margin-top: 20px;
  770. // 设备样式
  771. .equipment {
  772. & > div {
  773. margin-bottom: 15px;
  774. // font-size: 12px;
  775. color: #8d9399;
  776. // line-height: 16px;
  777. .color-select {
  778. width: 32px;
  779. height: 20px;
  780. overflow: hidden;
  781. position: relative;
  782. margin: 4px 0;
  783. .fix-box-1 {
  784. margin-top: -8px;
  785. margin-left: -8px;
  786. /deep/ .el-color-picker__trigger {
  787. width: 200px;
  788. height: 200px;
  789. }
  790. }
  791. }
  792. }
  793. }
  794. // 空间样式
  795. .space {
  796. & > div {
  797. margin-bottom: 15px;
  798. font-size: 12px;
  799. color: #8d9399;
  800. line-height: 16px;
  801. }
  802. .color-select {
  803. width: 32px;
  804. height: 20px;
  805. overflow: hidden;
  806. position: relative;
  807. margin: 4px 0;
  808. .fix-box-1 {
  809. margin-top: -8px;
  810. margin-left: -8px;
  811. /deep/ .el-color-picker__trigger {
  812. width: 200px;
  813. height: 200px;
  814. }
  815. }
  816. }
  817. .font {
  818. display: flex;
  819. // height: 20px;
  820. .color {
  821. margin-right: 20px;
  822. p {
  823. margin-bottom: 10px;
  824. }
  825. .color-select {
  826. top: 4px;
  827. }
  828. }
  829. }
  830. // 边框
  831. .border {
  832. width: 240px;
  833. .property {
  834. display: flex;
  835. align-items: center;
  836. // justify-content: space-around;
  837. .color-box {
  838. display: flex;
  839. align-items: center;
  840. flex-direction: column;
  841. .cololorSelect {
  842. width: 32px;
  843. height: 20px;
  844. overflow: hidden;
  845. position: relative;
  846. margin: 4px 0;
  847. .fix-box-1 {
  848. margin-top: -16px;
  849. margin-left: -8px;
  850. /deep/ .el-color-picker__trigger {
  851. width: 200px;
  852. height: 200px;
  853. }
  854. }
  855. }
  856. }
  857. .line-width {
  858. display: flex;
  859. align-items: center;
  860. flex-direction: column;
  861. margin-left: 20px;
  862. position: relative;
  863. }
  864. span.text {
  865. font-size: 12px;
  866. color: #1f2429;
  867. margin-top: 4px;
  868. }
  869. }
  870. }
  871. }
  872. // 图标大小
  873. .avatar {
  874. width: 60px;
  875. height: 60px;
  876. }
  877. }
  878. }
  879. </style>