CoreDeviceReport.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765
  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" :index="indexMethod"></el-table-column>
  56. <el-table-column prop="sbjc" label="设备简称"></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 === 0?(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. _.forEach(data[0].assetTypeList, (item, index) => {
  296. let itemData = {
  297. name: item.category_name,
  298. isMaintenance: item.is_detecting,
  299. statusNum: item.is_exception_num,
  300. num: item.asset_num,
  301. abnormal: item.is_exception_num !== 0,
  302. category_code: item.category_code
  303. };
  304. if (!item.category_code) {
  305. console.error("without category_code..", item);
  306. }
  307. if (item.is_exception_num === 0) {
  308. newData.push(itemData);
  309. } else {
  310. abnormalList.push(itemData);
  311. }
  312. });
  313. newData = abnormalList.concat(newData);
  314. _.map(newData, (o, i) => {
  315. return (o.isActive = i === 0);
  316. });
  317. const { query } = this.$route;
  318. this.systemContentData = newData;
  319. if (!_.isEmpty(query) && query.equipId) {
  320. _.map(this.systemContentData, o => {
  321. return (o.isActive = o.category_code == query.equipId);
  322. });
  323. }
  324. this.getTableData();
  325. }
  326. });
  327. },
  328. /**
  329. * 切换系统下的设备
  330. */
  331. changeEquipment(id) {
  332. _.map(this.systemContentData, o => {
  333. return (o.isActive = o.category_code === id);
  334. });
  335. this.getTableData();
  336. },
  337. /**
  338. * 获取表数据
  339. */
  340. getTableData() {
  341. let query = {
  342. category_code: _.find(this.systemContentData, o => {
  343. return o.isActive;
  344. }).category_code
  345. };
  346. let url = `/data/sms_asset/query?plazaId=${this.plazaId}&page=${this.curPage}&size=${this.pageSize}&orderBy=is_exception,0`;
  347. if (_.trim(this.searchKey) !== "") {
  348. url = `${url}&keyword=${this.searchKey}:sbjc,sbjbm`;
  349. }
  350. queryTableData(url, query).then(res => {
  351. const { result, count, data } = res;
  352. if (result === "success") {
  353. this.tatol = count;
  354. this.tableData = data;
  355. }
  356. });
  357. },
  358. /**
  359. * 表第一列序号
  360. */
  361. indexMethod(index) {
  362. return index + 1;
  363. },
  364. /**
  365. * 切换页码
  366. */
  367. changeTablePage(page) {
  368. this.curPage = page;
  369. this.getTableData();
  370. },
  371. /**
  372. * 显示设备实例的维保、专维等状态
  373. */
  374. showEquipmentStatus(row, column, e) {
  375. let ins = this;
  376. setTimeout(() => {
  377. ins.hisCurPage = 1;
  378. if (ins.showDetail || ins.showAccessory) {
  379. return;
  380. }
  381. if (ins.isClickPicture) {
  382. ins.isClickPicture = false;
  383. return
  384. }
  385. ins.equipTitle = row.sbjc;
  386. ins.dialogTableVisible = true;
  387. ins.assetnum = row.assetnum;
  388. ins.initTimePicker();
  389. }, 36);
  390. },
  391. /**
  392. * 获取核心设备实例的所有历史事项信息
  393. */
  394. getEquipmentHistoryMsg() {
  395. this.historyTableData = [];
  396. let param = {
  397. page: this.hisCurPage,
  398. size: this.hisPageSize,
  399. plazaId: this.plazaId,
  400. assetnum: this.assetnum,
  401. // assetnum: 24071,
  402. startDate: this.startTime,
  403. // startDate: 20000101000000,
  404. endDate: this.endTime
  405. // endDate: 20200201000000
  406. };
  407. queryHistoryTableData("/data/base/queryDateByAssetNum", param).then(
  408. res => {
  409. const { result, data, count } = res;
  410. if (result === "success") {
  411. this.historyTableData = data;
  412. this.hisTotal = count;
  413. _.forEach(this.historyTableData, item => {
  414. let name;
  415. switch (item.type) {
  416. case 0:
  417. name = "专维";
  418. break;
  419. case 1:
  420. name = "维保";
  421. break;
  422. case 2:
  423. name = "第三方视图";
  424. break;
  425. }
  426. item.typeName = name;
  427. item.finishDate = moment
  428. .unix(item.finishDate / 1000)
  429. .format("YYYY.MM.DD");
  430. });
  431. }
  432. }
  433. );
  434. },
  435. /**
  436. * 初始化时间选择器
  437. */
  438. initTimePicker() {
  439. let endTime = new Date(),
  440. startTime = new Date(endTime.getTime() - 1000 * 60 * 60 * 24 * 30);
  441. this.dialogTime = [startTime, endTime];
  442. this.changeTime();
  443. },
  444. /**
  445. * 切换时间
  446. */
  447. changeTime() {
  448. this.hisCurPage = 1;
  449. if (this.dialogTime) {
  450. this.startTime = moment
  451. .unix(new Date(this.dialogTime[0]).getTime() / 1000)
  452. .format("YYYYMMDDHHmmss");
  453. this.endTime = moment
  454. .unix(new Date(this.dialogTime[1]).getTime() / 1000)
  455. .format("YYYYMMDDHHmmss");
  456. } else {
  457. this.initTimePicker();
  458. }
  459. this.getEquipmentHistoryMsg();
  460. },
  461. /**
  462. * 切换设备台账下所有历史事项信息页码
  463. */
  464. changeHisTablePage(page) {
  465. this.hisCurPage = page;
  466. this.getEquipmentHistoryMsg();
  467. },
  468. /**
  469. * 显示图片详情
  470. */
  471. showPicturesDetail(val, type) {
  472. console.log("val", val);
  473. if (type === "equip") {
  474. if (!val.photos_num) {
  475. this.isClickPicture = true;
  476. return
  477. }
  478. if (!val.file_type || !val.file_type_id) {
  479. return;
  480. }
  481. } else {
  482. if (!val.photosNum) {
  483. this.isClickPicture = true;
  484. return;
  485. }
  486. }
  487. this.showDetail = true;
  488. this.detailTitle = "图片预览";
  489. this.getDetailData(val, type);
  490. },
  491. /**
  492. * 显示附件详情
  493. */
  494. showReportDetail(val, type, e) {
  495. console.log("val111", val);
  496. if (type === "equip") {
  497. if (!val.attachments_num) {
  498. this.isClickPicture = true;
  499. return
  500. }
  501. if (!val.file_type || !val.file_type_id) {
  502. return;
  503. }
  504. } else {
  505. if (!val.attachmentsNum) {
  506. this.isClickPicture = true;
  507. return
  508. }
  509. }
  510. this.accessoryPos = {
  511. top: e.clientY + 5,
  512. left: e.clientX - 360 -5
  513. }
  514. this.showAccessory = true;
  515. this.isClickAccessory = true;
  516. this.detailTitle = "附件预览";
  517. this.getDetailData(val, type);
  518. },
  519. /**
  520. * 获取图片/报告详情
  521. */
  522. getDetailData(val, type) {
  523. let param = {
  524. assetnum: this.assetnum,
  525. plazaId: this.plazaId,
  526. file_type: type === 'equip'?val.file_type : val.type,
  527. // file_type: 0,
  528. file_type_id: type === 'equip'?val.file_type_id : val.id,
  529. // file_type_id: this.detailTitle === "图片预览" ?2914 : 1136,
  530. // file_type_id: 9886,
  531. type: this.detailTitle === "图片预览" ? 0 : 1
  532. };
  533. queryDetailData("/data/base/queryFileDetails", param).then(res => {
  534. console.log("res", res);
  535. const { result, data } = res;
  536. if (result === "success") {
  537. let newData = [];
  538. _.forEach(data, (item, index) => {
  539. newData.push({
  540. id: item.id,
  541. url: item.urlname,
  542. isActive: index === 0,
  543. name: item.description
  544. });
  545. });
  546. if (this.detailTitle === "图片预览") {
  547. this.pictureList = newData;
  548. if (this.pictureList.length > 0) {
  549. this.curImg = this.pictureList[0];
  550. }
  551. } else {
  552. this.accessoryList = newData;
  553. }
  554. }
  555. });
  556. },
  557. /**
  558. * 切换当前预览大图
  559. */
  560. changeCurImg(id) {
  561. _.map(this.pictureList, o => {
  562. return (o.isActive = o.id === id);
  563. });
  564. this.curImg = _.find(this.pictureList, o => {
  565. return o.isActive;
  566. });
  567. }
  568. }
  569. };
  570. </script>
  571. <style lang='less' scoped>
  572. .core-device-report {
  573. display: flex;
  574. width: 100%;
  575. height: 100%;
  576. .main-left {
  577. padding-left: 16px;
  578. padding-right: 14px;
  579. padding-top: 12px;
  580. padding-bottom: 12px;
  581. width: 247px;
  582. border-top: 1px solid #e4e6e7;
  583. border-right: 1px solid #e4e6e7;
  584. .system-select {
  585. margin-bottom: 16px;
  586. }
  587. .item-content {
  588. padding-left: 12px;
  589. padding-right: 21px;
  590. padding-top: 7px;
  591. padding-bottom: 8px;
  592. border-bottom: 1px solid #e4e6e7;
  593. cursor: pointer;
  594. > div {
  595. display: flex;
  596. }
  597. .first-row {
  598. margin-bottom: 6px;
  599. display: flex;
  600. justify-content: space-between;
  601. > div:first-child {
  602. font-size: 14px;
  603. color: #1f2429;
  604. line-height: 19px;
  605. }
  606. > div:nth-of-type(2) {
  607. margin-left: 8px;
  608. font-size: 12px;
  609. color: #cd981d;
  610. line-height: 20px;
  611. }
  612. }
  613. .sec-row {
  614. margin-bottom: 6px;
  615. > div:first-child {
  616. font-size: 14px;
  617. color: #1f2429;
  618. line-height: 19px;
  619. > span {
  620. font-size: 12px;
  621. color: #646c73;
  622. }
  623. }
  624. // >div:nth-of-type(2){
  625. // padding-left: 8px;
  626. // padding-right: 8px;
  627. // font-size: 12px;
  628. // color: #0065B3;
  629. // line-height: 22px;
  630. // background: #E1F2FF;
  631. // }
  632. .abnormal {
  633. margin-left: 11px;
  634. padding-left: 3px;
  635. padding-right: 3px;
  636. font-size: 12px;
  637. color: #f54e45 !important;
  638. background: #fde3e2 !important;
  639. border-radius: 9px;
  640. }
  641. }
  642. }
  643. .system-content {
  644. .active {
  645. background: #e5eef5;
  646. border-radius: 2px;
  647. .first-row > div:first-child,
  648. .sec-row > div {
  649. color: #025baa;
  650. > span {
  651. color: #025baa;
  652. }
  653. }
  654. }
  655. }
  656. }
  657. .main-right {
  658. flex: 1;
  659. background: #fff;
  660. padding-left: 15px;
  661. padding-right: 13px;
  662. padding-top: 13px;
  663. padding-bottom: 25px;
  664. .search-container {
  665. margin-bottom: 12px;
  666. }
  667. .page {
  668. display: flex;
  669. justify-content: flex-end;
  670. }
  671. }
  672. .el-dialog {
  673. min-height: 600px;
  674. }
  675. .detail-container {
  676. display: flex;
  677. height: 600px;
  678. }
  679. .pictures-menu {
  680. margin-right: 21px;
  681. padding-top: 16px;
  682. padding-bottom: 16px;
  683. padding-right: 5px;
  684. height: 100%;
  685. overflow: auto;
  686. .item {
  687. > img {
  688. width: 180px;
  689. border: 4px solid rgba(245, 246, 247, 1);
  690. border-radius: 4px;
  691. }
  692. .name {
  693. width: 180px;
  694. font-size: 12px;
  695. color: #1f2429;
  696. line-height: 16px;
  697. margin-top: 12px;
  698. text-align: center;
  699. overflow: hidden;
  700. text-overflow: ellipsis;
  701. white-space: nowrap;
  702. }
  703. &:not(:last-of-type) {
  704. margin-bottom: 20px;
  705. }
  706. .active>img{
  707. border-color: rgba(31, 35, 41, 0.15);
  708. }
  709. }
  710. .active > img {
  711. border-color: rgba(31, 35, 41, 0.15);
  712. }
  713. }
  714. .cur-img-container {
  715. padding: 20px;
  716. flex: 1;
  717. height: 100%;
  718. background: #f5f6f7;
  719. display: flex;
  720. justify-content: center;
  721. align-items: center;
  722. > img {
  723. max-width: 730px;
  724. max-height: 530px;
  725. }
  726. }
  727. .accessory-container{
  728. padding-top: 4px;
  729. padding-bottom: 4px;
  730. width: 360px;
  731. max-height: 166px;
  732. overflow: auto;
  733. position: fixed;
  734. background: #fff;
  735. box-shadow: 0px 2px 10px 0px rgba(31,35,41,0.1);
  736. border-radius: 2px;
  737. border: 1px solid rgba(228,229,231,1);
  738. z-index: 5000;
  739. >div>a{
  740. padding-left: 12px;
  741. padding-right: 12px;
  742. display: block;
  743. height: 38px;
  744. font-size: 14px;
  745. line-height: 38px;
  746. overflow: hidden;
  747. text-overflow: ellipsis;
  748. white-space: nowrap;
  749. &:hover{
  750. background: #F5F6F7;
  751. }
  752. }
  753. }
  754. }
  755. </style>