index.vue 27 KB

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