index.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817
  1. <template>
  2. <!-- 设备设施 -->
  3. <div id="equipment">
  4. <!-- 顶部八个子系统导航 -->
  5. <div class="eq-top">
  6. <span
  7. class="eq-system"
  8. v-for="(item, index) in system"
  9. :class="item.id == systemId ? 'isActive' : ''"
  10. :key="index"
  11. @click="tabSyatem(item)"
  12. >
  13. <img :src="item.id == systemId ? item.icon1 : item.icon" />
  14. {{ item.name }}
  15. </span>
  16. </div>
  17. <div class="eq-bottom">
  18. <!-- 左侧选择,系统原理图等,点击进入弹窗 -->
  19. <div class="eq-left">
  20. <ul v-for="(eve, index) in everySystem" :key="'o' + index">
  21. <li
  22. class="li-style"
  23. :class="{ 'is-active': eve.id }"
  24. @click="dialogVisible(eve)"
  25. >
  26. <span class="circle"></span>
  27. <el-button
  28. type="text"
  29. disabled
  30. class="hanzi2"
  31. title="数字化移交系统上线后可用"
  32. v-if="eve.label == '查看图纸' && !showLookPic"
  33. style="text-align: left"
  34. >{{ eve.label }}</el-button
  35. >
  36. <span class="hanzi" v-else>{{ eve.label }}</span>
  37. </li>
  38. </ul>
  39. </div>
  40. <!-- 右侧楼层图主体 -->
  41. <div class="eq-right">
  42. <div class="eq-right-bottom">
  43. <div class="title-box">
  44. <div class="eq-title">
  45. <span class="span1">{{ floorInfo.code }}</span>
  46. </div>
  47. </div>
  48. <div class="eq-content">
  49. <floorMap
  50. ref="floorMap"
  51. :id="'equip'"
  52. :loadName="loadName"
  53. :type="'system'"
  54. ></floorMap>
  55. <div class="legend-boxs">
  56. <Legend
  57. :key="keyLd"
  58. :systemName="systemName"
  59. :floors="floorsArr"
  60. type="1"
  61. :editTips="`编辑${floorInfo.code}层${systemName}平面图`"
  62. ></Legend>
  63. <!-- 楼层切换组件 -->
  64. <floor-list
  65. :key="keyFL"
  66. v-if="floorsArr.length > 0"
  67. :floorsArr="floorsArr"
  68. @emitFloor="emitFloor"
  69. id="system"
  70. ></floor-list>
  71. <div
  72. class="additional-box"
  73. ref="additionalBox"
  74. v-if="fqPic.length > 0 && (smsxt == '1003' || smsxt == '1004')"
  75. >
  76. <div
  77. class="additional2"
  78. @click="additionalColl"
  79. v-if="showView === 3"
  80. >
  81. <img src="../../assets/imgs/bg2.png" alt />
  82. </div>
  83. <div class="additional" @click="additionalColl" v-else>
  84. <img src="../../assets/imgs/bg.png" alt />
  85. </div>
  86. <el-collapse-transition>
  87. <div
  88. v-show="showView === 3"
  89. class="add-img-container"
  90. ref="addImgContainer"
  91. :style="`bottom: ${bottomOffset}px;`"
  92. >
  93. <!-- <div class="add-img" ref="addImg">
  94. <img :src="fqPic[0].url" alt />
  95. </div> -->
  96. <!-- -->
  97. <div>
  98. 该div内为谢贝贝开发区域
  99. </div>
  100. </div>
  101. </el-collapse-transition>
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. <!-- 使用 v-if解决弹窗未展示时,会调用接口的问题 -->
  109. <eq-dialog
  110. v-if="ShowDialog"
  111. ref="dialog"
  112. :systemName="systemName"
  113. :smsxt="smsxt"
  114. @emitCount="emitCount"
  115. @closeModal="closeModal"
  116. ></eq-dialog>
  117. </div>
  118. </template>
  119. <script>
  120. import floorList from "@/components/floorList.vue";
  121. import floorMap from "@/components/floorMap/index.vue";
  122. import eqDialog from "./eqDialog";
  123. import { system } from "@/utils/plugins/components.js";
  124. import { queryPic, getPvUv } from "@/api/public.js";
  125. import {
  126. uploadExcel,
  127. downloadExcel,
  128. previewExecl,
  129. uploadExcelTemplate,
  130. } from "@/api/equipmentList.js";
  131. import { mapGetters } from "vuex";
  132. import store from "../../store";
  133. import XLSX from "xlsx";
  134. import { Alert } from "ant-design-vue";
  135. export default {
  136. data() {
  137. return {
  138. system,
  139. everySystem: [],
  140. systemId: 1,
  141. categoryId: "GDXT",
  142. systemName: "供电系统",
  143. floorInfo: {},
  144. smsxt: "1001",
  145. dialogInfo: {},
  146. brand: [], //品牌
  147. manufacturer: [],
  148. fqPic: [],
  149. loadName: "",
  150. type: "",
  151. objCount: [],
  152. bottomOffset: 0,
  153. keyFL: "keyFL" + new Date().getTime(),
  154. keyLd: "keyLd_" + new Date().getTime(),
  155. ShowDialog: false, //是否显示弹窗
  156. showLookPic: false,
  157. showExeclTooltip: false, // 是否展示execl提示信息,
  158. showXFXTToltip: false, //是否展示消防系统tooltip
  159. };
  160. },
  161. components: { floorList, eqDialog, floorMap },
  162. watch: {
  163. // 监听currentFloor变化,重新渲染楼层组件,解决 数据与视图不照应的问题
  164. /* '$store.state.currentFloor': {
  165. handler(newV, oldV) {
  166. if (newV.seq !== oldV.seq) {
  167. // TODO: keyFL更新
  168. this.keyFL = 'keyFL' + new Date().getTime()
  169. }
  170. }
  171. } */
  172. },
  173. methods: {
  174. showToolTip() {
  175. this.showExeclTooltip = true;
  176. if (this.smsxt == 1003) {
  177. // 是否是消防系统
  178. this.showXFXTToltip = true;
  179. } else {
  180. this.showXFXTToltip = false;
  181. }
  182. },
  183. hideToolTip() {
  184. this.showExeclTooltip = false;
  185. },
  186. /**
  187. * excel文件上传
  188. */
  189. uploadExl(resData) {
  190. const { file } = resData;
  191. // 创建FormData对象
  192. const isLt30M = file.size / 1024 / 1024 < 30;
  193. if (!["xls", "xlsx"].includes(file.name.split(".")[1])) {
  194. this.$message.warning("上传文件只能是 xls、xlsx格式!");
  195. return;
  196. }
  197. if (!isLt30M) {
  198. this.$message.warning("上传excel模板大小不能超过 30MB!");
  199. return;
  200. }
  201. const formData = new FormData();
  202. // 将得到的文件流添加到FormData对象
  203. formData.append("file", file, file.name);
  204. const getParams = {
  205. plazaId: this.plazaId,
  206. smsxt: this.smsxt,
  207. floor: this.floorInfo.gname, //楼层 必填
  208. };
  209. const data = formData;
  210. uploadExcel({ getParams, data }).then((res) => {
  211. if (res?.result === "success") {
  212. this.$message({
  213. message: "上传成功",
  214. type: "success",
  215. });
  216. // 刷新预览界面
  217. this.previewExl();
  218. } else {
  219. this.$message({
  220. message: "上传失败",
  221. type: "error",
  222. });
  223. }
  224. });
  225. },
  226. /**
  227. * 下载excel
  228. */
  229. downloadExl() {
  230. const getParams = {
  231. plazaId: this.plazaId,
  232. smsxt: this.smsxt,
  233. floor: this.floorInfo.gname,
  234. };
  235. downloadExcel({ getParams }).then((res) => {
  236. // 文件不存在,下载失败提示
  237. res.msg && this.$message({ type: "warning", message: res.msg });
  238. });
  239. },
  240. // execl预览
  241. previewExl() {
  242. const getParams = {
  243. plazaId: this.plazaId,
  244. smsxt: this.smsxt,
  245. floor: this.floorInfo.gname,
  246. };
  247. previewExecl({ getParams }).then((res) => {
  248. // 文件不存在,下载失败提示
  249. var data = new Uint8Array(res);
  250. var workbook = XLSX.read(data, { type: "array" });
  251. this.readWorkbook(workbook);
  252. });
  253. },
  254. // 上传模板execl
  255. uploadTemplateExl(resData) {
  256. const { file } = resData;
  257. // 创建FormData对象
  258. const isLt30M = file.size / 1024 / 1024 < 30;
  259. if (!["xls", "xlsx"].includes(file.name.split(".")[1])) {
  260. this.$message.warning("上传文件只能是 xls、xlsx格式!");
  261. return;
  262. }
  263. if (!isLt30M) {
  264. this.$message.warning("上传excel模板大小不能超过 30MB!");
  265. return;
  266. }
  267. const formData = new FormData();
  268. // 将得到的文件流添加到FormData对象
  269. formData.append("file", file, file.name);
  270. const getParams = {
  271. plazaId: this.plazaId,
  272. smsxt: this.smsxt,
  273. };
  274. const data = formData;
  275. uploadExcelTemplate({ getParams, data }).then((res) => {
  276. if (res?.result === "success") {
  277. this.$message({
  278. message: "上传成功",
  279. type: "success",
  280. });
  281. // 刷新预览界面
  282. this.previewExl();
  283. } else {
  284. this.$message({
  285. message: "上传失败",
  286. type: "error",
  287. });
  288. }
  289. });
  290. },
  291. // 将表格追加到页面节点展示
  292. readWorkbook(workbook) {
  293. var sheetNames = workbook.SheetNames; // 工作表名称集合
  294. var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
  295. const xlsxHtml = XLSX.write(workbook, {
  296. sheet: sheetNames[0],
  297. type: "string",
  298. bookType: "html",
  299. });
  300. document.getElementById("result").innerHTML = xlsxHtml;
  301. },
  302. // 查询tab页
  303. tabSyatem(item) {
  304. this.systemId = item.id;
  305. this.everySystem = item.children;
  306. this.systemName = item.name;
  307. this.smsxt = item.smsxt;
  308. this.$cookie.set("categoryId", item.categoryId, 3);
  309. store.commit("SETCATEGORYID", item.categoryId);
  310. this.$refs.floorMap.init(this.floorInfo.gname);
  311. this.querySmsxt();
  312. this.viewLengend();
  313. // 发送pvUv
  314. const data = {
  315. plazaId: this.plazaId,
  316. };
  317. let postParams = {
  318. type: "equipmentRouter",
  319. target: item.name,
  320. parameter: item.categoryId,
  321. };
  322. getPvUv(data, postParams)
  323. .then((res) => {
  324. console.log("pvuv", res);
  325. })
  326. .catch((res) => {
  327. console.log("error", res);
  328. });
  329. },
  330. querySmsxt() {
  331. // 目前消防和弱电下面有特殊的数据表格
  332. if (this.smsxt == "1003" || this.smsxt == "1004") {
  333. this.queryTable(this.smsxt);
  334. }
  335. },
  336. //判断有没有原理图,如果没有则不出现系统原理图列表li
  337. emitCount(objCount) {
  338. this.objCount = objCount;
  339. },
  340. emitFloor(item) {
  341. this.floorInfo = item;
  342. this.$refs.floorMap.init(this.floorInfo.gname);
  343. this.init();
  344. this.querySmsxt();
  345. },
  346. dialogVisible(eve) {
  347. // console.log('dialogVisible')
  348. // 点击后显示弹窗组件
  349. // if (eve.label != '查看图纸') {
  350. this.ShowDialog = true;
  351. this.$nextTick(() => {
  352. this.$refs.dialog.showModal(eve);
  353. });
  354. // pvuv接口记录
  355. // 发送pvUv
  356. const data = {
  357. plazaId: this.plazaId,
  358. };
  359. let postParams = {
  360. type: "modal",
  361. target: eve.id,
  362. parameter: eve.label,
  363. };
  364. getPvUv(data, postParams)
  365. .then((res) => {
  366. console.log("pvuv", res);
  367. })
  368. .catch((res) => {
  369. console.log("error", res);
  370. });
  371. // }
  372. },
  373. /**
  374. * 关闭弹窗后,重新渲染 楼层组件
  375. * 在父组件(本组件)内将 ShowDialog 置为false
  376. * @param {Boolean} flag 弹窗组件传回的标志: 一直传回 true
  377. */
  378. closeModal(flag) {
  379. this.ShowDialog = false;
  380. // this.keyFL = 'keyFL' + new Date().getTime()
  381. this.keyLd = "keyLd" + new Date().getTime();
  382. },
  383. //附加数据图片查看 showView为3展示状态
  384. additionalColl() {
  385. // // 走预览接口
  386. // this.previewExl();
  387. // 调整样式
  388. if (this.showView != 3) {
  389. this.$store.commit("SETSHOWVIEW", 3);
  390. this.$nextTick(() => {
  391. let p = this.$refs.additionalBox.offsetTop;
  392. let d = this.$refs.addImgContainer.offsetHeight;
  393. let bottomOffset = p + 44 - d;
  394. if (bottomOffset >= 0) {
  395. this.bottomOffset = 0;
  396. } else {
  397. this.bottomOffset = bottomOffset;
  398. }
  399. });
  400. } else {
  401. this.$store.commit("SETSHOWVIEW", 0);
  402. }
  403. },
  404. // 查询附加数据图片
  405. queryTable(system) {
  406. this.fqPic = [];
  407. let picFloor = this.$cookie.get("floorMapId");
  408. let getParams = {
  409. module: "1003",
  410. floor: picFloor,
  411. system: system,
  412. plazaId: this.plazaId,
  413. };
  414. queryPic({ getParams }).then((res) => {
  415. // console.log('附加数据', res)
  416. this.fqPic = res.data ? res.data : [];
  417. });
  418. },
  419. init() {
  420. this.loadName = `设备设施-${this.systemName}-${this.floorInfo.code}`;
  421. if (this.floorsArr.length > 0 && this.$cookie.get("currentFloorId")) {
  422. this.floorInfo = this.floorsArr.find((item) => {
  423. return this.$cookie.get("currentFloorId") == item.seq;
  424. });
  425. }
  426. },
  427. // 从设备设施进入的机房
  428. queryType(val) {
  429. this.type = val;
  430. },
  431. viewLengend() {
  432. if (this.legendTable.length > 0) {
  433. this.$store.commit("SETSHOWVIEW", 1);
  434. } else {
  435. this.$store.commit("SETSHOWVIEW", 0);
  436. }
  437. },
  438. smsxtQuery() {
  439. if (this.smsxt == "1001") {
  440. this.$cookie.set("categoryId", "GDXT");
  441. } else if (this.smsxt == "1002") {
  442. this.$cookie.set("categoryId", "NTXT");
  443. } else if (this.smsxt == "1003") {
  444. this.$cookie.set("categoryId", "XFXT");
  445. } else if (this.smsxt == "1004") {
  446. this.$cookie.set("categoryId", "RDXT");
  447. } else if (this.smsxt == "1005") {
  448. this.$cookie.set("categoryId", "JPSXT");
  449. } else if (this.smsxt == "1006") {
  450. this.$cookie.set("categoryId", "DTXT");
  451. } else if (this.smsxt == "1007") {
  452. this.$cookie.set("categoryId", "RQYL");
  453. } else {
  454. this.$cookie.set("categoryId", "SCPZ");
  455. }
  456. },
  457. },
  458. created() {
  459. /**
  460. * 是否显示,可以点击的查看图纸
  461. * 根据配置文件中,配置的广场ID显示查看图纸
  462. */
  463. if (
  464. window.__systemConf.conf.showLookPic_projectData.includes(this.plazaId)
  465. ) {
  466. this.showLookPic = true;
  467. }
  468. },
  469. mounted() {
  470. // if (Object.keys(this.floorObj).length > 0) {
  471. // this.floorInfo = this.floorObj
  472. // }
  473. /**
  474. * 解决切换到设备设施地图数据加载两次问题
  475. */
  476. // this.$refs.floorMap.init(this.floorInfo.gname)
  477. if (this.$route.query.smsxt) {
  478. console.log(this.$route.query.smsxt);
  479. this.smsxt = this.$route.query.smsxt;
  480. this.smsxtQuery();
  481. this.system.forEach((el) => {
  482. if (el.smsxt == this.smsxt) {
  483. this.everySystem = el.children;
  484. this.systemName = el.name;
  485. this.systemId = el.id;
  486. }
  487. });
  488. }
  489. this.everySystem = this.system[0].children;
  490. // 刷新时,store中有categoryId时,选中子系统状态
  491. if (this.$store.state.categoryId) {
  492. let item = this.system.filter(
  493. (item) => item.categoryId === this.$store.state.categoryId
  494. )[0];
  495. this.systemId = item.id;
  496. this.everySystem = item.children;
  497. this.systemName = item.name;
  498. this.smsxt = item.smsxt;
  499. this.querySmsxt();
  500. this.viewLengend();
  501. }
  502. this.init();
  503. },
  504. computed: {
  505. ...mapGetters([
  506. "floorsArr",
  507. "plazaId",
  508. "showView",
  509. "legendTable",
  510. "floorObj",
  511. ]),
  512. },
  513. };
  514. </script>
  515. <style lang="less" scoped>
  516. #equipment {
  517. background: rgba(242, 245, 247, 1);
  518. display: flex;
  519. flex: 1;
  520. overflow: hidden;
  521. color: #1f2429;
  522. .eq-top {
  523. // margin-left: 260px;
  524. width: 100%;
  525. padding-top: 24px;
  526. position: fixed;
  527. z-index: 3;
  528. display: flex;
  529. justify-content: center;
  530. .eq-system {
  531. padding: 12px 20px;
  532. background: #fff;
  533. font-size: 16px;
  534. cursor: pointer;
  535. img {
  536. width: 16px;
  537. height: 16px;
  538. margin-right: 4px;
  539. margin-bottom: 3px;
  540. }
  541. }
  542. .isActive {
  543. color: #025baa;
  544. font-weight: bolder;
  545. background: linear-gradient(
  546. 360deg,
  547. rgba(2, 91, 170, 0.1) 0%,
  548. rgba(2, 91, 170, 0) 100%
  549. );
  550. }
  551. }
  552. .eq-bottom {
  553. display: flex;
  554. flex: 1;
  555. .eq-left {
  556. position: fixed;
  557. z-index: 2;
  558. width: 260px;
  559. padding-top: 100px;
  560. color: #646c73;
  561. font-size: 14px;
  562. height: 100%;
  563. background: rgba(242, 245, 247, 1);
  564. }
  565. .li-style {
  566. margin-left: 28px;
  567. cursor: pointer;
  568. .circle {
  569. width: 6px;
  570. height: 6px;
  571. background: linear-gradient(
  572. 180deg,
  573. rgba(54, 156, 247, 0.6) 0%,
  574. rgba(2, 91, 170, 0.6) 100%
  575. );
  576. border-radius: 50%;
  577. display: inline-block;
  578. margin-right: 10px;
  579. }
  580. .hanzi {
  581. padding: 10px 0 10px 6px;
  582. width: 200px;
  583. display: inline-block;
  584. &:hover {
  585. color: rgba(2, 91, 170, 1);
  586. background: linear-gradient(
  587. 270deg,
  588. rgba(199, 217, 234, 0) 0%,
  589. rgba(199, 217, 234, 1) 100%
  590. );
  591. }
  592. }
  593. .hanzi2 {
  594. padding: 10px 0 10px 6px;
  595. width: 200px;
  596. display: inline-block;
  597. }
  598. }
  599. .eq-right {
  600. flex: 1;
  601. .eq-right-bottom {
  602. display: flex;
  603. flex: 1;
  604. height: 100%;
  605. .title-box {
  606. position: fixed;
  607. z-index: 2;
  608. top: 156px;
  609. left: 260px;
  610. display: flex;
  611. img {
  612. margin-top: -5px;
  613. }
  614. .eq-title {
  615. width: 140px;
  616. height: 32px;
  617. background: linear-gradient(
  618. 270deg,
  619. rgba(199, 217, 234, 0) 0%,
  620. rgba(199, 217, 234, 1) 100%
  621. );
  622. box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);
  623. color: #025baa;
  624. font-size: 16px;
  625. &::before {
  626. width: 2px;
  627. height: 16px;
  628. background: rgba(2, 91, 170, 1);
  629. display: inline-block;
  630. content: "";
  631. margin-right: 10px;
  632. margin-top: 8px;
  633. }
  634. .span1 {
  635. position: absolute;
  636. top: 3px;
  637. }
  638. }
  639. }
  640. .eq-content {
  641. flex: 1;
  642. .legend-boxs {
  643. position: fixed;
  644. z-index: 9;
  645. right: 32px;
  646. top: 142px;
  647. }
  648. .additional-box {
  649. position: relative;
  650. margin-top: 8px;
  651. .additional,
  652. .additional2 {
  653. width: 44px;
  654. height: 44px;
  655. border-radius: 2px;
  656. display: flex;
  657. justify-content: center;
  658. align-items: center;
  659. cursor: pointer;
  660. img {
  661. width: 20px;
  662. height: 20px;
  663. }
  664. }
  665. .additional {
  666. background: rgba(255, 255, 255, 1);
  667. box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
  668. }
  669. .additional2 {
  670. background: linear-gradient(
  671. 180deg,
  672. rgba(54, 156, 247, 1) 0%,
  673. rgba(2, 91, 170, 1) 100%
  674. );
  675. box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
  676. }
  677. .add-img-container {
  678. width: 450px;
  679. max-height: 674px;
  680. overflow-y: auto;
  681. background: #ffffff;
  682. -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  683. box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  684. border-radius: 2px;
  685. border: 1px solid #e4e5e7;
  686. position: absolute;
  687. right: 48px;
  688. bottom: 0;
  689. padding: 24px 20px;
  690. &::-webkit-scrollbar {
  691. display: none;
  692. }
  693. .add-img {
  694. width: 100%;
  695. height: 100%;
  696. overflow: hidden;
  697. position: relative;
  698. .btn-list {
  699. display: flex;
  700. width: 100%;
  701. justify-content: center;
  702. }
  703. img {
  704. width: 100%;
  705. display: block;
  706. margin: 0 auto;
  707. }
  708. .tooltip-msg {
  709. position: relative;
  710. z-index: 999;
  711. width: 100%;
  712. img {
  713. width: 20px;
  714. height: 20px;
  715. float: right;
  716. margin: 0 auto 12px;
  717. }
  718. .tool-tip {
  719. position: absolute;
  720. top: 20px;
  721. border-radius: 4px;
  722. padding: 0.8rem 1.6rem 1.6rem;
  723. font-size: 1.4rem;
  724. line-height: 2.2rem;
  725. background: white;
  726. border: 1px solid rgba(151, 151, 151, 0.2);
  727. filter: drop-shadow(0 2px 4px rgba(31, 35, 41, 0.1));
  728. }
  729. }
  730. }
  731. }
  732. }
  733. }
  734. }
  735. }
  736. }
  737. }
  738. @media screen and (max-width: 1600px) {
  739. /*当屏幕尺寸小于1366px时,应用下面的CSS样式*/
  740. .eq-top {
  741. margin-left: 0 !important;
  742. }
  743. #equipment
  744. .eq-bottom
  745. .eq-right
  746. .eq-right-bottom
  747. .eq-content
  748. .additional-box
  749. .add-img-container {
  750. width: 360px;
  751. max-height: 480px;
  752. }
  753. }
  754. </style>
  755. <style lang="less">
  756. .el-table {
  757. th {
  758. background: rgba(248, 249, 250, 1);
  759. font-size: 12px;
  760. padding: 8px 0;
  761. color: #646a73;
  762. }
  763. td {
  764. font-size: 14px;
  765. color: #1f2429;
  766. padding: 8px 0;
  767. overflow: hidden;
  768. text-overflow: ellipsis;
  769. white-space: nowrap;
  770. }
  771. }
  772. @media screen and (max-width: 1600px) {
  773. .el-table td {
  774. padding: 4px 0;
  775. }
  776. }
  777. #result {
  778. width: 408px;
  779. position: relative;
  780. height: 408px;
  781. overflow-y: auto;
  782. overflow-x: auto;
  783. table {
  784. border-collapse: collapse;
  785. min-width: 100%;
  786. }
  787. th,
  788. td {
  789. border: solid 1px #6d6d6d;
  790. padding: 5px 10px;
  791. white-space:nowrap;
  792. }
  793. .mt-sm {
  794. margin-top: 8px;
  795. }
  796. }
  797. @keyframes selectDownUpExtendTop {
  798. from {
  799. transform: translateY(8px);
  800. opacity: 0;
  801. }
  802. to {
  803. transform: translateY(0);
  804. opacity: 1;
  805. }
  806. }
  807. .selectDownUpExtendTop-enter-active {
  808. animation: selectDownUpExtendTop 0.3s;
  809. }
  810. .selectDownUpExtendTop-leave-active {
  811. animation: selectDownUpExtendTop 0.3s reverse;
  812. }
  813. </style>