GanttChart.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806
  1. <!-- 事项甘特图 -->
  2. <template>
  3. <div class="gantt-chart">
  4. <div class="condition-legend-bar">
  5. <Select
  6. class="system-select"
  7. width="217"
  8. :isReadOnly="true"
  9. tipPlace="top"
  10. caption="系统名称:"
  11. v-model="systemId"
  12. :selectdata="systemList"
  13. :placeholder="'请选择'"
  14. @change="changeSystem"
  15. hideClear
  16. />
  17. <div class="legend-container">
  18. <div v-for="(item) in legends" :key="'key_' + item.id" class="item-legend">
  19. <div :style="{'background': item.backgroundColor, 'border-color': item.borderColor}"></div>
  20. <div>{{item.text}}</div>
  21. </div>
  22. <div>
  23. <el-radio-group v-model="timeType" @change="changeView">
  24. <el-radio style="line-height: 32px;margin-right: 16px;" label="month">月视图</el-radio>
  25. <el-radio style="line-height: 32px;" label="day">日视图</el-radio>
  26. </el-radio-group>
  27. </div>
  28. </div>
  29. </div>
  30. <div class="main-gantt-container">
  31. <div class="task-title">
  32. <div class="title">任务标题</div>
  33. <div>
  34. <Tree :data="treeData" @openNode="toggleNode" />
  35. </div>
  36. </div>
  37. <div class="chart-container" id="chartContainer" ref="chartContainer">
  38. <div id="ganttContainer"></div>
  39. </div>
  40. <el-dialog :title="ganttDetail.name" :visible.sync="showDetail" width="840px">
  41. <div class="dialog-container">
  42. <div class="row task-status">
  43. <div>
  44. <Task class="icon" />
  45. <div class="title">任务状态</div>
  46. </div>
  47. <div v-show="ganttDetail.status" :style="{'background': ganttDetail.color && ganttDetail.color[1]?ganttDetail.color[1] : '', 'color': ganttDetail.color && ganttDetail.color[0]?ganttDetail.color[0] : ''}">{{ganttDetail.status}}</div>
  48. </div>
  49. <div class="row">
  50. <div>
  51. <PlanTime class="icon" />
  52. <div class="title">计划时间</div>
  53. </div>
  54. <div class="info">{{ganttDetail.planTime}}</div>
  55. </div>
  56. <div class="row">
  57. <div>
  58. <RealTime class="icon" />
  59. <div class="title">实际执行时间</div>
  60. </div>
  61. <div class="info">{{ganttDetail.realTime}}</div>
  62. </div>
  63. <div class="row picture">
  64. <div>
  65. <Picture class="icon" />
  66. <div class="title">照片</div>
  67. </div>
  68. <div>
  69. <div>
  70. <div class="num">{{pictureList.length}}张</div>
  71. <div v-if="pictureList.length > 0" class="more" @click="() => showImgDetail = true">查看更多</div>
  72. </div>
  73. <div class="pictrue-container">
  74. <div v-for="(item) in pictures" :key="'id_' + item.id" @click="showImgContainer(item.id)" class="item">
  75. <img src="../../assets/imgs/analysis/picture.png" alt />
  76. <div class="info" :title="item.name">{{item.name}}</div>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. <div class="row picture">
  82. <div>
  83. <Report class="icon" />
  84. <div class="title">报告</div>
  85. </div>
  86. <div>
  87. <div>
  88. <div class="num">{{accessoryList.length}}张</div>
  89. </div>
  90. <div class="accessory-container" :style="{'max-height': accessoryIsExpand?'' : '115px'}">
  91. <a :href="item.url?item.url : 'javascript:void(0)'" target="_blank" v-for="(item) in accessoryList" :key="'id_' + item.id" class="item">
  92. <img src="../../assets/imgs/analysis/report_pdf.png" alt />
  93. <div class="info" :title="item.name">{{item.name}}</div>
  94. </a>
  95. <div v-if="accessoryList.length > 0" class="expand-more" @click="() => accessoryIsExpand = !accessoryIsExpand">
  96. <ExpandArrow :class="{'expand': accessoryIsExpand}"/>
  97. 展开更多
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  102. <div class="row test-content">
  103. <div>
  104. <Menu class="icon" />
  105. <div class="title">检测内容</div>
  106. </div>
  107. <el-table :data="tableData" max-height="300">
  108. <el-table-column property="sbjc" label="设备简称"></el-table-column>
  109. <el-table-column property="sbjbm" label="设备编号"></el-table-column>
  110. <el-table-column property="cnt" label="设备数"></el-table-column>
  111. <el-table-column property="wzjc" width="300" label="空间位置"></el-table-column>
  112. </el-table>
  113. </div>
  114. </div>
  115. </el-dialog>
  116. <div class="img-detail-container">
  117. <el-dialog :title="'图片预览'" :visible.sync="showImgDetail" width="1260px">
  118. <div class="detail-container">
  119. <div class="pictures-menu">
  120. <div v-for="(item) in pictureList" :key="'id_' + item.id" class="item" @click="changeCurImg(item.id)" :class="{'active': item.isActive}">
  121. <img :src="item.url?item.url : ''" alt="">
  122. <div class="name" :title="item.name">{{item.name}}</div>
  123. </div>
  124. </div>
  125. <div class="cur-img-container">
  126. <img v-if="curImg && curImg.url" :src="curImg.url" alt="">
  127. </div>
  128. </div>
  129. </el-dialog>
  130. </div>
  131. </div>
  132. </div>
  133. </template>
  134. <script>
  135. import { queryGanttChart, queryGanttDetail } from "../../api/ganttChart";
  136. import { querySystemList, queryDetailData } from "../../api/coreDeviceReport";
  137. import { Tree } from "meri-design";
  138. import _ from "lodash";
  139. import moment from "moment";
  140. // import '../../utils/ganttChart/g.js';
  141. import { GanttChartDay } from "../../utils/ganttChart/GanttChart_day.js";
  142. import { GanttChartMonth } from "../../utils/ganttChart/GanttChart_month.js";
  143. import { parse } from "path";
  144. import Task from "../../assets/svg/task.svg";
  145. import PlanTime from "../../assets/svg/plan_time.svg";
  146. import RealTime from "../../assets/svg/real_time.svg";
  147. import Picture from "../../assets/svg/picture.svg";
  148. import Report from "../../assets/svg/report.svg";
  149. import Menu from "../../assets/svg/menu.svg";
  150. import ExpandArrow from "../../assets/svg/expand_arrow.svg";
  151. export default {
  152. data() {
  153. return {
  154. plazaId: 1000423, // 广场id
  155. systemList: [], // 系统列表
  156. systemId: "", // 系统名称
  157. legends: [
  158. {
  159. id: 1,
  160. text: "按时完成",
  161. backgroundColor: "#E7E9EA",
  162. borderColor: "#C3C7CB"
  163. },
  164. {
  165. id: 2,
  166. text: "未开始/进行中",
  167. backgroundColor: "rgba(91, 143, 249, 0.2)",
  168. borderColor: "#5B8FF9"
  169. },
  170. {
  171. id: 3,
  172. text: "逾期完成",
  173. backgroundColor: "#FBCE99",
  174. borderColor: "#F58300"
  175. },
  176. {
  177. id: 4,
  178. text: "逾期未完成",
  179. backgroundColor: "#FBB8B5",
  180. borderColor: "#F54E45"
  181. }
  182. ], // 图例
  183. timeType: "month", // 甘特图时间类型
  184. treeData: [], // 树结构数据
  185. startTime: null, // 甘特图开始时间
  186. endTime: null, // 甘特图结束时间
  187. // 弹窗相关
  188. showDetail: false, // 弹框显示状态
  189. // detailTitle: "", // 弹窗标题
  190. pictures: [
  191. // {
  192. // id: 1,
  193. // imgSrc: require("../../assets/imgs/analysis/picture.png"),
  194. // title: "2019年5月高压用具检测报告.jpg"
  195. // },
  196. // {
  197. // id: 2,
  198. // imgSrc: require("../../assets/imgs/analysis/picture.png"),
  199. // title: "2019年5月高压用具检测报告.jpg"
  200. // }
  201. ], // 照片
  202. ganttDetail: {}, // 甘特图明细
  203. tableData: [], // 表数据
  204. curTask: {}, // 当前查看的任务
  205. pictureList: [
  206. // {id: 1, url: require('../../assets/images/login_back.png'), name: '图层名称1.jpg', isActive: true},
  207. // {id: 2, url: require('../../assets/images/matter_pop3.png'), name: '图层名称2.jpg', isActive: false},
  208. // {id: 3, url: require('../../assets/images/login_back.png'), name: '图层名称3.jpg', isActive: false},
  209. ], // 图片
  210. curImg: {}, // 当前查看的图片
  211. accessoryList: [], // 附件
  212. accessoryIsExpand: false, // 附件是否展开
  213. showImgDetail: false, // 查看更多图片弹框显示状态
  214. };
  215. },
  216. components: {
  217. Task,
  218. PlanTime,
  219. RealTime,
  220. Picture,
  221. Report,
  222. Menu,
  223. ExpandArrow
  224. },
  225. computed: {},
  226. beforeMount() {
  227. let PLAZAID = localStorage.getItem('PLAZAID');
  228. this.plazaId = Number(PLAZAID) || 1000423;
  229. },
  230. mounted() {
  231. document.addEventListener('click', () => {
  232. setTimeout(() => {
  233. if (this.isClickAccessory) {
  234. this.isClickAccessory = false;
  235. return
  236. }
  237. this.showAccessory = false;
  238. }, 20)
  239. })
  240. this.initChartTime();
  241. this.getSystemList();
  242. },
  243. methods: {
  244. /**
  245. * 初始化甘特图请求时间
  246. */
  247. initChartTime() {
  248. let endTime = new Date().getTime(),
  249. startTime = endTime - 1000*60*60*24*365;
  250. this.startTime = moment.unix(startTime / 1000).format('YYYYMMDDHHmmss');
  251. this.endTime = moment.unix(endTime / 1000).format('YYYYMMDDHHmmss');
  252. },
  253. /**
  254. * 获取系统列表数据
  255. */
  256. getSystemList() {
  257. querySystemList().then(res => {
  258. if (res.result === "success") {
  259. let data = res.data;
  260. let newData = [];
  261. _.forEach(data, item => {
  262. newData.push({
  263. id: item.code,
  264. name: item.name
  265. });
  266. });
  267. this.systemList = newData;
  268. const { query } = this.$route;
  269. if (!_.isEmpty(query) && query.smsxt) {
  270. this.systemId = query.smsxt;
  271. } else {
  272. this.systemId = newData[0].id;
  273. }
  274. this.getGanttChartData();
  275. }
  276. });
  277. },
  278. /**
  279. * 处理请求数据的时间
  280. */
  281. disQueryTime() {
  282. let startTime, endTime;
  283. let curTime = new Date(),
  284. curYear = curTime.getFullYear(),
  285. curMonth = curTime.getMonth() + 1;
  286. if (this.timeType === "month") {
  287. startTime = `${curYear}0101000000`;
  288. endTime = `${curYear + 1}0101000000`;
  289. } else {
  290. startTime = `${curYear}${curMonth}01000000`;
  291. if (curMonth + 1 > 12) {
  292. endTime = `${curYear + 1}0101000000`;
  293. } else {
  294. endTime = `${curYear}${curMonth + 1}01000000`;
  295. }
  296. }
  297. return [startTime, endTime];
  298. },
  299. /**
  300. * 切换系统
  301. */
  302. changeSystem() {
  303. if (window.gc) {
  304. gc.gCanvas.destroy();
  305. window.gc = null;
  306. }
  307. this.getGanttChartData();
  308. },
  309. /**
  310. * 切换视图
  311. */
  312. changeView() {
  313. console.log('timeType', this.timeType)
  314. if (window.gc) {
  315. gc.gCanvas.destroy();
  316. window.gc = null;
  317. }
  318. this.getGanttChartData();
  319. },
  320. /**
  321. * 获取甘特图数据
  322. */
  323. getGanttChartData() {
  324. let time = this.disQueryTime();
  325. let param = {
  326. smsxt: this.systemId,
  327. plazaId: this.plazaId,
  328. startDate: this.startTime, // time[0]
  329. endDate: this.endTime // time[1]
  330. };
  331. queryGanttChart("/data/base/queryGanttChart", param).then(res => {
  332. const { dsfList, wbList, zwList, result } = res;
  333. console.log("res", res);
  334. if (result === "success") {
  335. let newData = [],
  336. data = [wbList, zwList, dsfList],
  337. name = ["维保", "专维", "第三方检测"];
  338. _.forEach(data, (item, index) => {
  339. newData.push({
  340. index: index,
  341. id: index + 1,
  342. name: name[index],
  343. open: true,
  344. // children: name[index] === '专维'?[] : this.disGanttData(dsfList)
  345. children: this.disGanttData(data[index])
  346. });
  347. });
  348. this.treeData = newData;
  349. let taskData = _.map(_.cloneDeep(newData), item => {
  350. return {
  351. id: item.id,
  352. type: item.name,
  353. open: item.open,
  354. dataList: _.map(item.children, _item => {
  355. return {
  356. id: _item.id,
  357. title: _item.name,
  358. tasks: _item.originData
  359. };
  360. })
  361. };
  362. });
  363. console.log("taskData", taskData);
  364. if (!window.gc) {
  365. let width = this.$refs.chartContainer.offsetWidth;
  366. let handleFn = null;
  367. if (this.timeType === 'month') {
  368. handleFn = GanttChartMonth
  369. } else {
  370. handleFn = GanttChartDay
  371. }
  372. window.gc = new handleFn({
  373. chartParentContainer: "chartContainer",
  374. chartContainer: "ganttContainer",
  375. viewWidth: width,
  376. cWidth: 3 * width,
  377. tasks: taskData,
  378. daysCount: this.timeType === 'month'? (365*1.5) : parseInt((3 * width) / 40),
  379. callback: this.showDialog,
  380. pageToCallback: (data)=>{
  381. const { startAt, endAt } = data;
  382. this.startTime = moment.unix(new Date(startAt).getTime() / 1000).format('YYYYMMDDHHmmss');
  383. this.endTime = moment.unix(new Date(endAt).getTime() / 1000).format('YYYYMMDDHHmmss');
  384. this.getGanttChartData();
  385. }
  386. });
  387. gc.main();
  388. } else {
  389. gc.changeTasks(taskData)
  390. }
  391. }
  392. });
  393. },
  394. /**
  395. * 处理甘特图数据
  396. */
  397. disGanttData(arr) {
  398. let data = [];
  399. _.forEach(arr, item => {
  400. data.push({
  401. id: item.id,
  402. name: item.name,
  403. checked: "uncheck",
  404. originData: _.map(item.data, _item => {
  405. // _item.startDate = moment.unix((new Date().getTime() - 1000*60*60*24*7)/1000).format('YYYY-MM-DD HH:mm:ss');
  406. _item.startDate = moment.unix(_item.startDate / 1000).format("YYYY-MM-DD HH:mm:ss");
  407. // _item.endDate = moment.unix(new Date().getTime()/1000).format('YYYY-MM-DD HH:mm:ss');
  408. _item.endDate = moment.unix(_item.endDate / 1000).format("YYYY-MM-DD HH:mm:ss");
  409. _item.description = _item.parentname;
  410. return _item;
  411. })
  412. });
  413. });
  414. return data;
  415. },
  416. /**
  417. * 展开收起节点
  418. */
  419. toggleNode(status, item) {
  420. console.log("status", status, item);
  421. window.gc.toggle(item.index);
  422. },
  423. /**
  424. * 显示弹窗
  425. */
  426. showDialog(task) {
  427. this.showDetail = true;
  428. // this.detailTitle = task._pdata.description;
  429. this.curTask = task;
  430. this.getGanttDetailData();
  431. this.getPictureOrReportData(0);
  432. this.getPictureOrReportData(1);
  433. },
  434. /**
  435. * 获取甘特图详情
  436. */
  437. getGanttDetailData() {
  438. const { id, statusType } = this.curTask._pdata;
  439. let param = {
  440. plazaId: this.plazaId,
  441. type: statusType,
  442. id: id
  443. };
  444. queryGanttDetail("/data/base/queryGanttChartDetails", param).then(res => {
  445. const { result, data } = res;
  446. if (result === "success") {
  447. if (!data) {
  448. this.ganttDetail = {}
  449. return
  450. }
  451. const {
  452. status,
  453. planStartDate,
  454. planEndDate,
  455. realStartDate,
  456. realEndDate,
  457. statusType,
  458. name
  459. } = data;
  460. let color;
  461. switch (statusType) {
  462. case 1:
  463. color = ['#c3c7cb', '#e7e9ea'];
  464. break
  465. case 2:
  466. color = ['#5b8ff9', '#5b8ff933'];
  467. break
  468. case 3:
  469. color = ['#f58300', '#fbce99'];
  470. break
  471. case 4:
  472. color = ['#f54e45', '#fbb8b5'];
  473. break
  474. default:
  475. color = ['#f54e45', '#fbb8b5'];
  476. break
  477. }
  478. let newData = {
  479. status,
  480. color: color,
  481. name: name,
  482. planTime: this.dealDetailTime(planStartDate, planEndDate),
  483. realTime: this.dealDetailTime(realStartDate, realEndDate)
  484. };
  485. this.ganttDetail = newData;
  486. this.tableData = data.assetList;
  487. }
  488. });
  489. },
  490. /**
  491. * 处理时间
  492. */
  493. dealDetailTime(startTime, endTime) {
  494. let start = moment.unix(startTime / 1000).format("YYYY.MM.DD HH:mm:ss"),
  495. end = moment.unix(endTime / 1000).format("YYYY.MM.DD HH:mm:ss");
  496. return `${start}-${end}`;
  497. },
  498. /**
  499. * 获取甘特图的图片/报告详情
  500. */
  501. getPictureOrReportData(type) {
  502. const { id, statusType } = this.curTask._pdata;
  503. let param = {
  504. plazaId: this.plazaId,
  505. file_type: statusType,
  506. // file_type: 0,
  507. file_type_id: id,
  508. // file_type_id: 9886,
  509. type: type,
  510. };
  511. queryDetailData("/data/base/queryFileDetails", param).then(res => {
  512. console.log("photo", res);
  513. const { result, data } = res;
  514. if (result === 'success') {
  515. let newData = [];
  516. _.forEach(data, (item, index) => {
  517. newData.push({
  518. id: item.id,
  519. url: item.urlname,
  520. isActive: index === 0,
  521. name: item.description
  522. });
  523. });
  524. if (type === 0) {
  525. this.pictureList = newData;
  526. this.curImg = newData[0];
  527. this.pictures = this.pictureList.slice(0, 2);
  528. } else {
  529. this.accessoryList = newData;
  530. }
  531. }
  532. });
  533. },
  534. /**
  535. * 切换当前预览大图
  536. */
  537. changeCurImg(id) {
  538. _.map(this.pictureList, (o) => {return o.isActive = o.id === id});
  539. this.curImg = _.find(this.pictureList, (o) => {return o.isActive});
  540. },
  541. /**
  542. * 展示图片
  543. */
  544. showImgContainer(id) {
  545. console.log('id', id)
  546. _.map(this.pictures, (o) => {return o.isActive = o.id === id});
  547. this.curImg = _.find(this.pictures, (o) => {return o.isActive});
  548. this.showImgDetail = true;
  549. }
  550. },
  551. beforeDestroy() {
  552. window.gc = null;
  553. }
  554. };
  555. </script>
  556. <style lang='less' scoped>
  557. .gantt-chart {
  558. padding-left: 16px;
  559. padding-right: 16px;
  560. padding-top: 12px;
  561. padding-bottom: 16px;
  562. width: 100%;
  563. height: 100%;
  564. background: #fff;
  565. .condition-legend-bar {
  566. margin-bottom: 12px;
  567. display: flex;
  568. justify-content: space-between;
  569. }
  570. .legend-container {
  571. display: flex;
  572. .item-legend {
  573. padding-left: 18px;
  574. position: relative;
  575. font-size: 14px;
  576. color: #646c73;
  577. line-height: 32px;
  578. &:not(:nth-of-type(4)) {
  579. margin-right: 20px;
  580. }
  581. > div:first-child {
  582. position: absolute;
  583. left: 0;
  584. top: calc(50% - 6px);
  585. width: 12px;
  586. height: 12px;
  587. border: 1px solid;
  588. }
  589. &:nth-of-type(4) {
  590. margin-right: 32px;
  591. }
  592. }
  593. }
  594. .main-gantt-container {
  595. width: 100%;
  596. height: calc(100% - 44px);
  597. background: #f2f5f7;
  598. border: 1px solid rgba(239, 240, 241, 1);
  599. border-radius: 4px;
  600. display: flex;
  601. .task-title {
  602. width: 404px;
  603. height: 100%;
  604. border-right: 1px solid #eff0f1;
  605. .title {
  606. padding-left: 32px;
  607. padding-top: 15px;
  608. padding-bottom: 15px;
  609. font-size: 14px;
  610. color: #646c73;
  611. line-height: 19px;
  612. border-bottom: 1px solid #eff0f1;
  613. }
  614. > div:nth-of-type(2) {
  615. max-height: calc(100% - 50px);
  616. overflow: auto;
  617. }
  618. }
  619. .chart-container {
  620. flex: 1;
  621. overflow: hidden;
  622. background: #fff;
  623. }
  624. }
  625. .dialog-container {
  626. max-height: 580px;
  627. overflow: auto;
  628. padding-right: 5px;
  629. .row {
  630. display: flex;
  631. > div:first-child {
  632. margin-right: 24px;
  633. display: flex;
  634. align-items: center;
  635. }
  636. &:not(:last-of-type) {
  637. margin-bottom: 14px;
  638. }
  639. .info {
  640. font-size: 14px;
  641. color: #1f2429;
  642. line-height: 22px;
  643. }
  644. }
  645. .icon {
  646. margin-right: 6px;
  647. width: 16px;
  648. }
  649. .title {
  650. width: 84px;
  651. font-size: 14px;
  652. color: #646c73;
  653. line-height: 22px;
  654. font-weight: 400;
  655. }
  656. .task-status > div:nth-of-type(2) {
  657. padding-left: 8px;
  658. padding-right: 8px;
  659. // width: 58px;
  660. height: 24px;
  661. background: rgba(91, 143, 249, 0.2);
  662. border-radius: 2px;
  663. color: #5b8ff9;
  664. line-height: 24px;
  665. text-align: center;
  666. }
  667. .picture {
  668. margin-bottom: 19px !important;
  669. > div:first-child {
  670. align-items: baseline;
  671. }
  672. > div:nth-of-type(2) {
  673. flex: 1;
  674. }
  675. > div:nth-of-type(2) > div:first-child {
  676. margin-bottom: 12px;
  677. display: flex;
  678. }
  679. .num,
  680. .more {
  681. font-size: 14px;
  682. line-height: 22px;
  683. font-weight: 400;
  684. }
  685. .num {
  686. margin-right: 22px;
  687. color: #1f2429;
  688. }
  689. .more {
  690. color: #025baa;
  691. cursor: pointer;
  692. }
  693. }
  694. .pictrue-container,
  695. .accessory-container {
  696. .item {
  697. padding: 10px 16px;
  698. width: 400px;
  699. border-radius: 4px;
  700. border: 1px solid rgba(233, 233, 233, 1);
  701. display: flex;
  702. align-items: center;
  703. cursor: pointer;
  704. > img {
  705. width: 24px;
  706. margin-right: 15px;
  707. }
  708. .info{
  709. overflow: hidden;
  710. text-overflow: ellipsis;
  711. white-space: nowrap;
  712. }
  713. }
  714. .item:not(:last-of-type) {
  715. margin-bottom: 8px;
  716. }
  717. }
  718. .accessory-container{
  719. position: relative;
  720. overflow: hidden;
  721. .expand-more{
  722. position: absolute;
  723. left: 444px;
  724. bottom: 0;
  725. color: #025baa;
  726. cursor: pointer;
  727. display: flex;
  728. align-items: center;
  729. >svg{
  730. margin-right: 4px;
  731. width: 16px;
  732. transition: transform .36s;
  733. }
  734. .expand{
  735. transform: rotate(180deg);
  736. }
  737. }
  738. }
  739. .test-content {
  740. display: block;
  741. > div:first-child {
  742. margin-bottom: 13px;
  743. }
  744. }
  745. }
  746. .detail-container {
  747. display: flex;
  748. height: 600px;
  749. }
  750. .pictures-menu {
  751. margin-right: 21px;
  752. padding-top: 16px;
  753. padding-bottom: 16px;
  754. padding-right: 5px;
  755. height: 100%;
  756. overflow: auto;
  757. .item {
  758. > img {
  759. width: 180px;
  760. border: 4px solid rgba(245, 246, 247, 1);
  761. border-radius: 4px;
  762. }
  763. .name {
  764. width: 180px;
  765. font-size: 12px;
  766. color: #1f2429;
  767. line-height: 16px;
  768. margin-top: 12px;
  769. text-align: center;
  770. overflow: hidden;
  771. text-overflow: ellipsis;
  772. white-space: nowrap;
  773. }
  774. &:not(:last-of-type) {
  775. margin-bottom: 20px;
  776. }
  777. }
  778. .active>img{
  779. border-color: rgba(31, 35, 41, 0.15);
  780. }
  781. }
  782. .cur-img-container {
  783. padding: 20px;
  784. flex: 1;
  785. height: 100%;
  786. background: #f5f6f7;
  787. display: flex;
  788. justify-content: center;
  789. align-items: center;
  790. > img {
  791. max-width: 730px;
  792. max-height: 530px;
  793. }
  794. }
  795. }
  796. </style>