index.vue 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785
  1. <template>
  2. <div class="adm-space">
  3. <statistics :statistics-msg="statisticsMsg"/>
  4. <el-divider class="small-divider"></el-divider>
  5. <div class="tabs">
  6. <el-tabs v-model="activeName" type="card" @tab-click="tabChange">
  7. <el-tab-pane label="列表" name="table"></el-tab-pane>
  8. <el-tab-pane label="平面图" name="picture"></el-tab-pane>
  9. </el-tabs>
  10. <div class="tab-content">
  11. <div class="search" :class="{ 'borderBottom': activeName==='picture' }">
  12. <template v-if="activeName==='table'">
  13. <el-cascader clearable ref="floorCascader" placeholder="请选择建筑楼层" :options="options"
  14. v-model="building" filterable size="small"
  15. @change="changeCascader" style="margin-right: 12px"
  16. ></el-cascader>
  17. <el-cascader v-model="zoneTypeValue" :options="zoneTypeOption" placeholder="请选择分区"
  18. @change="changeZoneTypes"
  19. class="item"></el-cascader>
  20. <admSearch @SearchValue="searchValue" class="item"/>
  21. </template>
  22. <template v-if="activeName==='picture'">
  23. <el-cascader clearable ref="graphCascader" placeholder="请选择建筑楼层" :options="graphOptions"
  24. v-model="graphBuilding" filterable size="small"
  25. @change="changeGraphCascader" style="margin-right: 12px" :props="graphProps">
  26. </el-cascader>
  27. <el-cascader v-model="zoneTypeVal" :options="zoneTypeOption" @change="changeZoneType"
  28. placeholder="请选择分区" class="item"></el-cascader>
  29. <el-autocomplete popper-class="my-autocomplete" v-model="autoCompleteSearch"
  30. :fetch-suggestions="querySearch"
  31. placeholder="输入平面图中已有的业务空间名称进行查找" width="180" @select="handleSelect">
  32. <i class="el-icon-search el-input__icon" slot="suffix"></i>
  33. <template slot-scope="{ item }">
  34. <div class="name"
  35. style="position: relative;padding-right:40px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
  36. :title="item.data.RoomLocalName">
  37. {{ item.data.RoomLocalName }}
  38. <span class="addr" style="position: absolute;right:0;color:#409EFF;">定位</span>
  39. </div>
  40. </template>
  41. </el-autocomplete>
  42. <div style="float:right;position: relative;">
  43. <div v-if="createDisable" class="createMask"></div>
  44. <el-dropdown split-button type="primary" @click="editGraphy" @command="handleCommand">
  45. 创建空间
  46. <el-dropdown-menu slot="dropdown">
  47. <!-- <el-dropdown-item command="groupCreateBSpace">批量创建业务空间</el-dropdown-item> -->
  48. <el-dropdown-item command="createWall">创建墙体</el-dropdown-item>
  49. </el-dropdown-menu>
  50. </el-dropdown>
  51. </div>
  52. </template>
  53. </div>
  54. <div v-if="activeName==='table'" v-loading="loading" style="height: calc(100% - 100px);padding: 0 12px">
  55. <template style="height: 100%;" v-if="building.length > 0">
  56. <admMultiTable
  57. @handleCurrentEdit="handleCurrentEdit"
  58. :currentHeader="currentHeader"
  59. :headersStage="headersStage"
  60. :tableData="tableData"/>
  61. <Pagination v-if="tableData.length > 0" :paginationList="paginationList"
  62. @handleCurrentChange="handleCurrentChange"
  63. @handleSizeChange="handleSizeChange"/>
  64. </template>
  65. <div v-else class="void align">
  66. <svg-icon name="void" :width="String(120)" :height="String(123)"/>
  67. <p class="void-title">暂无内容</p>
  68. <p class="void-tips">可点击左上角选择设备类型</p>
  69. </div>
  70. </div>
  71. <div class="graph" v-if="activeName==='picture'">
  72. <spaceGraph @getZoneSuc="getZoneSuc" @initCreatBtn="initCreatBtn" ref="spaceGraph"/>
  73. </div>
  74. </div>
  75. </div>
  76. <el-dialog title="编辑空间信息" :visible.sync="dialogVisible" @close="close">
  77. <baseDataForm :objectHeaders="spaceHeaders"
  78. :currRowContent="currRowContent"
  79. ref="baseDataForm"/>
  80. <span slot="footer" class="dialog-footer">
  81. <el-button type="primary" @click="handleDataForm">完成</el-button>
  82. <el-button @click="dialogVisible = false">取消</el-button>
  83. </span>
  84. </el-dialog>
  85. </div>
  86. </template>
  87. <script lang="ts">
  88. import {Component, Vue} from "vue-property-decorator";
  89. import {AdmMultiTable, AdmSearch, baseDataForm, Pagination, Statistics} from "../components/index";
  90. import spaceGraph from "./components/spaceGraph.vue";
  91. import {buildingQuery, dictQuery, floorQuery, queryCountSpace, queryZone, updateZone} from "@/api/datacenter";
  92. import tools from "@/utils/maintain";
  93. import {BeatchQueryParam} from "@/api/equipComponent";
  94. import {UserModule} from "@/store/modules/user";
  95. @Component({
  96. name: "adm-space",
  97. components: {
  98. Statistics,
  99. AdmSearch,
  100. AdmMultiTable,
  101. spaceGraph,
  102. Pagination,
  103. baseDataForm
  104. },
  105. })
  106. export default class spaceIndex extends Vue {
  107. // loading
  108. loading = false;
  109. private statisticsMsg = {
  110. title: "全部空间",
  111. total: 0,
  112. };
  113. currentHeader = "租赁系统";
  114. activeName = "table";
  115. building = ["all"];
  116. zoneTypeVal = ["FunctionZone"];
  117. zoneTypeValue = ["FunctionZone"];
  118. // 分页
  119. private paginationList = {
  120. page: 1,
  121. size: 50,
  122. sizes: [10, 30, 50, 100, 150, 200],
  123. total: 0,
  124. };
  125. options = [];
  126. graphOptions = [];
  127. zoneTypeOption = [
  128. {
  129. value: "FunctionZone",
  130. label: "功能空间",
  131. },
  132. {
  133. value: "Zone",
  134. label: "业务空间",
  135. children: [
  136. {
  137. value: "FireZone",
  138. label: "防火分区",
  139. },
  140. {
  141. value: "PowerSupplyZone",
  142. label: "供电分区",
  143. },
  144. ],
  145. },
  146. ];
  147. // 信息点集合(表头)
  148. all = [];
  149. codeToDataSource = {};
  150. tableData = [];
  151. // 表头阶段信息结合
  152. headersStage = {};
  153. // 搜索框字段
  154. inputSearch = "";
  155. // 楼层映射
  156. floorToMap = {};
  157. //
  158. graphProps = {
  159. label: "localName",
  160. value: "id",
  161. children: "floor",
  162. };
  163. graphBuilding = [];
  164. spaceHeaders = {}
  165. // 当前行数据
  166. currRowContent = {}
  167. // 弹窗开关
  168. dialogVisible = false
  169. // 搜索
  170. autoCompleteSearch = "";
  171. // 业务空间列表
  172. zoneList = []
  173. // 禁用
  174. createDisable = true
  175. // 项目id
  176. private get projectId(): string {
  177. return UserModule.projectId;
  178. }
  179. created() {
  180. this.getData();
  181. this.dataCount();
  182. // 默认显示全部建筑信息
  183. this.changeCascader();
  184. }
  185. // 业务空间下拉搜索
  186. querySearch(queryString: string, cb: Function) {
  187. let restaurants = this.zoneList;
  188. let results = queryString
  189. ? restaurants.filter(this.createFilter(queryString))
  190. : restaurants;
  191. // 调用 callback 返回建议列表的数据
  192. cb(results);
  193. }
  194. // 过滤器
  195. createFilter(queryString: any) {
  196. return (restaurant: any) => {
  197. return restaurant.data.RoomLocalName.indexOf(queryString) > -1;
  198. };
  199. }
  200. // 查询选中,定位
  201. handleSelect(zone: any) {
  202. if (this.$refs.spaceGraph) {
  203. this.$refs.spaceGraph.handleSelect(zone)
  204. }
  205. }
  206. // 子组件中获取业务空间成功
  207. getZoneSuc(list: []) {
  208. this.zoneList = list
  209. }
  210. // 创建空间
  211. editGraphy() {
  212. if (this.$refs.spaceGraph) {
  213. this.createDisable = true
  214. this.$refs.spaceGraph.editGraphy()
  215. }
  216. }
  217. // 下拉菜单
  218. handleCommand(command: string) {
  219. if (this.$refs.spaceGraph) {
  220. this.createDisable = true
  221. this.$refs.spaceGraph.handleCommand(command)
  222. }
  223. }
  224. /**
  225. * 初始化创建按钮
  226. */
  227. initCreatBtn(flag: boolean) {
  228. this.createDisable = flag
  229. }
  230. //查询统计数量
  231. dataCount() {
  232. queryCountSpace({}).then((res) => {
  233. this.statisticsMsg.total = res.count;
  234. });
  235. }
  236. //获取楼层数据
  237. getData() {
  238. let data,
  239. buildParams = {
  240. pageNumber: 1,
  241. pageSize: 1000,
  242. orders: "localName asc",
  243. projection: ["id", "localName"],
  244. },
  245. floorParams = {
  246. orders: "floorSequenceId desc",
  247. pageNumber: 1,
  248. pageSize: 1000,
  249. };
  250. let promise1 = new Promise((resolve) => {
  251. buildingQuery(buildParams).then((res) => {
  252. resolve(res);
  253. });
  254. });
  255. let promise2 = new Promise((resolve) => {
  256. floorQuery(floorParams).then((res) => {
  257. resolve(res);
  258. });
  259. });
  260. Promise.all([promise1, promise2]).then((values) => {
  261. let buildData = values[0].content,
  262. floorData = values[1].content;
  263. this.floorToMap = {};
  264. data = buildData.map((build) => {
  265. return {
  266. value: build.id,
  267. label: build.localName,
  268. };
  269. });
  270. data.unshift(
  271. {
  272. value: "all",
  273. label: "全部",
  274. },
  275. {
  276. value: "noKnow",
  277. label: "未明确建筑",
  278. }
  279. );
  280. data.forEach((build) => {
  281. floorData.forEach((floor) => {
  282. this.floorToMap[floor.id] = floor;
  283. this.floorToMap[floor.id].build = build.label;
  284. if (
  285. build.value == floor.buildingId &&
  286. floor.id &&
  287. floor.localName
  288. ) {
  289. if (build.children) {
  290. build.children.push({
  291. value: floor.id,
  292. label: floor.localName,
  293. FloorSequenceID: floor.floorSequenceId,
  294. infos: floor.infos || {},
  295. outline: floor.outline || null,
  296. });
  297. } else {
  298. build.children = [];
  299. build.children.push(
  300. {
  301. value: "all",
  302. label: "全部",
  303. },
  304. {
  305. value: "noKnow",
  306. label: "未明确楼层",
  307. },
  308. {
  309. value: floor.id,
  310. label: floor.localName,
  311. FloorSequenceID: floor.floorSequenceId,
  312. infos: floor.infos || {},
  313. outline: floor.outline || null,
  314. }
  315. );
  316. }
  317. }
  318. });
  319. });
  320. this.options = data;
  321. });
  322. const pa = {
  323. pageSize: 1000,
  324. orders: "localName asc",
  325. cascade: [{name: "floor", orders: "floorSequenceId desc"}],
  326. };
  327. buildingQuery(pa).then((res) => {
  328. try {
  329. this.graphOptions = res.content.map((t) => {
  330. if (!t.floor) {
  331. t.floor = [];
  332. }
  333. return t;
  334. });
  335. } catch (err) {
  336. this.graphOptions = [];
  337. }
  338. if (this.graphOptions.length) {
  339. if (this.graphOptions[0].floor.length) {
  340. this.graphBuilding = [
  341. this.graphOptions[0].id,
  342. this.graphOptions[0].floor[0].id,
  343. ];
  344. }
  345. }
  346. });
  347. }
  348. //改变楼层
  349. changeCascader() {
  350. if (this.building.length > 0) {
  351. this.loading = true;
  352. let param = {
  353. // type: "FunctionZone",
  354. type: this.zoneTypeValue[this.zoneTypeValue.length - 1],
  355. orders: "sort asc, name desc",
  356. pageNumber: 1,
  357. pageSize: 1000,
  358. };
  359. let param2 = {
  360. // 级联查建筑楼层信息
  361. cascade: [
  362. {name: "building"},
  363. {name: "floor", orders: "floorSequenceId desc"},
  364. ],
  365. // zoneType: "FunctionZone",
  366. zoneType: this.zoneTypeValue[this.zoneTypeValue.length - 1],
  367. pageNumber: this.paginationList.page,
  368. pageSize: this.paginationList.size,
  369. orders: "createTime asc, localName asc, localId desc, id asc",
  370. };
  371. let search = this.inputSearch ? `;localName contain '${this.inputSearch}' or localId contain '${this.inputSearch}'` : ''
  372. if (this.building.length === 1) {
  373. param2.filters = "";
  374. switch (this.building[0]) {
  375. case "noKnow":
  376. param2.filters = `buildingId='isnull'${search}`;
  377. break;
  378. case "all":
  379. if (this.inputSearch) {
  380. param2.filters = `localName contain '${this.inputSearch}' or localId contain '${this.inputSearch}'`
  381. } else {
  382. delete param2.filters;
  383. }
  384. break;
  385. }
  386. } else if (this.building.length === 2) {
  387. switch (this.building[1]) {
  388. case "noKnow":
  389. param2.filters = `buildingId='${this.building[0]}';floorId='isnull'${search}`;
  390. break;
  391. case "all":
  392. param2.filters = `buildingId='${this.building[0]}'${search}`;
  393. break;
  394. default:
  395. param2.filters = `buildingId='${this.building[0]}';floorId='${this.building[1]}'${search}`;
  396. }
  397. }
  398. let promise = new Promise((resolve) => {
  399. dictQuery(param).then((res) => {
  400. resolve(res);
  401. });
  402. });
  403. let promise2 = new Promise((resolve) => {
  404. queryZone(param2).then((res) => {
  405. resolve(res);
  406. });
  407. });
  408. Promise.all([promise, promise2]).then((res) => {
  409. let tableData = [];
  410. this.loading = false;
  411. // 类型下信息点,重组数据
  412. let basicInfos = [],
  413. dictStages = [];
  414. this.all = res[0].content;
  415. res[0].content.forEach((item) => {
  416. let i = ["localName", "localId", "building", "floor"];
  417. if (i.includes(item.path)) {
  418. basicInfos.push(item);
  419. } else {
  420. dictStages.push(item);
  421. }
  422. });
  423. dictStages.map((val, index) => {
  424. if (val.path == "outline") {
  425. dictStages.splice(index, 1);
  426. }
  427. return val;
  428. });
  429. basicInfos.map((item) => {
  430. if (item.path == "building") {
  431. item.path = "buildingSign";
  432. }
  433. if (item.path == "floor") {
  434. item.path = "floorSign";
  435. }
  436. return item;
  437. });
  438. this.headersStage = {
  439. basicInfos: {
  440. name: "基础信息台账",
  441. data: basicInfos,
  442. },
  443. dictStages: {
  444. name: "租赁系统",
  445. data: dictStages,
  446. },
  447. };
  448. this.paginationList.total = res[1].total;
  449. tableData = res[1].content; // 主体数据
  450. // 处理 outline BIM模型中轮廓坐标 展示
  451. // 添加建筑,楼层展示(从下拉框获取)
  452. this.tableData = tableData.map((item) => {
  453. if (item.building) {
  454. item.buildingSign = item.building.localName;
  455. }
  456. if (item.floor) {
  457. item.floorSign = item.floor.localName;
  458. }
  459. // 删除轮廓线
  460. if (item.outline) {
  461. delete item.outline;
  462. }
  463. // item = {
  464. // ...item,
  465. // outline: JSON.stringify(item.outline),
  466. // };
  467. return item;
  468. });
  469. // 列表信息展示,获取动态数据
  470. this.codeToDataSource = {};
  471. this.all.forEach((item) => {
  472. if (item.dataSource) {
  473. try {
  474. this.codeToDataSource[item.code] = {};
  475. item.dataSource.forEach((dic) => {
  476. this.codeToDataSource[item.code][dic.code] =
  477. dic.name;
  478. });
  479. } catch (e) {
  480. console.log(e);
  481. }
  482. }
  483. });
  484. this.getBatch(this.tableData);
  485. });
  486. } else {
  487. console.log("void");
  488. }
  489. }
  490. // 图建筑楼层修改
  491. changeGraphCascader() {
  492. this.toGraph();
  493. }
  494. // 动态信息点
  495. getBatch(data) {
  496. let param = {
  497. groupCode: "WD",
  498. appId: "datacenter",
  499. projectId: this.projectId,
  500. data: [],
  501. };
  502. this.all.forEach((head) => {
  503. if (head.category != "STATIC") {
  504. data.forEach((item) => {
  505. let cur = tools.dataForKey(item, head.path);
  506. if (cur) {
  507. param.data.push({
  508. objectId: item.id,
  509. infoCode: head.code,
  510. });
  511. }
  512. });
  513. }
  514. });
  515. if (param.data.length) {
  516. BeatchQueryParam(param).then((res) => {
  517. this.tableData = data.map((item) => {
  518. res.data.map((child) => {
  519. if (item.id == child.objectId) {
  520. if (!!child.data || child.data == 0) {
  521. this.all.map((head) => {
  522. if (head.code == child.infoCode) {
  523. let contentVal = child.data;
  524. if (this.codeToDataSource[child.infoCode]) {
  525. contentVal = this.codeToDataSource[child.infoCode][child.data];
  526. }
  527. tools.setDataForKey(
  528. item,
  529. head.path,
  530. contentVal
  531. );
  532. }
  533. });
  534. } else {
  535. this.all.map((head) => {
  536. if (head.code == child.infoCode) {
  537. tools.setDataForKey(
  538. item,
  539. head.path,
  540. child.error ? child.value
  541. ? "表号功能号格式错误"
  542. : "表号功能号不存在"
  543. : "暂未采集到实时数据"
  544. );
  545. }
  546. });
  547. }
  548. }
  549. });
  550. return item;
  551. });
  552. });
  553. }
  554. }
  555. // 修改分区类型
  556. changeZoneType(val) {
  557. this.toGraph();
  558. }
  559. // 修改表格分区类型
  560. changeZoneTypes() {
  561. this.changeCascader();
  562. }
  563. // 当前分页
  564. handleCurrentChange(val: number) {
  565. this.paginationList.page = val;
  566. this.changeCascader();
  567. }
  568. // close
  569. close() {
  570. // this.next = true;
  571. }
  572. // 添加/编辑 事件处理
  573. handleDataForm() {
  574. this.$refs.baseDataForm.submitForm(this.handleDataFormSave)
  575. }
  576. handleDataFormSave() {
  577. let from = tools.formatData(this.$refs.baseDataForm.form)
  578. let param = {
  579. content: [from]
  580. }
  581. updateZone(param).then(res => {
  582. if (res.result == 'success') {
  583. this.$message.success('更新成功')
  584. this.dialogVisible = false
  585. // 默认显示全部建筑信息
  586. this.changeCascader();
  587. }
  588. })
  589. }
  590. handleSizeChange(val: number) {
  591. this.paginationList.size = val;
  592. this.changeCascader();
  593. }
  594. // 搜索
  595. searchValue(val: string) {
  596. this.inputSearch = val;
  597. this.changeCascader();
  598. }
  599. // 编辑当前行
  600. handleCurrentEdit(val: object) {
  601. this.currRowContent = val;
  602. this.spaceHeaders = this.headersStage;
  603. this.dialogVisible = true;
  604. }
  605. // tab页切换
  606. tabChange() {
  607. if (this.activeName == "picture") {
  608. this.$nextTick(() => {
  609. this.toGraph();
  610. });
  611. }
  612. }
  613. // 切换至图
  614. toGraph() {
  615. if (this.graphBuilding.length) {
  616. if (
  617. this.graphBuilding.indexOf("noKnow") < 0 &&
  618. this.graphBuilding.indexOf("all") < 0
  619. ) {
  620. this.$refs.spaceGraph.getData(
  621. this.floorToMap[this.graphBuilding[1]],
  622. this.zoneTypeVal
  623. );
  624. } else {
  625. this.$refs.spaceGraph.noMap();
  626. }
  627. } else {
  628. this.$refs.spaceGraph.noMap();
  629. }
  630. }
  631. }
  632. </script>
  633. <style lang="scss" scoped>
  634. .void {
  635. margin-top: 200px;
  636. }
  637. .align {
  638. display: flex;
  639. align-items: center;
  640. justify-content: center;
  641. flex-direction: column;
  642. flex-wrap: wrap;
  643. }
  644. .adm-space {
  645. background: #fff;
  646. padding: 12px;
  647. height: 100%;
  648. .small-divider {
  649. margin: 12px 0;
  650. }
  651. .tabs {
  652. position: relative;
  653. height: calc(100% - 92px);
  654. ::v-deep .el-tabs__header {
  655. margin: 0;
  656. }
  657. .tab-content {
  658. height: calc(100% - 41px);
  659. border: 1px solid #e1e7ea;
  660. border-top: none;
  661. padding-bottom: 12px;
  662. .search {
  663. padding: 16px;
  664. //border-bottom: 1px solid #e1e7ea;
  665. & > .item + .item {
  666. margin-left: 16px;
  667. }
  668. .createMask {
  669. position: absolute;
  670. width: 100%;
  671. height: 100%;
  672. background: #ffffff80;
  673. cursor: not-allowed;
  674. z-index: 9;
  675. }
  676. }
  677. .borderBottom {
  678. border-bottom: 1px solid #e1e7ea;
  679. }
  680. .graph {
  681. height: calc(100% - 64px);
  682. }
  683. }
  684. }
  685. .adm-pagination {
  686. right: 10px;
  687. position: absolute;
  688. bottom: 10px;
  689. }
  690. }
  691. </style>
  692. <style lang="scss">
  693. .adm-space {
  694. .el-dialog {
  695. .el-dialog__body {
  696. padding: 20px;
  697. max-height: 550px !important;
  698. min-height: 100px;
  699. overflow-y: auto;
  700. overflow-x: hidden;
  701. }
  702. }
  703. .el-select, .el-date-editor.el-input, .el-date-editor.el-input__inner {
  704. width: 100%;
  705. }
  706. .el-autocomplete {
  707. display: inline-block;
  708. width: 320px;
  709. margin-left: 12px;
  710. }
  711. .my-autocomplete {
  712. li {
  713. line-height: normal;
  714. padding: 7px;
  715. .name {
  716. text-overflow: ellipsis;
  717. overflow: hidden;
  718. }
  719. .addr {
  720. font-size: 12px;
  721. color: #b4b4b4;
  722. }
  723. .highlighted .addr {
  724. color: #ddd;
  725. }
  726. }
  727. }
  728. }
  729. </style>