CoreDeviceReport.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773
  1. <!-- 核心设备报表 -->
  2. <template>
  3. <div class="core-device-report">
  4. <div class="main-left">
  5. <Select
  6. class="system-select"
  7. width="217"
  8. :isReadOnly="true"
  9. tipPlace="top"
  10. caption="系统名称:"
  11. @change="changeCurSystem"
  12. v-model="systemId"
  13. :selectdata="systemList"
  14. :placeholder="'请选择'"
  15. hideClear
  16. />
  17. <div class="system-content">
  18. <div
  19. v-for="(item) in systemContentData"
  20. :key="'key_' + item.category_code"
  21. class="item-content"
  22. :class="{'active': item.isActive}"
  23. @click="changeEquipment(item.category_code)"
  24. >
  25. <div class="first-row">
  26. <div>{{item.name}}</div>
  27. <div>{{item.isMaintenance?'维保中' : ''}}</div>
  28. </div>
  29. <div class="sec-row">
  30. <div>
  31. {{item.num}}
  32. <span>台</span>
  33. </div>
  34. <span :class="{'abnormal': item.abnormal}">{{item.statusNum !== 0?item.statusNum : ''}}</span>
  35. </div>
  36. </div>
  37. </div>
  38. </div>
  39. <div class="main-right">
  40. <div class="search-container">
  41. <Input
  42. iconType="search"
  43. v-model="searchKey"
  44. placeholder="搜索"
  45. width="192"
  46. @pressEnter="getTableData"
  47. @clear="getTableData"
  48. />
  49. </div>
  50. <el-table
  51. :data="tableData"
  52. style="width: 100%;margin-bottom: 63px;"
  53. @row-click="showEquipmentStatus"
  54. >
  55. <el-table-column label="序号" type="index" width="60" :index="indexMethod"></el-table-column>
  56. <el-table-column prop="sbjc" label="设备名称" width="600"></el-table-column>
  57. <el-table-column prop="assetnum" label="设备内码"></el-table-column>
  58. <el-table-column prop="is_exception" label="状态">
  59. <template slot-scope="scope">
  60. <span
  61. style="display: inline-block;width: 6px;height:6px;border-radius: 3px;background: #0091FF;"
  62. :style="{'background': !scope.row.is_exception?'#0091FF' : '#F54E45'}"
  63. ></span>
  64. <span style="margin-left: 10px">{{ !scope.row.is_exception?'正常' : '异常' }}</span>
  65. </template>
  66. </el-table-column>
  67. <el-table-column prop="photos_num" label="照片">
  68. <template slot-scope="scope">
  69. <span
  70. style="color: #025BAA"
  71. @click="showPicturesDetail(scope.row, 'equip')"
  72. >{{ scope.row.photos_num?(scope.row.photos_num + '张') : '—' }}</span>
  73. <!-- <span style="color: #025BAA" @click="showPicturesDetail(scope.row)">1张</span> -->
  74. </template>
  75. </el-table-column>
  76. <el-table-column prop="attachments_num" label="报告">
  77. <template slot-scope="scope">
  78. <span style="color: #025BAA" @click="(e) => showReportDetail(scope.row, 'equip', e)">{{ scope.row.attachments_num?(scope.row.attachments_num+ '张') : '—'}}</span>
  79. <!-- <span style="color: #025BAA" @click="(e) => showReportDetail(scope.row, 'equip', e)">1张</span> -->
  80. </template>
  81. </el-table-column>
  82. </el-table>
  83. <div class="page">
  84. <el-pagination
  85. background
  86. layout="prev, pager, next"
  87. :total="tatol"
  88. :current-page="curPage"
  89. :page-size="pageSize"
  90. @current-change="changeTablePage"
  91. ></el-pagination>
  92. </div>
  93. <el-dialog :title="equipTitle" :visible.sync="dialogTableVisible" width="1260px">
  94. <el-date-picker
  95. style="margin-bottom: 12px;"
  96. v-model="dialogTime"
  97. type="daterange"
  98. range-separator="至"
  99. @change="changeTime"
  100. start-placeholder="开始日期"
  101. end-placeholder="结束日期"
  102. ></el-date-picker>
  103. <el-table :data="historyTableData" style="margin-bottom: 55px;" max-height="500">
  104. <el-table-column width="200" property="finishDate" label="日期"></el-table-column>
  105. <el-table-column width="100" property="typeName" label="事项类型"></el-table-column>
  106. <el-table-column property="taskName" label="事项名称"></el-table-column>
  107. <el-table-column width="100" property="photosNum" label="照片">
  108. <template slot-scope="scope">
  109. <span
  110. style="color: #025BAA"
  111. @click="showPicturesDetail(scope.row, 'his')"
  112. >{{ scope.row.photosNum?(scope.row.photosNum + '张') : '—' }}</span>
  113. <!-- <span style="color: #025BAA" @click="showPicturesDetail(scope.row)">1张</span> -->
  114. </template>
  115. </el-table-column>
  116. <el-table-column width="100" property="attachmentsNum" label="报告">
  117. <template slot-scope="scope">
  118. <span style="color: #025BAA" @click="(e) => showReportDetail(scope.row, 'his', e)">{{ scope.row.attachmentsNum?(scope.row.attachmentsNum+ '张') : '—'}}</span>
  119. <!-- <span style="color: #025BAA" @click="(e) => showReportDetail(scope.row, 'his', e)">1张</span> -->
  120. </template>
  121. </el-table-column>
  122. </el-table>
  123. <div class="page">
  124. <el-pagination
  125. background
  126. layout="prev, pager, next"
  127. :current-page="hisCurPage"
  128. :page-size="hisPageSize"
  129. :total="hisTotal"
  130. @current-change="changeHisTablePage"
  131. ></el-pagination>
  132. </div>
  133. </el-dialog>
  134. <div class="img-detail-container">
  135. <el-dialog :title="detailTitle" :visible.sync="showDetail" width="1260px">
  136. <div class="detail-container">
  137. <div class="pictures-menu">
  138. <div
  139. v-for="(item) in pictureList"
  140. :key="'id_' + item.id"
  141. class="item"
  142. @click="changeCurImg(item.id)"
  143. :class="{'active': item.isActive}"
  144. >
  145. <img :src="item.url" alt />
  146. <div class="name" :title="item.name">{{item.name}}</div>
  147. </div>
  148. </div>
  149. <div class="cur-img-container">
  150. <img v-if="curImg.url" :src="curImg.url" alt />
  151. </div>
  152. </div>
  153. </el-dialog>
  154. </div>
  155. </div>
  156. <div v-show="showAccessory" class="accessory-container" :style="{'top': accessoryPos.top + 'px', 'left': accessoryPos.left + 'px'}">
  157. <div v-for="(item) in accessoryList" :key="'id_' + item.id">
  158. <a :href="item.url" target="_blank" :title="item.name">{{item.name}}</a>
  159. </div>
  160. </div>
  161. </div>
  162. </template>
  163. <script>
  164. import { Select, Input } from "meri-design";
  165. import {
  166. querySystemList,
  167. queryEquipmentList,
  168. queryTableData,
  169. queryHistoryTableData,
  170. queryDetailData
  171. } from "../../api/coreDeviceReport";
  172. import _ from "lodash";
  173. import moment from "moment";
  174. export default {
  175. data() {
  176. return {
  177. plazaId: 1000423, // 广场id
  178. systemId: "", // 当前系统Id
  179. systemList: [], // 系统
  180. systemContentData: [
  181. // {id: 1, name: '高压配电柜', isMaintenance: true, num: 95, statusNum: 0, abnormal: false, isActive: true},
  182. // {id: 2, name: '变压器', isMaintenance: false, num: 256, statusNum: 12, abnormal: true, isActive: false},
  183. // {id: 3, name: '低压配电柜', isMaintenance: false, num: 354, statusNum: 0, abnormal: false, isActive: false},
  184. // {id: 4, name: '直流屏', isMaintenance: false, num: 175, statusNum: 0, abnormal: false, isActive: false},
  185. // {id: 5, name: '柴油发电机组', isMaintenance: false, num: 186, status: 0, abnormal: false, isActive: false},
  186. ], // 系统下的各种组成
  187. searchKey: "", // 搜索关键字
  188. tableData: [
  189. // {serialNumber: 1, equipmentName: 2, equipmentNumber: 3, status: '正常', photo: 5, report: 6},
  190. // {serialNumber: 1, equipmentName: 2, equipmentNumber: 3, status: '异常', photo: 5, report: 6},
  191. // {serialNumber: 1, equipmentName: 2, equipmentNumber: 3, status: '正常', photo: 5, report: 6},
  192. ], // 表数据
  193. curPage: 1, // 当前页码
  194. pageSize: 10, // 每页条数
  195. tatol: 0, // 总数据
  196. dialogTableVisible: false, // 弹窗显示状态
  197. // 核心设备实例
  198. equipTitle: "", // 核心设备弹窗名称
  199. assetnum: null, // 设备台账编码
  200. historyTableData: [], // 核心设备实例的所有历史事项信息
  201. dialogTime: null, // 弹框内的时间
  202. hisCurPage: 1, // 当前页码
  203. hisPageSize: 8, // 当前页码
  204. hisTotal: 0, // 总条数
  205. startTime: null, // 开始时间
  206. endTime: null, // 结束事件
  207. showDetail: false, // 显示照片、报告详情
  208. detailTitle: "图片预览", // 弹窗名称
  209. pictureList: [
  210. // {id: 1, url: require('../../assets/images/login_back.png'), name: '图层名称1.jpg'},
  211. // {id: 2, url: require('../../assets/images/matter_pop3.png'), name: '图层名称2.jpg'},
  212. // {id: 3, url: require('../../assets/images/login_back.png'), name: '图层名称3.jpg'},
  213. ], // 图片列表
  214. curImg: {}, // 当前图片
  215. isClickPicture: false, // 是否点击的是照片
  216. showAccessory: false, // 附件窗口显示状态
  217. isClickAccessory: false, // 是否点击的是附件
  218. accessoryList: [], // 附件
  219. accessoryPos: {
  220. top: 0,
  221. left: 0
  222. }, // 附件弹窗位置
  223. };
  224. },
  225. components: {
  226. Select,
  227. Input
  228. },
  229. computed: {},
  230. beforeMount() {
  231. let PLAZAID = localStorage.getItem('PLAZAID');
  232. this.plazaId = Number(PLAZAID) || 1000423;
  233. },
  234. mounted() {
  235. document.addEventListener('click', () => {
  236. setTimeout(() => {
  237. if (this.isClickAccessory) {
  238. this.isClickAccessory = false;
  239. return
  240. }
  241. this.showAccessory = false;
  242. }, 20)
  243. })
  244. this.getSystemList();
  245. },
  246. methods: {
  247. /**
  248. * 获取系统列表数据
  249. */
  250. getSystemList() {
  251. querySystemList().then(res => {
  252. if (res.result === "success") {
  253. let data = res.data;
  254. let newData = [];
  255. _.forEach(data, item => {
  256. newData.push({
  257. id: item.code,
  258. name: item.name
  259. });
  260. });
  261. this.systemList = newData;
  262. const { query } = this.$route;
  263. if (!_.isEmpty(query)) {
  264. this.systemId = query.smsxt || newData[0].id;
  265. } else {
  266. this.systemId = newData[0].id;
  267. }
  268. this.getEquipmentOfSystem();
  269. }
  270. });
  271. },
  272. /**
  273. * 切换系统名称
  274. */
  275. changeCurSystem(val) {
  276. console.log("val", val);
  277. this.curPage = 1;
  278. this.getEquipmentOfSystem();
  279. },
  280. /**
  281. * 获取系统下的设备
  282. */
  283. getEquipmentOfSystem() {
  284. let param = {
  285. plazaId: this.plazaId,
  286. };
  287. if (this.systemId !== "") {
  288. param.smsxt = this.systemId;
  289. }
  290. queryEquipmentList("/data/home/querySystemCard", param).then(res => {
  291. const { result, data } = res;
  292. if (result === "success") {
  293. let newData = [],
  294. abnormalList = [];
  295. if (!data[0].assetTypeList) {
  296. this.tableData = [];
  297. this.systemContentData = [];
  298. this.curPage = 1;
  299. this.tatol = 0;
  300. return
  301. }
  302. _.forEach(data[0].assetTypeList, (item, index) => {
  303. let itemData = {
  304. name: item.category_name,
  305. isMaintenance: item.is_detecting,
  306. statusNum: item.is_exception_num,
  307. num: item.asset_num,
  308. abnormal: item.is_exception_num !== 0,
  309. category_code: item.category_code
  310. };
  311. if (!item.category_code) {
  312. console.error("without category_code..", item);
  313. }
  314. if (item.is_exception_num === 0) {
  315. newData.push(itemData);
  316. } else {
  317. abnormalList.push(itemData);
  318. }
  319. });
  320. newData = abnormalList.concat(newData);
  321. _.map(newData, (o, i) => {
  322. return (o.isActive = i === 0);
  323. });
  324. const { query } = this.$route;
  325. this.systemContentData = newData;
  326. if (!_.isEmpty(query) && query.equipId) {
  327. _.map(this.systemContentData, o => {
  328. return (o.isActive = o.category_code == query.equipId);
  329. });
  330. }
  331. this.getTableData();
  332. }
  333. });
  334. },
  335. /**
  336. * 切换系统下的设备
  337. */
  338. changeEquipment(id) {
  339. this.curPage = 1;
  340. _.map(this.systemContentData, o => {
  341. return (o.isActive = o.category_code === id);
  342. });
  343. this.getTableData();
  344. },
  345. /**
  346. * 获取表数据
  347. */
  348. getTableData() {
  349. let query = {
  350. category_code: _.find(this.systemContentData, o => {
  351. return o.isActive;
  352. }).category_code
  353. };
  354. let url = `/data/sms_asset/query?plazaId=${this.plazaId}&page=${this.curPage}&size=${this.pageSize}&orderBy=is_exception,0`;
  355. if (_.trim(this.searchKey) !== "") {
  356. url = `${url}&keyword=${this.searchKey}:sbjc,sbjbm`;
  357. }
  358. queryTableData(url, query).then(res => {
  359. const { result, count, data } = res;
  360. if (result === "success") {
  361. this.tatol = count;
  362. this.tableData = data;
  363. }
  364. });
  365. },
  366. /**
  367. * 表第一列序号
  368. */
  369. indexMethod(index) {
  370. return index + 1;
  371. },
  372. /**
  373. * 切换页码
  374. */
  375. changeTablePage(page) {
  376. this.curPage = page;
  377. this.getTableData();
  378. },
  379. /**
  380. * 显示设备实例的维保、专维等状态
  381. */
  382. showEquipmentStatus(row, column, e) {
  383. let ins = this;
  384. setTimeout(() => {
  385. ins.hisCurPage = 1;
  386. if (ins.showDetail || ins.showAccessory) {
  387. return;
  388. }
  389. if (ins.isClickPicture) {
  390. ins.isClickPicture = false;
  391. return
  392. }
  393. ins.equipTitle = row.sbjc;
  394. ins.dialogTableVisible = true;
  395. ins.assetnum = row.assetnum;
  396. ins.initTimePicker();
  397. }, 36);
  398. },
  399. /**
  400. * 获取核心设备实例的所有历史事项信息
  401. */
  402. getEquipmentHistoryMsg() {
  403. this.historyTableData = [];
  404. let param = {
  405. page: this.hisCurPage,
  406. size: this.hisPageSize,
  407. plazaId: this.plazaId,
  408. assetnum: this.assetnum,
  409. // assetnum: 24071,
  410. startDate: this.startTime,
  411. // startDate: 20000101000000,
  412. endDate: this.endTime
  413. // endDate: 20200201000000
  414. };
  415. queryHistoryTableData("/data/base/queryDateByAssetNum", param).then(
  416. res => {
  417. const { result, data, count } = res;
  418. if (result === "success") {
  419. this.historyTableData = data;
  420. this.hisTotal = count;
  421. _.forEach(this.historyTableData, item => {
  422. let name;
  423. switch (item.type) {
  424. case 0:
  425. name = "专维";
  426. break;
  427. case 1:
  428. name = "维保";
  429. break;
  430. case 2:
  431. name = "第三方视图";
  432. break;
  433. }
  434. item.typeName = name;
  435. item.finishDate = moment
  436. .unix(item.finishDate / 1000)
  437. .format("YYYY.MM.DD");
  438. });
  439. }
  440. }
  441. );
  442. },
  443. /**
  444. * 初始化时间选择器
  445. */
  446. initTimePicker() {
  447. let endTime = new Date(),
  448. startTime = new Date(endTime.getTime() - 1000 * 60 * 60 * 24 * 30);
  449. this.dialogTime = [startTime, endTime];
  450. this.changeTime();
  451. },
  452. /**
  453. * 切换时间
  454. */
  455. changeTime() {
  456. this.hisCurPage = 1;
  457. if (this.dialogTime) {
  458. this.startTime = moment
  459. .unix(new Date(this.dialogTime[0]).getTime() / 1000)
  460. .format("YYYYMMDDHHmmss");
  461. this.endTime = moment
  462. .unix(new Date(this.dialogTime[1]).getTime() / 1000)
  463. .format("YYYYMMDDHHmmss");
  464. } else {
  465. this.initTimePicker();
  466. }
  467. this.getEquipmentHistoryMsg();
  468. },
  469. /**
  470. * 切换设备台账下所有历史事项信息页码
  471. */
  472. changeHisTablePage(page) {
  473. this.hisCurPage = page;
  474. this.getEquipmentHistoryMsg();
  475. },
  476. /**
  477. * 显示图片详情
  478. */
  479. showPicturesDetail(val, type) {
  480. console.log("val", val);
  481. if (type === "equip") {
  482. if (!val.photos_num) {
  483. this.isClickPicture = true;
  484. return
  485. }
  486. if (!val.file_type || !val.file_type_id) {
  487. return;
  488. }
  489. } else {
  490. if (!val.photosNum) {
  491. this.isClickPicture = true;
  492. return;
  493. }
  494. }
  495. this.showDetail = true;
  496. this.detailTitle = "图片预览";
  497. this.getDetailData(val, type);
  498. },
  499. /**
  500. * 显示附件详情
  501. */
  502. showReportDetail(val, type, e) {
  503. console.log("val111", val);
  504. if (type === "equip") {
  505. if (!val.attachments_num) {
  506. this.isClickPicture = true;
  507. return
  508. }
  509. if (!val.file_type || !val.file_type_id) {
  510. return;
  511. }
  512. } else {
  513. if (!val.attachmentsNum) {
  514. this.isClickPicture = true;
  515. return
  516. }
  517. }
  518. this.accessoryPos = {
  519. top: e.clientY + 5,
  520. left: e.clientX - 360 -5
  521. }
  522. this.showAccessory = true;
  523. this.isClickAccessory = true;
  524. this.detailTitle = "附件预览";
  525. this.getDetailData(val, type);
  526. },
  527. /**
  528. * 获取图片/报告详情
  529. */
  530. getDetailData(val, type) {
  531. let param = {
  532. assetnum: this.assetnum,
  533. plazaId: this.plazaId,
  534. file_type: type === 'equip'?val.file_type : val.type,
  535. // file_type: 0,
  536. file_type_id: type === 'equip'?val.file_type_id : val.id,
  537. // file_type_id: this.detailTitle === "图片预览" ?2914 : 1136,
  538. // file_type_id: 9886,
  539. type: this.detailTitle === "图片预览" ? 0 : 1
  540. };
  541. queryDetailData("/data/base/queryFileDetails", param).then(res => {
  542. console.log("res", res);
  543. const { result, data } = res;
  544. if (result === "success") {
  545. let newData = [];
  546. _.forEach(data, (item, index) => {
  547. newData.push({
  548. id: item.id,
  549. url: item.urlname,
  550. isActive: index === 0,
  551. name: item.description
  552. });
  553. });
  554. if (this.detailTitle === "图片预览") {
  555. this.pictureList = newData;
  556. if (this.pictureList.length > 0) {
  557. this.curImg = this.pictureList[0];
  558. }
  559. } else {
  560. this.accessoryList = newData;
  561. }
  562. }
  563. });
  564. },
  565. /**
  566. * 切换当前预览大图
  567. */
  568. changeCurImg(id) {
  569. _.map(this.pictureList, o => {
  570. return (o.isActive = o.id === id);
  571. });
  572. this.curImg = _.find(this.pictureList, o => {
  573. return o.isActive;
  574. });
  575. }
  576. }
  577. };
  578. </script>
  579. <style lang='less' scoped>
  580. .core-device-report {
  581. display: flex;
  582. width: 100%;
  583. height: 100%;
  584. .main-left {
  585. padding-left: 16px;
  586. padding-right: 14px;
  587. padding-top: 12px;
  588. padding-bottom: 12px;
  589. width: 247px;
  590. border-top: 1px solid #e4e6e7;
  591. border-right: 1px solid #e4e6e7;
  592. .system-select {
  593. margin-bottom: 16px;
  594. }
  595. .item-content {
  596. padding-left: 12px;
  597. padding-right: 21px;
  598. padding-top: 7px;
  599. padding-bottom: 8px;
  600. border-bottom: 1px solid #e4e6e7;
  601. cursor: pointer;
  602. > div {
  603. display: flex;
  604. }
  605. .first-row {
  606. margin-bottom: 6px;
  607. display: flex;
  608. justify-content: space-between;
  609. > div:first-child {
  610. font-size: 14px;
  611. color: #1f2429;
  612. line-height: 19px;
  613. }
  614. > div:nth-of-type(2) {
  615. margin-left: 8px;
  616. font-size: 12px;
  617. color: #cd981d;
  618. line-height: 20px;
  619. }
  620. }
  621. .sec-row {
  622. margin-bottom: 6px;
  623. > div:first-child {
  624. font-size: 14px;
  625. color: #1f2429;
  626. line-height: 19px;
  627. > span {
  628. font-size: 12px;
  629. color: #646c73;
  630. }
  631. }
  632. // >div:nth-of-type(2){
  633. // padding-left: 8px;
  634. // padding-right: 8px;
  635. // font-size: 12px;
  636. // color: #0065B3;
  637. // line-height: 22px;
  638. // background: #E1F2FF;
  639. // }
  640. .abnormal {
  641. margin-left: 11px;
  642. padding-left: 3px;
  643. padding-right: 3px;
  644. font-size: 12px;
  645. color: #f54e45 !important;
  646. background: #fde3e2 !important;
  647. border-radius: 9px;
  648. }
  649. }
  650. }
  651. .system-content {
  652. .active {
  653. background: #e5eef5;
  654. border-radius: 2px;
  655. .first-row > div:first-child,
  656. .sec-row > div {
  657. color: #025baa;
  658. > span {
  659. color: #025baa;
  660. }
  661. }
  662. }
  663. }
  664. }
  665. .main-right {
  666. flex: 1;
  667. background: #fff;
  668. padding-left: 15px;
  669. padding-right: 13px;
  670. padding-top: 13px;
  671. padding-bottom: 25px;
  672. overflow: auto;
  673. .search-container {
  674. margin-bottom: 12px;
  675. }
  676. .page {
  677. display: flex;
  678. justify-content: flex-end;
  679. }
  680. }
  681. .el-dialog {
  682. min-height: 600px;
  683. }
  684. .detail-container {
  685. display: flex;
  686. height: 600px;
  687. }
  688. .pictures-menu {
  689. margin-right: 21px;
  690. padding-top: 16px;
  691. padding-bottom: 16px;
  692. padding-right: 5px;
  693. height: 100%;
  694. overflow: auto;
  695. .item {
  696. > img {
  697. width: 180px;
  698. border: 4px solid rgba(245, 246, 247, 1);
  699. border-radius: 4px;
  700. }
  701. .name {
  702. width: 180px;
  703. font-size: 12px;
  704. color: #1f2429;
  705. line-height: 16px;
  706. margin-top: 12px;
  707. text-align: center;
  708. overflow: hidden;
  709. text-overflow: ellipsis;
  710. white-space: nowrap;
  711. }
  712. &:not(:last-of-type) {
  713. margin-bottom: 20px;
  714. }
  715. .active>img{
  716. border-color: rgba(31, 35, 41, 0.15);
  717. }
  718. }
  719. .active > img {
  720. border-color: rgba(31, 35, 41, 0.15);
  721. }
  722. }
  723. .cur-img-container {
  724. padding: 20px;
  725. flex: 1;
  726. height: 100%;
  727. background: #f5f6f7;
  728. display: flex;
  729. justify-content: center;
  730. align-items: center;
  731. > img {
  732. max-width: 730px;
  733. max-height: 530px;
  734. }
  735. }
  736. .accessory-container{
  737. padding-top: 4px;
  738. padding-bottom: 4px;
  739. width: 360px;
  740. max-height: 166px;
  741. overflow: auto;
  742. position: fixed;
  743. background: #fff;
  744. box-shadow: 0px 2px 10px 0px rgba(31,35,41,0.1);
  745. border-radius: 2px;
  746. border: 1px solid rgba(228,229,231,1);
  747. z-index: 5000;
  748. >div>a{
  749. padding-left: 12px;
  750. padding-right: 12px;
  751. display: block;
  752. height: 38px;
  753. font-size: 14px;
  754. line-height: 38px;
  755. overflow: hidden;
  756. text-overflow: ellipsis;
  757. white-space: nowrap;
  758. &:hover{
  759. background: #F5F6F7;
  760. }
  761. }
  762. }
  763. }
  764. </style>