GanttChart.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802
  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">{{this.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">{{this.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) return
  448. const {
  449. status,
  450. planStartDate,
  451. planEndDate,
  452. realStartDate,
  453. realEndDate,
  454. statusType,
  455. name
  456. } = data;
  457. let color;
  458. switch (statusType) {
  459. case 0:
  460. color = ['#c3c7cb', '#e7e9ea'];
  461. break
  462. case 1:
  463. color = ['#5b8ff9', '#5b8ff933'];
  464. break
  465. case 2:
  466. color = ['#f58300', '#fbce99'];
  467. break
  468. case 3:
  469. color = ['#f54e45', '#fbb8b5'];
  470. break
  471. default:
  472. color = ['#f54e45', '#fbb8b5'];
  473. break
  474. }
  475. let newData = {
  476. status,
  477. color: color,
  478. name: name,
  479. planTime: this.dealDetailTime(planStartDate, planEndDate),
  480. realTime: this.dealDetailTime(realStartDate, realEndDate)
  481. };
  482. this.ganttDetail = newData;
  483. this.tableData = data.assetList;
  484. }
  485. });
  486. },
  487. /**
  488. * 处理时间
  489. */
  490. dealDetailTime(startTime, endTime) {
  491. let start = moment.unix(startTime / 1000).format("YYYY.MM.DD HH:mm:ss"),
  492. end = moment.unix(endTime / 1000).format("YYYY.MM.DD HH:mm:ss");
  493. return `${start}-${end}`;
  494. },
  495. /**
  496. * 获取甘特图的图片/报告详情
  497. */
  498. getPictureOrReportData(type) {
  499. const { id, statusType } = this.curTask._pdata;
  500. let param = {
  501. file_type: statusType,
  502. // file_type: 0,
  503. file_type_id: id,
  504. // file_type_id: 9886,
  505. type: type,
  506. };
  507. queryDetailData("/data/base/queryFileDetails", param).then(res => {
  508. console.log("photo", res);
  509. const { result, data } = res;
  510. if (result === 'success') {
  511. let newData = [];
  512. _.forEach(data, (item, index) => {
  513. newData.push({
  514. id: item.id,
  515. url: item.urlname,
  516. isActive: index === 0,
  517. name: item.description
  518. });
  519. });
  520. if (type === 0) {
  521. this.pictureList = newData;
  522. this.curImg = newData[0];
  523. this.pictures = this.pictureList.slice(0, 2);
  524. } else {
  525. this.accessoryList = newData;
  526. }
  527. }
  528. });
  529. },
  530. /**
  531. * 切换当前预览大图
  532. */
  533. changeCurImg(id) {
  534. _.map(this.pictureList, (o) => {return o.isActive = o.id === id});
  535. this.curImg = _.find(this.pictureList, (o) => {return o.isActive});
  536. },
  537. /**
  538. * 展示图片
  539. */
  540. showImgContainer(id) {
  541. console.log('id', id)
  542. _.map(this.pictures, (o) => {return o.isActive = o.id === id});
  543. this.curImg = _.find(this.pictures, (o) => {return o.isActive});
  544. this.showImgDetail = true;
  545. }
  546. },
  547. beforeDestroy() {
  548. window.gc = null;
  549. }
  550. };
  551. </script>
  552. <style lang='less' scoped>
  553. .gantt-chart {
  554. padding-left: 16px;
  555. padding-right: 16px;
  556. padding-top: 12px;
  557. padding-bottom: 16px;
  558. width: 100%;
  559. height: 100%;
  560. background: #fff;
  561. .condition-legend-bar {
  562. margin-bottom: 12px;
  563. display: flex;
  564. justify-content: space-between;
  565. }
  566. .legend-container {
  567. display: flex;
  568. .item-legend {
  569. padding-left: 18px;
  570. position: relative;
  571. font-size: 14px;
  572. color: #646c73;
  573. line-height: 32px;
  574. &:not(:nth-of-type(4)) {
  575. margin-right: 20px;
  576. }
  577. > div:first-child {
  578. position: absolute;
  579. left: 0;
  580. top: calc(50% - 6px);
  581. width: 12px;
  582. height: 12px;
  583. border: 1px solid;
  584. }
  585. &:nth-of-type(4) {
  586. margin-right: 32px;
  587. }
  588. }
  589. }
  590. .main-gantt-container {
  591. width: 100%;
  592. height: calc(100% - 44px);
  593. background: #f2f5f7;
  594. border: 1px solid rgba(239, 240, 241, 1);
  595. border-radius: 4px;
  596. display: flex;
  597. .task-title {
  598. width: 404px;
  599. height: 100%;
  600. border-right: 1px solid #eff0f1;
  601. .title {
  602. padding-left: 32px;
  603. padding-top: 15px;
  604. padding-bottom: 15px;
  605. font-size: 14px;
  606. color: #646c73;
  607. line-height: 19px;
  608. border-bottom: 1px solid #eff0f1;
  609. }
  610. > div:nth-of-type(2) {
  611. max-height: calc(100% - 50px);
  612. overflow: auto;
  613. }
  614. }
  615. .chart-container {
  616. flex: 1;
  617. overflow: hidden;
  618. background: #fff;
  619. }
  620. }
  621. .dialog-container {
  622. max-height: 580px;
  623. overflow: auto;
  624. padding-right: 5px;
  625. .row {
  626. display: flex;
  627. > div:first-child {
  628. margin-right: 24px;
  629. display: flex;
  630. align-items: center;
  631. }
  632. &:not(:last-of-type) {
  633. margin-bottom: 14px;
  634. }
  635. .info {
  636. font-size: 14px;
  637. color: #1f2429;
  638. line-height: 22px;
  639. }
  640. }
  641. .icon {
  642. margin-right: 6px;
  643. width: 16px;
  644. }
  645. .title {
  646. width: 84px;
  647. font-size: 14px;
  648. color: #646c73;
  649. line-height: 22px;
  650. font-weight: 400;
  651. }
  652. .task-status > div:nth-of-type(2) {
  653. padding-left: 8px;
  654. padding-right: 8px;
  655. // width: 58px;
  656. height: 24px;
  657. background: rgba(91, 143, 249, 0.2);
  658. border-radius: 2px;
  659. color: #5b8ff9;
  660. line-height: 24px;
  661. text-align: center;
  662. }
  663. .picture {
  664. margin-bottom: 19px !important;
  665. > div:first-child {
  666. align-items: baseline;
  667. }
  668. > div:nth-of-type(2) {
  669. flex: 1;
  670. }
  671. > div:nth-of-type(2) > div:first-child {
  672. margin-bottom: 12px;
  673. display: flex;
  674. }
  675. .num,
  676. .more {
  677. font-size: 14px;
  678. line-height: 22px;
  679. font-weight: 400;
  680. }
  681. .num {
  682. margin-right: 22px;
  683. color: #1f2429;
  684. }
  685. .more {
  686. color: #025baa;
  687. cursor: pointer;
  688. }
  689. }
  690. .pictrue-container,
  691. .accessory-container {
  692. .item {
  693. padding: 10px 16px;
  694. width: 400px;
  695. border-radius: 4px;
  696. border: 1px solid rgba(233, 233, 233, 1);
  697. display: flex;
  698. align-items: center;
  699. cursor: pointer;
  700. > img {
  701. width: 24px;
  702. margin-right: 15px;
  703. }
  704. .info{
  705. overflow: hidden;
  706. text-overflow: ellipsis;
  707. white-space: nowrap;
  708. }
  709. }
  710. .item:not(:last-of-type) {
  711. margin-bottom: 8px;
  712. }
  713. }
  714. .accessory-container{
  715. position: relative;
  716. overflow: hidden;
  717. .expand-more{
  718. position: absolute;
  719. left: 444px;
  720. bottom: 0;
  721. color: #025baa;
  722. cursor: pointer;
  723. display: flex;
  724. align-items: center;
  725. >svg{
  726. margin-right: 4px;
  727. width: 16px;
  728. transition: transform .36s;
  729. }
  730. .expand{
  731. transform: rotate(180deg);
  732. }
  733. }
  734. }
  735. .test-content {
  736. display: block;
  737. > div:first-child {
  738. margin-bottom: 13px;
  739. }
  740. }
  741. }
  742. .detail-container {
  743. display: flex;
  744. height: 600px;
  745. }
  746. .pictures-menu {
  747. margin-right: 21px;
  748. padding-top: 16px;
  749. padding-bottom: 16px;
  750. padding-right: 5px;
  751. height: 100%;
  752. overflow: auto;
  753. .item {
  754. > img {
  755. width: 180px;
  756. border: 4px solid rgba(245, 246, 247, 1);
  757. border-radius: 4px;
  758. }
  759. .name {
  760. width: 180px;
  761. font-size: 12px;
  762. color: #1f2429;
  763. line-height: 16px;
  764. margin-top: 12px;
  765. text-align: center;
  766. overflow: hidden;
  767. text-overflow: ellipsis;
  768. white-space: nowrap;
  769. }
  770. &:not(:last-of-type) {
  771. margin-bottom: 20px;
  772. }
  773. }
  774. .active>img{
  775. border-color: rgba(31, 35, 41, 0.15);
  776. }
  777. }
  778. .cur-img-container {
  779. padding: 20px;
  780. flex: 1;
  781. height: 100%;
  782. background: #f5f6f7;
  783. display: flex;
  784. justify-content: center;
  785. align-items: center;
  786. > img {
  787. max-width: 730px;
  788. max-height: 530px;
  789. }
  790. }
  791. }
  792. </style>